京东轮播图/平滑翻页（jQuery版本）
先放效果图
一：设计思路
功能设计：
html结构
使用一个div作为最大的容器（outer），图片使用ul列表，翻页的点点使用另一个div来放置。
1 <body> 2 <div id="outer"> 3 <ul id="imgList"> 4 <li> 5 <img src="../pic/3.jpg" > 6 </li> 7 <li> 8 <img src="../pic/4.jpg" > 9 </li> 10 <li> 11 <img src="../pic/5.jpg" > 12 </li> 13 <li> 14 <img src="../pic/3.jpg" > 15 </li> 16 </ul> 17 <!-- 创建导航按钮 --> 18 <div id="navDiv"> 19 <a href="javascript:;"></a> 20 <a href="javascript:;"></a> 21 <a href="javascript:;"></a> 22 23 </div> 24 </div> 25 </body>
轮播效果实现：
ul列表里的li横向排列(float:left),每切换一张图，实际上是把ul整体往左边移动一个图片的宽度，同时对应点点的切换。
注意，最后一张图切换到第一张图的平滑翻页方法：在真正的最后一张图后面再加上第一张图，最后一张图切换到第一张图，其实是切换到第一张图的副本，在这个期间再悄悄把left改成0，显示的是真正的最后一张图。
二：样式设计
最外层outer放在页面中间，开启定位为相对定位，这样其中的ul子元素才能相对于outer容器来定位。
宽度为图片宽度（380px）+图片之间的间距（设为10px）=400px，高度为图片的高度300px。
ul（img_list）采用绝对定位，这里要注意一个问题就是，ul的width一定要显式指定，因为ul会继承outer内容区的宽度，这样当li开启浮动，ul会竖向摆放这些图片，导致我们不能通过改变left来实现平滑翻页。ul的width可以是在css中按照图片数量手动指定，但是缺乏灵活性。可以通过js按照图片的数量动态设置ul宽度。
li开启浮动，有一个小问题：img的display属性是inline，所以它会按照文本的默认对齐方式(基线对齐)来对齐，这样就会导致图片和父元素之间会出现2px的空隙，将img的父元素li的lineheight改成0就可以解决这个问题。
关于点点：
1.通过设置a标签的width height bgc这三个属性，可以设置一个点点的形状颜色等，a标签开启浮动，并且设置边距。装a标签的容器div设置绝对定位，设置bottom使点点在图片靠下的位置。
2.上文提到，动态改变ul宽度，那么也应该根据a标签的数量，动态设置a标签水平居中。
三：功能实现
3.1.自动翻页
总体思路：写一个按照指定速度移动至目标位置的moveBox函数，自动翻页函数（autoChange）设置一个循环定时器，3秒钟调用一次moveBox函数，就可以实现自动翻页。
1 // 功能：将obj按照指定速度移动到目标位置 2 // speed始终为正 3 function moveBox(obj,attr,target,speed,callback){ 4 // 对于同一个属性，开启定时器之前应该结束旧的定时器，否则就会越来越快 5 clearInterval(obj.timer); 6 7 var old_value = parseInt(obj.css(attr)); 8 if(old_value > target){ 9 // 往反方向移动 10 speed = -speed; 11 } 12 console.log(target); 13 obj.timer = setInterval(function(){ 14 old_value = parseInt(obj.css(attr)); 15 var new_value = old_value + speed; 16 if(speed > 0 && new_value > target || speed < 0 && new_value < target) 17 { 18 // 当超出目标位置，要回正 19 new_value = target; 20 } 21 obj.css(attr,new_value); 22 if(new_value == target){ 23 // 到达目标位置要做的事 24 // 结束定时器，查看是否有回调函数，有就调用 25 clearInterval(obj.timer); 26 callback && callback(); 27 } 28 },30) 29 }
设置一个全局变量index，记录翻页的索引值，用于计算目标位置，设置对应的点点背景色变化
3.2点点背景变化
思路：通过index找到对应的点点，设置背景色。先全部设为红色，再把index对应的点设为灰色。当index=3时，应该用css把left设置为0，同时把index设为0.
function setColor(){ // 当翻到了第四张图，用css改left为0，index为0 console.log(index); if(index >= $img_List.length - 1){ $('.img_List').css('left',0); index = 0; } // 设置点点背景变色 for(var i=0;i<$img_List.length;i++){ $(a[i]).css('background','rgba(228, 18, 18, 0.918)'); } $(a[index]).css('background','rgba(75, 70, 70, 0.623)'); }
3.3手动点击点点进行翻页
思路：为每个点点（a标签）绑定一个点击事件，当点击事件发生，结束autoChange的定时器timer（所以这个定时器应该是一个全局变量），调用moveBox移动到对应的页面。
调用完毕后重新开启timer进行自动翻页。
tip：可以在一开始为每个a标签设置num属性，记录a的index，这样在点击事件发生时，就可以通过this.num获得被点击的a标签的index。
// 监听点点是否被点击 a.click(function(){ index = this.num; clearInterval(timer); setColor(); moveBox($('.img_List'),'left',-$('.outer').innerWidth()*index,50,setColor); autoChange(); })
四：总体流程
1.设置ul宽度随着图片数量动态增加
2.设置navDiv随着a标签（点点）个数动态水平居中
3.设置全局变量index、timer
4.为a标签添加num属性
5.为navDiv设置初始颜色：第一个灰色，后面的都是红色
6.开启autoChange
全部代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../reset.css">
<script src="../jquery-3.0.0.js"></script>
<style>
.outer{
width: 400px;
height: 300px;
margin: 100px auto;
padding: 10px 0;
background-color: turquoise;
position: relative;
overflow: hidden;
}
.img_List{
position: absolute;
left: 0;
}
.img_List li{
/* 改变对齐方式 */
line-height: 0;
float: left;
margin: 0 10px;
}
.navDiv{
position: absolute;
bottom: 20px;
}
.navDiv a{
width: 15px;
height: 15px;
float: left;
background-color: rgba(228, 18, 18, 0.918);
margin: 0 5px;
}
</style>
<script>
$(function(){
// 1.依据图片数量动态设置ul的宽度
var $img_List = $('.img_List li');
var len = $img_List.length;
var ul_width = len * 400;
$('.img_List').css('width',ul_width);
// 2.依据a标签个数动态设置div居中
var a = $('.navDiv a');
var div_width = a.length * 25;
var div_left = (400 - div_width)/2
$('.navDiv').css('left',div_left);
// 给标签添加num属性
for(var x = 0; x < a.length;x++){
a[x].num = x;
}
var index = 0;
var timer;//自动切换用的定时器，手动切换时，要先关闭这个定时器，手动切换完再开始
// 2.1设置点点初始背景色
$(a[index]).css('background', 'rgba(75, 70, 70, 0.623)');
// 开启自动翻页
autoChange();
// 3.设置自动翻页
// 3.1 设置翻页函数
// 功能：将obj按照指定速度移动到目标位置
// speed始终为正
function moveBox(obj,attr,target,speed,callback){
// 对于同一个属性，开启定时器之前应该结束旧的定时器，否则就会越来越快
clearInterval(obj.timer);
var old_value = parseInt(obj.css(attr));
if(old_value > target){
// 往反方向移动
speed = -speed;
}
console.log(target);
obj.timer = setInterval(function(){
old_value = parseInt(obj.css(attr));
var new_value = old_value + speed;
if(speed > 0 && new_value > target || speed < 0 && new_value < target)
{
// 当超出目标位置，要回正
new_value = target;
}
obj.css(attr,new_value);
if(new_value == target){
// 到达目标位置要做的事
// 结束定时器，查看是否有回调函数，有就调用
clearInterval(obj.timer);
callback && callback();
}
},30)
}
// 3.2设置自动翻页函数
function autoChange(){
timer = setInterval(function(){
index++;
index %= $img_List.length;//index:0,1,2,3
moveBox($('.img_List'),'left',-$('.outer').innerWidth()*index,50,setColor)
},3000)
}
// 3.2要保证点点和翻页同步
/*
设置一个全局变量index，用于控制翻的是哪一页，和点亮哪一个点点
并且判断是否翻页到了第一张图的副本页，如果是，用css改成第一页
*/
function setColor(){
// 当翻到了第四张图，用css改left为0，index为0
console.log(index);
if(index >= $img_List.length - 1){
$('.img_List').css('left',0);
index = 0;
}
// 设置点点背景变色
for(var i=0;i<$img_List.length;i++){
$(a[i]).css('background','rgba(228, 18, 18, 0.918)');
}
$(a[index]).css('background','rgba(75, 70, 70, 0.623)');
}
// 3.3.手动点击点点翻页
// 监听点点是否被点击
a.click(function(){
index = this.num;
clearInterval(timer);
setColor();
moveBox($('.img_List'),'left',-$('.outer').innerWidth()*index,50,setColor);
autoChange();
})
})
</script>
</head>
<body>
<div class="outer">
<ul class="img_List">
<li>
<img src="../pic/3.jpg" alt="">
</li>
<li>
<img src="../pic/4.jpg" alt="">
</li>
<li>
<img src="../pic/5.jpg" alt="">
</li>
<li>
<img src="../pic/3.jpg" alt="">
</li>
</ul>
<div class="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号