需求 ：使图片能够进行轮播滚动，到最后一张图片时返回第一张(或第一张向前到最后一张)。
思路 ：在两端的图片前后添加一个虚拟镜像，当切换到镜像时，返回到所对应的真实图片。
方案 ：
1.通过浮动或绝对定位使图片水平排列。
2.页面打开后将图片的第一张与最后一张的克隆镜像分别放到最后一张的后面和第一张的前面。
3.当点击翻页按钮时，将图片整体向左（右）移动图片宽度的距离，并且对当前显示的图片位置进行判断，当移动到镜像位置时将镜像位置替换为实际图片位置。
4.当图片移动时，在图片下方的页码也随之改变，并且对每一个页码绑定点击事件，当点击页码时，跳转到对应的图片。
5.优化：当翻页动画未完成时，多次点击翻页，会使程序出错。
每次点击时进行判断，动画完成前的点击无效。
使用jQuery做轮播图是网页特效中很常见的一个特效。
工具原料：编辑器、浏览器、jQuery
1、实现的总体思路：
首先是初始化部分：将除了第一张轮播图片意外的图片都隐藏，并且隐藏向前、向后按钮，使第一个索引按钮处于激活状态。
2、实现的具体事件处理思路：
事件部分：通过jquery的hover()绑定鼠标上悬以及离开时的事件处理， jquery的bind()方法绑定鼠标点击事件处理向前、向后翻动、轮播控制：pre(), next(), play(), start()开始自动轮播，stop()停止自动轮播。
3、简单的代码示例如下：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>jquery轮播效果图 </title>
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<style type="text/css">
* {
padding: 0px
margin: 0px
}
a {
text-decoration: none
}
ul {
list-style: outside none none
}
.slider, .slider-panel img, .slider-extra {
width: 650px
height: 413px
}
.slider {
text-align: center
margin: 30px auto
position: relative
}
.slider-panel, .slider-nav, .slider-pre, .slider-next {
position: absolute
z-index: 8
}
.slider-panel {
position: absolute
}
.slider-panel img {
border: none
}
.slider-extra {
position: relative
}
.slider-nav {
margin-left: -51px
position: absolute
left: 50%
bottom: 4px
}
.slider-nav li {
background: #3e3e3e
border-radius: 50%
color: #fff
cursor: pointer
margin: 0 2px
overflow: hidden
text-align: center
display: inline-block
height: 18px
line-height: 18px
width: 18px
}
.slider-nav .slider-item-selected {
background: blue
}
.slider-page a{
background: rgba(0, 0, 0, 0.2)
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000)
color: #fff
text-align: center
display: block
font-family: "simsun"
font-size: 22px
width: 28px
height: 62px
line-height: 62px
margin-top: -31px
position: absolute
top: 50%
}
.slider-page a:HOVER {
background: rgba(0, 0, 0, 0.4)
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000)
}
.slider-next {
left: 100%
margin-left: -28px
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var length,
currentIndex = 0,
interval,
hasStarted = false, //是否已经开始轮播
t = 3000 //轮播时间间隔
length = $('.slider-panel').length
//将除了第一张图片隐藏
$('.slider-panel:not(:first)').hide()
//将第一个slider-item设为激活状态
$('.slider-item:first').addClass('slider-item-selected')
//隐藏向前、向后翻按钮
$('.slider-page').hide()
//鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
$('.slider-panel, .slider-pre, .slider-next').hover(function() {
stop()
$('.slider-page').show()
}, function() {
$('.slider-page').hide()
start()
})
$('.slider-item').hover(function(e) {
stop()
var preIndex = $(".slider-item").filter(".slider-item-selected").index()
currentIndex = $(this).index()
play(preIndex, currentIndex)
}, function() {
start()
})
$('.slider-pre').unbind('click')
$('.slider-pre').bind('click', function() {
pre()
})
$('.slider-next').unbind('click')
$('.slider-next').bind('click', function() {
next()
})
/**
* 向前翻页
*/
function pre() {
var preIndex = currentIndex
currentIndex = (--currentIndex + length) % length
play(preIndex, currentIndex)
}
/**
* 向后翻页
*/
function next() {
var preIndex = currentIndex
currentIndex = ++currentIndex % length
play(preIndex, currentIndex)
}
/**
* 从preIndex页翻到currentIndex页
* preIndex 整数，翻页的起始页
* currentIndex 整数，翻到的那页
*/
function play(preIndex, currentIndex) {
$('.slider-panel').eq(preIndex).fadeOut(500)
.parent().children().eq(currentIndex).fadeIn(1000)
$('.slider-item').removeClass('slider-item-selected')
$('.slider-item').eq(currentIndex).addClass('slider-item-selected')
}
/**
* 开始轮播
*/
function start() {
if(!hasStarted) {
hasStarted = true
interval = setInterval(next, t)
}
}
/**
* 停止轮播
*/
function stop() {
clearInterval(interval)
hasStarted = false
}
//开始轮播
start()
})
</script>
</head>
<body>
<div class="slider">
<ul class="slider-main">
<li class="slider-panel">
<a href="
title="图片1" src="images/1.jpg"></a>
</li>
<li class="slider-panel">
<a href="#"><img title="图片2" src="images/1.jpg"></a>
</li>
<li class="slider-panel">
<a href="#"><img title="图片3" src="images/1.jpg"></a>
</li>
<li class="slider-panel">
<a href="#"><img title="图片4" src="images/1.jpg"></a>
</li>
</ul>
<div class="slider-extra">
<ul class="slider-nav">
<li class="slider-item">1</li>
<li class="slider-item">2</li>
<li class="slider-item">3</li>
<li class="slider-item">4</li>
</ul>
<div class="slider-page">
<a class="slider-pre" href="javascript:"><</a>
<a class="slider-next" href="javascript:">></a>
</div>
</div>
</div>
</body>
</html>
*{margin: 0
padding: 0
}
ul{
list-style:none
}
.slideShow{
width: 620px
height: 700px /*其实就是图片的高度*/
border: 1px #eeeeee solid
margin: 100px auto
position: relative
overflow: hidden /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
width: 2500px
position: relative /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
}
.slideShow ul li{
float: left /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
width: 620px
}
.slideShow .showNav{ /*用绝对定位给数字按钮进行布局*/
position: absolute
right: 10px
bottom: 5px
text-align:center
font-size: 12px
line-height: 20px
}
.slideShow .showNav span{
cursor: pointer
display: block
float: left
width: 20px
height: 20px
background: #ff5a28
margin-left: 2px
color: #fff
}
.slideShow .showNav .active{
background: #b63e1a
}
js代码规范：
<script src="../../../jQuery/js/jquery-2.1.4.js"></script> <script type="text/javascript">
$(document).ready(function(){
var slideShow=$(".slideShow"), //获取最外层框架的名称
ul=slideShow.find("ul"),
showNumber=slideShow.find(".showNav span"), //获取按钮
oneWidth=slideShow.find("ul li").eq(0).width() //获取每个图片的宽度
var timer=null //定时器返回值，主要用于关闭定时器
var iNow=0 //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
showNumber.on("click",function(){ //为每个按钮绑定一个点击事件
$(this).addClass("active").siblings().removeClass("active") //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
var index=$(this).index() //获取哪个按钮被点击，也就是找到被点击按钮的索引值
iNow=index
ul.animate({ "left":-oneWidth*iNow, //注意此处用到left属性，所以ul的样式里面需要设置position: relative 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定
})
})
function autoplay(){
timer=setInterval(function(){ //打开定时器
iNow++ //让图片的索引值次序加1，这样就可以实现顺序轮播图片
if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
iNow=0 }
showNumber.eq(iNow).trigger("click") //模拟触发数字按钮的click
},2000) //2000为轮播的时间
}
autoplay()
slideShow.hover( function(){clearInterval(timer)},autoplay) 另外注意setInterval的用法比较关键。
})
</script>
主体代码：
[html] view plain copy print?
<body>
<div class="slideShow">
<!--图片布局开始-->
<ul>
<li><a href="#"><img src="images/view/111.jpg"/></a></li>
<li><a href="#"><img src="images/view/112.jpg" /></a></li>
<li><a href="#"><img src="images/view/113.jpg" /></a></li>
<li><a href="#"><img src="images/view/114.jpg" /></a></li>
</ul>
<!--图片布局结束-->
<!--按钮布局开始-->
<div class="showNav">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<!--按钮布局结束-->
</div>
</body>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）