轮播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