核心原理：当我们点了按钮后，对应图片的定位会修改，向左滑动展现在盒子可视区域；
1、绑定点击事件，激活切换tab栏样式；
$(document).ready(function() {
$('.img_box').on('click','.btn span',function() {
//一定要把点击的按钮的索引号存到index，比如点击了2按钮，因为鼠标经过触发了清除定时器事件，再开启index为0，会从0依次点击按钮，但点击后把当前点击的index存为变量的话，他就以2为准，index++ ,就是3了，就可以依次轮播，不会乱跳；
index = $(this).index();
// 样式
$(this).addClass('current').siblings('span').removeClass('current')
})
})
2、对应图片向左滑动展现在盒子可视区域；
// 修改盒子ul的animate的left值：把当前按钮的索引号*单个图片宽度，设置为负数则是向左移动
$('ul').animate({
"left": - $(this).index() * 350
})
图片移动原理
3、开启定时器，进行切换，鼠标经过盒子则关闭定时器，离开时打开定时器；
// 开启定时器每个3s，自动触发点击事件
var index = 0;
var span = $('.btn span');
var timer = setInterval(function() {
index++;
if(index > 3) {
index = 0;
}
span.eq(index).trigger('click');
},2000)
// 鼠标经过图标盒子清除定时器，离开则打开
$('.img_box').hover(function() {
clearInterval(timer);
},function() {
timer = setInterval(function() {
index++;
if(index > 3) {
index = 0;
}
span.eq(index).trigger('click');
},2000)
})
4、鼠标经过时左右箭头显示，离开时隐藏；
点击左箭头，显示上一长图片；
点击右箭头，显示下一张图片
//点击左边按钮，上一张图片显示;
$('.arrow_l').click(function() {
// 点击按钮，获取当前被选定的图片的索引号，因为每点击按钮，图片的索引号都会存给index变量，以点击了左按钮，可以返回当前的index,index--就是上一张图片索引号；
index--;
// 当index小于0，比如负数的时候，index=2 跳去第三张
if(index < 0) {
index = 2;
}
console.log(index);
// 再自动鼠标点击下一个index的span，就会触发点击事件；
span.eq(index).trigger('click');
})
//点击右边按钮，下一张图片显示;
$('.arrow_r').click(function() {
// 点击按钮，获取当前被选定的图片的索引号，因为每点击按钮，图片的索引号都会存给index变量，以点击了右按钮，可以返回当前的index,index++就是下一张图片索引号；
index++;
// 当index大于等于3，index=0，又跳到第一张
if(index >= 3) {
index = 0;
}
console.log(index);
// 再自动鼠标点击下一个index的span，就会触发点击事件；
span.eq(index).trigger('click');
})
HTML
<body>
<div class="img_box">
<!-- 图片布局开始 -->
<ul>
<li><a href="#"><img src="images/3.jpg" width="100%"></a></li>
<li><a href="#"><img src="images/4.jpg" width="100%"></a></li>
<li><a href="#"><img src="images/5.png" width="100%"></a></li>
</ul>
<!-- 图片布局结束 -->
<!-- 按钮布局开始 -->
<div class="btn">
<span class="current"></span>
<span></span>
<span></span>
</div>
<!-- 按钮布局结束 -->
<!-- 左右箭头开始 -->
<ol>
<li class="arrow_l"><</li>
<li class="arrow_r">></li>
</ol>
<!-- 左右箭头结束 -->
</div>
</body>
CSS
* {
padding: 0;
margin: 0;
list-style: none;
}
.img_box {
position: relative;
height: 220px;
width: 350px;
overflow: hidden;
}
.img_box ul {
width: 1050px;
position: relative;
transition: all 0.5s linear;
}
.img_box ul li {
float: left;
width: 350px;
}
.img_box .btn {
position: absolute;
bottom: 5px;
right: 5px;
}
.btn span {
cursor: pointer;
display: block;
float: left;
width: 10px;
height: 10px;
border-radius: 50px;
border: 2px #fff solid;
margin: 4px;
}
.current {
background-color: #fff;
}
/* 左右箭头 */
.arrow_l,
.arrow_r {
position: absolute;
top: 35%;
width: 20px;
height: 30px;
background-color: rgba(0,0,0,.3);
font-size: 20px;
color: #fff;
display: none;
}
.arrow_r {
right: 0;
}
网友评论