1. 思路
通过视窗的原理，将多张图片横排，想让哪张图片显示，只要通过改变它的水平位置即可实现。
2. html布局与css样式确定
2.1 jQuery引用
这里是在js Bin(http://js.jirengu.com/?html,output)上写的代码，jQuery引用可通过勾选自动生成。
如果自己引用的话，有两种方式：
2.1.1 本地引用
在jQuery官网下载页面(http://jquery.com/download/)下载文件到本地，进行引用。
<script src="相对路径/绝对路径"></script>
2.1.2 在线引用
在cdnjs官网(https://cdnjs.com/)搜索jQuery，得到在线引用地址，进行引用。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2.2 html页面搭建
页面包括：一个显示窗口，包括4个image图片；一个导航菜单，包括4个点击按钮，用span标签。
<body>
<div class="window">
<div class="images" id=images>
<img src="https://fthmb.tqn.com/0ui_Zw01Ht9NHJkSBlqOIC1IH44=/960x0/filters:no_upscale()/yorkshire-terrier-583788122-581630e85f9b581c0b018a00.jpg" width=300 alt="图片1" height=200>
<img src="https://canna-pet.com/wp-content/uploads/2017/06/20-longest-living-dog-breeds_canna-pet-e1498599846169.jpg" width=300 alt="" height=200>
<img src="https://fthmb.tqn.com/0ui_Zw01Ht9NHJkSBlqOIC1IH44=/960x0/filters:no_upscale()/yorkshire-terrier-583788122-581630e85f9b581c0b018a00.jpg" width=300 alt="" height=200>
<img src="https://canna-pet.com/wp-content/uploads/2017/06/20-longest-living-dog-breeds_canna-pet-e1498599846169.jpg" width=300 alt="" height=200>
</div>
</div>
<span id=buttons>
<span>第1张</span>
<span>第2张</span>
<span>第3张</span>
<span>第4张</span>
</span>
</body>
2.2.1 img宽高的设置
注意这里使用的图片宽高设置300*200的，保证之后切换图片的时候，不会出现问题。
既然图片宽高对相同，那为什么还要在img标签上加上width=300和height=200呢？
由于浏览器加载图片有时会出现延迟，这是，它会提供一个占位符，但占位符的宽高与图片不一致，导致文档流发生一次排列。当图片加载完毕后，浏览器会重新渲染页面，进行重排，这样就浪费了性能，所以设置宽高可以避免文档流的重排，节省性能。
2.3 css布局
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.images{
display: flex; /*横向布局*/
align-items: flex-start;
transition: all 0.5s; /*过渡动画*/
}
.images > img{
vertical-align: top;
}
.window{
width: 300px; /*与img宽度相同*/
overflow: hidden; /*window溢出则隐藏*/
}
</style>
</head>
3. 使用jQuery实现图片轮播
3.1 实现点击按钮切换图片
3.1.1 原始代码
获取所有按钮元素，给每个元素绑定点击事件，点击更改iamges(也就是包裹img的那个元素)的style属性中的水平位置，从而实现视觉上的切换。
let allButtons = $('#buttons > span') // 获取所有span的伪数组
$(allButtons[0]).on('click', function(event) { //注意 allButtons[0]是dom不能使用jQuery的api，利用$()封装后就可以了
$(images).css({
transform: 'translateX(0)' // 注意这里不是css，别加分号；
})
})
$(allButtons[1]).on('click', function(event) {
$(images).css({
transform: 'translateX(-300px)' // 也可利用margin-left的值进行位置的改变
})
})
$(allButtons[2]).on('click', function(event) {
$(images).css({
transform: 'translateX(-600px)'
})
})
$(allButtons[3]).on('click', function(event) {
$(images).css({
transform: 'translateX(-900px)'
})
})
点击按钮，即可完成图片切换，如图：
slide1.gif
3.1.3 js代码优化
上述代码缺点是，如果图片数量发生变化，js代码也需要改动，所以需要进一步的优化。
let allButtons = $('#buttons > span')
for(let i=0;i<allButtons.length;i++) { // 循环伪数组，给按钮添加点击事件
$(allButtons[i]).on('click', function(x) { // x 为事件相关合集
let index = $(x.currentTarget).index() // x.currentTarget为点击的元素，
let p = index * (-300) // index()是jQuery的api，可以得到该节点处于同级兄弟中的第几位
$('#images').css({
transform:'translate(' + p + 'px)' // 通过index换算出我们需要的位移，动态传入
})
})
}
现在不管多少轮播中有几张图片，代码都不需要改动了。
3.2 实现轮播图的自动播放
3.2.1 模拟用户点击按钮操作
思路：上述代码可以人为地点击进行图片切换，自动切换就是模拟出人点击按钮的动作即可。
let allButtons = $('#buttons > span')
for(let i=0;i<allButtons.length;i++) {
$(allButtons[i]).on('click', function(x) {
let index = $(x.currentTarget).index()
let p = index * (-300)
$('#images').css({
transform:'translate(' + p + 'px)'
})
})
}
let n = 0;
allButtons.eq(n%4).trigger('click') // eq()可以根据参数选择元素，再通过trigger()触发click事件
setInterval(()=>{ // 利用setInterval设置代码执行间隔
n += 1
allButtons.eq(n%4).trigger('click') // n%4可以形成循环
}, 1500) // 时间间隔1.5s
我们不需要点击，通过计时器它会自动轮播，如下图：
slide2.gif
3.2.2 代码优化，数量不要写死
let allButtons = $('#buttons > span')
for(let i=0;i<allButtons.length;i++) {
$(allButtons[i]).on('click', function(x) {
let index = $(x.currentTarget).index()
let p = index * (-300)
$('#images').css({
transform:'translate(' + p + 'px)'
})
})
}
let n = 0
let size = allButtons.length // 获取图片的总数量
allButtons.eq(n%size).trigger('click') //将固定数量4，改为变量size，这样有图片数量变动就不用改这里了，这里算是初始化操作
setInterval(()=>{
n += 1
allButtons.eq(n%size).trigger('click')
}, 1500)
3.3 按钮样式高亮
我们希望图片对应的按钮能够高亮，这样方便我们进行辨认。
let allButtons = $('#buttons > span')
for(let i=0;i<allButtons.length;i++) {
$(allButtons[i]).on('click', function(x) {
let index = $(x.currentTarget).index()
let p = index * (-300)
$('#images').css({
transform:'translate(' + p + 'px)'
})
})
}
let n = 0
let size = allButtons.length
allButtons.eq(n%size).trigger('click')
.addClass('red') // jQuery的链式操作，给触发click事件的元素添加class
.siblings('.red').removeClass('red') // 找到red类的兄弟元素，并把他们的red类的class移除掉
setInterval(()=>{
n += 1
allButtons.eq(n%size).trigger('click')
.addClass('red')
.siblings('.red').removeClass('red')
}, 1500)
注意：jQuery的链式操作，每次操作完，不是操作最开始的元素，而是在找到的新的元素。
如图所示，按钮也进行了高亮，有了导航栏的效果。
slide3.gif
3.4 消除定时器和用户操作之间的矛盾
上述代码，只是完成了定时器自动播放，当用户进行滑动到图片上方时，定时器并不会停止，从而产生冲突。
解决思路：当鼠标划入到图片，消除定时器；鼠标滑出图片，添加定时器。点击按钮，按钮高亮，图片跳回。
let allButtons = $('#buttons > span')
for(let i=0;i<allButtons.length;i++) {
$(allButtons[i]).on('click', function(x) {
let index = $(x.currentTarget).index()
let p = index * (-300)
$('#images').css({
transform:'translate(' + p + 'px)'
})
n = index // 通过index确定按钮的位置，n的重复使用是关键
allButtons.eq(n) // 按钮高亮
.addClass('red')
.siblings('.red').removeClass('red')
})
}
let n = 0
let size = allButtons.length
allButtons.eq(n%size).trigger('click')
.addClass('red')
.siblings('.red').removeClass('red')
let timerId = setInterval(()=>{ // 将计时器操作赋值给变量timerId
n += 1
allButtons.eq(n%size).trigger('click')
.addClass('red')
.siblings('.red').removeClass('red')
}, 1500)
$('.window').on('mouseenter', function() { // 给.window的div添加鼠标进入事件
window.clearInterval(timerId) // 进入则删除计时器
})
$('.window').on('mouseleave', function() { // 当鼠标滑出div
timerId = setInterval(()=>{ // 再把计时器操作赋值给变量timeId，从而继续计时器操作
n += 1
allButtons.eq(n%size).trigger('click')
.addClass('red')
.siblings('.red').removeClass('red')
}, 1500)
})
效果如图
slide4.gif
3.5 优化代码
哪里有重复代码，哪里就有优化的可能。
let allButtons = $('#buttons > span')
for(let i=0;i<allButtons.length;i++) {
$(allButtons[i]).on('click', function(x) {
let index = $(x.currentTarget).index()
let p = index * (-300)
$('#images').css({
transform:'translate(' + p + 'px)'
})
n = index
activeButton(allButtons.eq(n))
})
}
let n = 0
let size = allButtons.length
allButtons.eq(n%size).trigger('click')
let timerId = setTimer()
$('.window').on('mouseenter', function() {
window.clearInterval(timerId)
})
$('.window').on('mouseleave', function() {
timerId = setTimer()
})
function activeButton($button) {
$button.addClass('red')
. siblings('.red').removeClass('red')
}
function setTimer() {
return setInterval(()=>{
n += 1
allButtons.eq(n%size).trigger('click')
.addClass('red')
.siblings('.red').removeClass('red')
}, 1500)
}
4. 总结
4.1 注意jQuery api与dom api的区分
dom节点是不能用jQuery的api的，需要利用$()调用即可。
4.2 用到的jQuery api有：
- $()
- .on('click',function() {})
- .on('mouseenter',function() {})
- .on('mouseleave',function() {})
- .trigger('click')
- .eq(n)
- .addClass()
- .removeClass()
- .siblings()
4.3 注意全局变量的使用。
5. 参考链接
饥人谷相关课程https://xiedaimala.com/
