上回书我们说到原生js淡入淡出效果的轮播图，这回我们说说左右滑动轮播图，由于需要缓动动画效果，原生js需要封装缓动函数，个人觉得不如JQ来的实在，所以本渣渣直接引入JQ，用JQ相对简单，重要的是思想。
1、思路
老规矩先来个大致思路，有个好的战略计划才能获取战斗的成功
1.1 css样式布局
有好的布局才能进行js的操控，css大致布局如下图
由上图简单的介绍一下布局
红色的是最外层容器，固定宽高，老规矩相对定位，还有就是一定要有溢出隐藏（overflow:hidden）；ul根据图片的多少宽度相对倍数改变，，同样ul是绝对定位，js就是改变ul的绝对定位的left值控制显示第几张的图片；焦点图的布局和轮播图（1）一样的方法，不知道的去瞅瞅；左右按钮就的容器也是绝对定位，用margin-top或者top值控制距离上部的距离，宽度也是100%；然后各自向左右浮动，margin值控制按钮相距最外层左右的距离；
1.2 js的大致思路
js同样要实现动态创建和图片相同个数的焦点图，计时器控制ul的left值，从而动态显示最外层里所显示的图片，加上溢出隐藏，就成了动态轮播图
2、开搞
2.1 html代码
<div class="banner" id="banner">
<ul>
<li><a href="#">[站外图片上传中……(2)]</a></li>
<li><a href="#">[站外图片上传中……(3)]</a></li>
<li><a href="#">[站外图片上传中……(4)]</a></li>
<li><a href="#">[站外图片上传中……(5)]</a></li>
<li><a href="#">[站外图片上传中……(6)]</a></li>
<li><a href="#">[站外图片上传中……(7)]</a></li>
<li><a href="#">[站外图片上传中……(8)]</a></li>
</ul>
<span class="order">
<!-- <i class="on"></i><i></i><i></i><i></i><i></i><i></i><i></i> -->
</span>
<div class="ctrl">
<button title="上一张" class="prev"><</button>
<button title="下一张" class="next">></button>
</div>
</div>
2.2 css代码
*{padding:0;margin:0;list-style: none;}
.banner{
width:500px;
height:312px;
overflow: hidden;
margin:0 auto;
position:relative;
}
.banner>ul{
height:312px;
width:3500px;
position: absolute;
left:0;
top:0;
}
.banner>ul li{
float:left;
width:500px;
}
.order{
display: block;
height:30px;
width:100%;
position: absolute;
top:90%;
left:0;
text-align: center;
}
.order i{
display:inline-block;
width:16px;
height:16px;
border-radius: 50%;
background:chocolate;
border:2px solid chocolate;
margin-right:10px;
cursor:pointer;
}
.order i:last-child{
margin-right: 0;
}
.order .on{
background:white;
}
.ctrl{
width:100%;
height:60px;
position: absolute;
top:120px;
left:0;
}
.ctrl button{
width:40px;
height:60px;
background: #ccc;
color:#FFF;
border:0;
outline:none;
opacity: 0.5;
font-size: 30px;
cursor:pointer;
}
.ctrl .prev{
float:left;
margin-left:10px;
}
.ctrl .next{
float:right;
margin-right:10px;
}
2.3 js代码
$(function(){
//创建控制小圆点
var imgLis = $('#banner>ul li');
console.log(imgLis.length);
for(i=0;i<imgLis.length;i++){
$('<i order='+i+'></i>').appendTo('.order');
}
//在第一个小圆点添加类名“on”
$('.order i').eq(0).addClass('on');
//将放置图片的容器ul里第一份”li“复制一份，追加到ul后面
imgLis.first().clone().appendTo('#banner ul');
console.log(imgLis.length);
$('#banner>ul').width($('#banner ul li').width()*(imgLis.length+1));
var num = 0;
var timer = null;
//状态预设，是为防止用户连续点击左右按钮，导致短时间内图片切换频率过高而犯神经，程序反应不来
var state = true;
function play(){
//从左向右时，判断num，是否大于最大值
if(num < 0){
num = imgLis.length-1;
$('#banner>ul').css({left:-imgLis.length*500+'px'});
}
//从右向左时，判断num，是否大于最大值
if(num > imgLis.length){
num = 1;
$('#banner>ul').css({left:'0'});
}
var left = num*500;
$('#banner>ul').animate({left:-left+'px'},function(){
state = true;
});
//焦点
$('.order i').removeClass('on');
$('.order i').eq(num).addClass('on');
if(num >= imgLis.length){
$('.order i').first().addClass('on');
}
}
//自动播放
function autoPlay(){
timer = setInterval(function(){
num++;
play();
},1000);
}
//添加鼠标移入暂停，移出继续事件
$('#banner').mouseover(
function(){
clearInterval(timer);
timer = null;
}
).mouseout(
function(){
autoPlay();
}
);
//给左右按钮添加点击事件
$('.prev').click(function(){
if(state == true){
state = false;
num--;
console.log(num);
play();
}
});
$('.next').click(function(){
if(state == true){
state = false;
num++;
play();
}
});
//给焦点添加点击事件
$('.order i').click(function(){
num = $(this).index()
play();
});
autoPlay();
});
3、注意
记得要引入jq，否则无法运行
这个轮播图虽然可用，但是有个很大的弊病，就是点击焦点时，所点击的焦点的索引与此时所显示图片的索引相差的有1或者大于1时会跳跃式快速滑动到相对应所点击的焦点索引的图片，对于用户来说体验不太好，所以这个轮播图适合没有焦点图，需要使用此轮播图的童鞋，为了体验，最好删除掉焦点图部分相关代码。
下一篇会有一个专门应对焦点图点击有良好体验的轮播图类型，敬请期待！
