jQuery实现简单图片的轮播(自右向左播放)

简单的轮播大概内容分为如下三点：

1.轮播图片的存储；

2.轮播的样式（注意：图片存储的总宽度，以及图片移动相对元素的定位的元素）；

3.JQuery中的计时器调用动画移动图片轮播。

一、carouselFigure.html编写图片的存储，以及所在范围

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CarouselFigure(自右向左)</title><link rel="stylesheet" type="text/css" href="carouselFigureCSS.css"><script type="text/javascript" src="jquery-3.0.0.min.js"></script><script type="text/javascript" src="carouselFigureJS.js"></script>
</head>
<body>
<!--jQuery实现简单图片的轮播(自右向左播放)-->
<!--最外层-->
<div class="carousel"><!--图片切换的范围-->
    <div class="banner"><!--图片存储-->
        <ul class="figureList"><li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图1.jpg"/></a></li><li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图2.jpg"/></a></li><li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图3.jpg"/></a></li><li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图4.jpg"/></a></li><li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图5.jpg"/></a></li><li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图6.jpg"/></a></li></ul></div>
</div>
</body>
</html>

二、carouselFigureCSS.css以上html每层的样式。

/*通用CSS属性*/
* {margin: 0;padding: 0;
}/*最外层的*/
.carousel {width: 580px;height: 360px;margin: 30px auto;
}/*图片切换的范围*/
.banner {width: 580px;height: 360px;overflow: hidden;position: relative;
}/*存储图片的ul*/
.figureList {list-style: none;/*存储的图片的总宽度*/
    width: 3480px;height: 360px;overflow: hidden;position: absolute;
}.figureList li {float: left;/*转换为行元素*/
    display: inline;
}.figureList li a {text-decoration: none;
}.figureList li img {width: 580px;height: 360px;
}

三、carouselFigureJS.js图片轮播动画

$(function () {//当前下标countIndex
    var countIndex = 0;//图片总数，即图片被包裹的li个数
    var imageCount = $(".figureList li").length;//计时器自动调用切换显示的图片下标，1.5秒调用一次。
    //一定要注意第一个函数调用不加括号
    var autoCarousel = setInterval(figureIndex, 1500);//转换下标，并调用动画切换图片
    function figureIndex() {if (countIndex < imageCount - 1) {countIndex++;} else {countIndex = 0;}//调用切换
        changeTo(countIndex);}//切换图片
    function changeTo(num) {//切换图片，也就是把figureList类（ul）向左移动。
        var leftGo = num * 580;$(".figureList").animate({"left": "-" + leftGo + "px"}, 500);}
});
/**
 * Created by 洋   汪 on 2016/7/31.
 */

以上为简单的只有图片的轮播，接下来的日子我将会写出带有按钮等之类的附加内容。请大家敬请关注。

jQuery实现简单图片的轮播(自右向左播放)相关推荐

HTML鼠标悬停图片置顶,jquery实现鼠标悬浮停止轮播特效
本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: 一.主体程序轮播图①(手动点击轮播) 1 2 3 4 二.CSS样式 * ...
iOS开发之ImageView复用实现图片无限轮播
在上篇博客中iOS开发之多图片无缝滚动组件封装与使用给出了图片无限轮播的实现方案之一,下面在给出另一种解决方案.今天博客中要说的就是在ScrollView上贴两个ImageView, 把ImageVi ...
iOS 两种不同的图片无限轮播
代码地址如下: http://www.demodashi.com/demo/11608.html 前记其实想写这个关于无限轮播的记录已经很久很久了,只是没什么时间,这只是一个借口,正如:时间就像海绵 ...
iOS 自定义图片无限轮播控件
一:简介图片轮播功能在App中是一个非常常见的功能,即允许定时滚动,也允许拖拽滚动,也可以点击每张图片触发事件. 二:实现方式图片轮播功能的实现方式有很多中, UIScrollView + N个U ...
三郎前端特效学习源代码：图片主页轮播组件
三郎前端特效学习源代码:图片主页轮播组件简单介绍效果图源代码 html部分 js部分 css部分简单介绍各大网站都比较常用的主页轮播组件可以自己改改就能用效果图源代码 html部分 & ...
vue项目里面视频与图片的轮播
需求仿照天猫等实现视频与图片的轮播效果运用的控件有: 1.视频播放器:腾讯云点播超级播放器官方文档地址(一定要看) 2.轮播插件:iSlider----这是一个表现出众,轻量且高性能,无任何库依赖 ...
老徐WEB：最简单详细的轮播图原理和制作过程（一）
老徐利用空闲时间,制作了一个最简单的轮播图,主要介绍轮播图的原理和制作过程,只要大家能认真看完这篇文章,并理解文中内容,就能完全掌握轮播图的制作了.之后工作中碰到复杂的轮播图,自己也能思考制作出来了. ...
Android实现广告页图片无限轮播
一.概述对于一个联网的Android应用, 首页广告无限轮播基本已经成为标配了. 那么它是怎么实现的呢? 有几种实现方式呢? 二.无限轮播的实现 1.最常规的手段是用 ViewPager来实现 2. ...
pc端html轮播带滑块,swiper.js简单快速实现轮播滑动（兼容PC端、移动端）
swiper是一款免费以及轻量级轮播滑动的js框架,适用于PC端跟移动端,官方地址:(https://www.swiper.com.cn/) 效果演示: PC端移动端(在浏览器将设备切换为手机,这里 ...

jQuery实现简单图片的轮播(自右向左播放)

jQuery实现简单图片的轮播(自右向左播放)相关推荐

最新文章

热门文章