js实现图片轮播

html结构代码：

<div class="bookBanner" id="bookBnr">
    <div id="imgList" style="margin-left: -728px">
        <img src="img/restaurant.jpg" alt="3">
        <img src="img/bed.jpg" alt="1">
        <img src="img/balcony.jpg" alt="2">
        <img src="img/restaurant.jpg" alt="3">
        <img src="img/bed.jpg" alt="1">
    </div>
    <div id="bookCircle">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
    </div>
    <div id="bookPage">
        <img src="img/left.png" alt="" id="myLeft" >
        <img src="img/right.png" alt="" id="myRight">
    </div>
    <div id="bookBg">
        <div class="bookBannerText">
            <p>Studio Room</p>
            <span>form</span><h1>240$</h1>
            <p>per night () min 2 nights</p>
        </div>
    </div>
</div>

css样式结构：

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .bookBanner{
            width: 728px;
            overflow: hidden;
            position: relative;
        }
        .bookBanner>#imgList{
            width: 3640px;
        }
        .bookBanner>#imgList>img{
            width: 728px;
            float: left;
        }
        .bookBanner #bookPage{
            width: 100%;
            position: absolute;
            z-index: 99;
            top: 50%;
            margin-top: -25px;
            height: 50px;
        }
        .bookBanner #bookPage>img{
            height: 50px;
            position: absolute;
            transition: all .1s linear;
        }
        .bookBanner #bookPage>img:hover{
            transform: scale(1.1);
        }
        .bookBanner #bookPage>img:nth-of-type(1){
            left: -50px;
        }
        .bookBanner #bookPage>img:nth-of-type(2){
            right: -50px;
        }
        .bookBanner:hover #bookPage>img:nth-of-type(1){
            left: 30px;
        }
        .bookBanner:hover #bookPage>img:nth-of-type(2){
            right: 30px;
        }
        .bookBanner>#bookCircle{
            position: absolute;
            height: 10px;
            width: 100px;
            z-index: 2;
            bottom: 30px;
            left: 50px;
        }
        #bookCircle span {
            float: left;
            border: 3px solid rgba(255,255,255,0.5);
            width: 7px;
            height: 7px;
            border-radius: 50%;
            margin-right: 5px;
        }
        #bookCircle .on {
            border: 3px solid rgba(255,255,255,1);
        }
        .bookBanner>#bookBg{
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: rgba(58,150,182,0.5);
            cursor: pointer;
            color: white;
        }
        .bookBanner:hover>#bookBg{
            background-color: rgba(58,150,182,0.7);
        }
        .bookBanner>#bookBg p{
            font-size: 24px;
        }
        .bookBanner>#bookBg h1{
            font-size: 80px;
            display: inline-block;
            margin-left: 30px;
        }
        .bookBanner>#bookBg span{
            font-size: 24px;
            display: inline-block;
        }
        .bookBanner>#bookBg .bookBannerText{
            text-align: right;
            right: 80px;
            margin-top: 50px;
            opacity: 1;
            transition: all .1s linear;
            position: absolute;
        }
        .bookBanner:hover>#bookBg .bookBannerText{
            transform: translate(-30px,30px) ;
        }
    </style>

js代码

<script>
    function my$(id){
        return document.getElementById(id);
    }
    //页面加载时调用轮播函数
    window.onload=function () {
        banner();
    }
    //设置轮播
    function banner() {
        var index=1;//小圆点的索引
        var animated=false;//判断是否切换小圆点
        var timer;//为了清除定时器的全局变量
        var myCircle=my$("bookCircle").getElementsByTagName("span");//获取小圆点
        //小圆点状态切换函数
        function showCircle(){
            for(let i=0;i<myCircle.length;i++){
                if(myCircle[i].className=="on"){
                    myCircle[i].className="";
                    break;
                }
            }
            // 设置初始状态，第一次index=1，所以第一个myCircle的索引值就是0
            myCircle[index-1].className="on";
        }
        //图片切换函数
        function animate(offset) {//offset：一张图片宽度，也就是每次的偏移量
            animated = true;
            //新的偏移量=当前的偏移量+下一次的偏移量
            let newLeft = parseInt(my$("imgList").style.marginLeft)+ offset;
            /*
                把一张图片的偏移量分为多次完成偏移，视觉上是动画效果
            */
            let time = 500;//位移总时间
            let interval = 10;//位移间隔时间
            //每次位移的距离=单次偏移距离/位移次数
            let speed = offset / (time / interval);//偏移速度
            //定义图片的切换函数
            function go() {
                // speed < 0 && parseInt(my$("imgList").style.marginLeft) > newLeft)：点击右键的情况，向左偏移
                //speed > 0 && parseInt(my$("imgList").style.marginLeft) < newLeft)：点击左键的情况，向右偏移
                if ((speed < 0 && parseInt(my$("imgList").style.marginLeft) > newLeft) || (speed > 0 && parseInt(my$("imgList").style.marginLeft) < newLeft)) {
                    my$("imgList").style.marginLeft = parseInt(my$("imgList").style.marginLeft) + speed + "px";//实现动画效果，进行图片偏移
                    setTimeout(go, interval);//10毫秒再次调用go函数
                } else {//speed==0,当前图片切换完毕
                    animated = false;
                    my$("imgList").style.marginLeft = newLeft + "px";//当前的偏移值=新的偏移值
                    if (newLeft > -728) {//从第一张alt=3变成第四张alt=3,只是从视觉上实现了无限轮播
                        my$("imgList").style.marginLeft = -2184 + "px";//2184=728 * 3，三张图片的总宽度
                    }
                    if (newLeft < -2184) {//从第五张alt=1变成第二张alt=1,只是从视觉上实现了无限轮播
                        my$("imgList").style.marginLeft = -728 + "px";
                    }
                }
            }
            go();//调用当前图片切换函数
        }
        //自动播放轮播函数
        function play(){
            timer=setInterval(function(){
                my$("myRight").onclick();
            },2000);//自动播放时间间隔
        }
        //清除定时器，停止自动播放函数
        function stop(){
            clearInterval(timer);
        }
        //点击右键时，图片偏移函数
        my$("myRight").onclick=function(){
            if(index==3){
                index=1;
            }else{
                index+=1;
            }
            showCircle();
            if(!animated){
                animate(-728);//向左偏移
            }
        }
        //点击左键时，图片偏移函数
        my$("myLeft").onclick=function(){
            if(index==1){
                index=3;
            }else{
                index-=1;
            }
            showCircle();
            if(!animated){
                animate(728);//向右偏移
            }
        }
        //点击圆点按钮，图片偏移函数
        for(var i=0;i<myCircle.length;i++){
            myCircle[i].onclick=function(){
                if(this.className=="on"){
                    return;//如果已经选中当前按钮，直接返回
                }
                //要点击的index属性的值 转换为整数
                var myIndex=parseInt(this.getAttribute("index"));
                //判断点击的小圆点在选中圆点的左边还是右边
                var os=-728*(myIndex-index);
                //切换完成后，把点击的index位置变成当前的index位置
                index=myIndex;
                showCircle();
                if(!animated){
                    animate(os);//点击左边小圆点图片向右偏移，点击右边小圆点图片向左偏移
                }
            }
        }
        my$("bookBnr").onmouseover=stop;//鼠标移入停止自动播放
        my$("bookBnr").onmouseout=play;//鼠标移出继续播放
        play();//调用自动播放函数
    }
</script>

实现效果及源代码

参考：https://pan.baidu.com/s/1MdTPaMVdkGPswNokTzYHSw
提取码：ooid