jQuery轮播
2019-03-06 本文已影响0人
BOB_BI
轮播1.0——点击
预览：https://vialee.github.io/demo/looplay-demo/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<title>一个轮播</title>
</head>
<body>
<div class="main">
<div class="show">
<div id="images">
<img src="https://i.loli.net/2019/03/06/5c7fc5098a369.jpeg" alt="1" width="300" height="300">
<img src="https://i.loli.net/2019/03/06/5c7fc50c23c0b.jpeg" alt="2" width="300" height="300">
<img src="https://i.loli.net/2019/03/06/5c7fc50cbf2ca.jpeg" alt="3" width="300" height="300">
<img src="https://i.loli.net/2019/03/06/5c7fc50d00926.jpeg" alt="4" width="300" height="300">
<img src="https://i.loli.net/2019/03/06/5c7fc50d02347.jpeg" alt="5" width="300" height="300">
</div>
</div>
<div class="button">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
</body>
</html>
<style>
.main{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.show{
width: 300px;
height: 300px;
overflow: hidden;
}
#images{
display: flex;
align-items: flex-start;
transition: all 1s;
}
.images > img{
vertical-align: top;
}
.button{
color: #bee2e7;
margin: 0 auto;
cursor: pointer;
}
.button span{
margin-right: 10px;
}
.color{
color:#497d83;
}
</style>
<script>
var span = $('.button > span')
var n=0
var timeId = setTime()
$(span[0]).addClass('color')
for(let i=0;i<span.length;i++){
// $span.on('click', function(x){
// $span[i].on('click', function(x){ 注意分清楚dom和jQuery对象
$(span[i]).on('click', function(x){
var index = $(x.currentTarget).index() //currentTarget标识事件的当前目标
var p = index*-300
$('#images').css({
transform: 'translateX('+ p +'px)'
})
changeClass($(span[i]))
n=index
})
}
$('#images').on('mouseenter',function (){
window.clearInterval(timeId)
})
$('#images').on('mouseleave',function (){
console.log('leave')
timeId = setTime()
})
function setTime(){
return setInterval(()=>{
changeImg()
},4000)
}
function changeClass(aspan){
aspan.addClass('color')
.siblings('.color')
.removeClass('color')
}
function changeImg(){
n += 1
var i = n%span.length
$(span[i]).trigger('click') //$(span[i])===span.eq(i)
}
</script>
要注意的地方：
1.搞清楚是dom对象还是jQuery对象
2.currentTarget
3.jQuery的eq(index)方法，获取到第index个元素该元素是jq对象
存在的bug：
1.第一次打开页面时，图片宽度压缩
2.图片恢复正常前未加载完的话，之后加载完轮播也不显示，除非手动刷新
感觉要使图片预加载一下。
参考：http://js.jirengu.com/rokebotizo/2/edit?html,js,output
无缝轮播2.0——自动播放
https://vialee.github.io/looplay-demo/index2.html
无缝轮播3.0——自动播放+点击+左右button
image.png
添加跳转功能：
1.点击，改变translateX。
2.给每张图片添加current标识，可获取跳转前到上一张图片是哪张。
3.clone(true)第一张和最后一张图片。 //赋值所有
4.将克隆的第一张加到最后，将最后一张加到最前面。 .append() .prepend()
5.给第一张添加点击事件，判断如果是从最后一张(非克隆的)跳转过来则 跳转到最后一张(克隆的第一张)，并添加one.('transitionend')事件。
6.优化：遍历button
image.png
模版字符串
添加左右功能：
1.setInterval
image.png
