JavaScript各类轮播图（一）

最新推荐文章于 2024-06-17 15:29:34 发布

kuke_kuke

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量1k

点赞数 1

文章标签： javascript 轮播图 web css

本文链接：https://blog.csdn.net/qq_33599109/article/details/77249062

版权

第一种

常规轮播图（如淘宝、京东广告等）

//首先列出body主体部分
<body>
    <div class="box">      //最外面用一个大盒子，用来做整体定位
        <ul class="imgUl">      //ul用来存放图片
            <li><img src="images/11.jpg" alt="" /></li>         //li中也可以放入a标签用来做链接等
            <li><img src="images/22.jpg" alt="" /></li>
            <li><img src="images/33.jpg" alt="" /></li>
            <li><img src="images/44.jpg" alt="" /></li>
            <li><img src="images/55.jpg" alt="" /></li>
            <li><img src="images/66.jpg" alt="" /></li>
        </ul>
        <ul class="list">    //此处为轮播图下方的序列号，可以用ul、ol,也可以用span更为简洁（下个轮播图介绍），因为此处的序列号数量随着图片数量变换而改变，所以此处放在js中创建更为灵活。
            <!-- <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li> -->
        </ul>
        <span class="left"><</span>         //定义两个span来表示向左、向右的切换
        <span class="right">></span>        
    </div>  
</body>

//CSS样式（为了书写简便在本人直接用//来表示注释）

    *{              //清除默认边距
        margin: 0;
        padding: 0;
    }
        .box{          //存放主页的轮播图的盒子，把它放在屏幕中间
            width: 730px;
            height: 450px;
            /*border: 1px solid red;*/
            margin: 20px auto;
            position: relative;
            overflow: hidden;       //超出盒子的部分隐藏
        }
        .box .imgUl{           //设置ul的宽度，用来存放图片，这里要注意当js中图片增加时要灵活的修改宽度
            width: 5140px;
            height: 450px;
            position: absolute;      //切记，只有脱标的盒子才能通过设置style.left使其移动。
            left: 0px;
            top: 0;
        }
        .box .imgUl li{
            list-style: none;
            float: left;          //图片浮动成一排，如果有掉下来的，检查ul宽度
        }
        .box .imgUl li img{        //设置图片大小
            width: 730px;         
            height: 450px;
        }
        .list{             //设置序列号的样式
            width: 180px;
            height: 20px;
            background-color: rgba(255,255,255,0.5);
            position: absolute;
            bottom: 30px;
            left: 50%;
            margin-left: -90px;
            border-radius: 5px;
            padding-left: 10px;
        }
        .list li{
            float: left;
            width: 20px;
            height: 20px;
            list-style: none;
            background-color: #fff;
            line-height: 20px;
            border-radius: 50%;
            margin: 0 4px;
            text-align: center;         //让序列号中的每个数字居中
            cursor: pointer;
        }
        .list li.current{          当序列号触发时的背景颜色
            background-color: red;
        }

        .left, .right{          //设置左右切换按钮样式，也可用背景图片（下个轮播图会介绍）
            width: 30px;
            height: 40px;
            position: absolute;
            top: 50%;
            margin-top: -20px;
            background-color: rgba(0,0,0,0.5);
            color: #f1f1f1;
            font-size: 20px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;                
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }

重点：js部分

    //缓动动画animate(obj,target)的简单封装放在最下边
    window.onload = function(){
        var box = document.getElementsByClassName('box')[0];
        var imgUl = document.getElementsByClassName('imgUl')[0];
        var imgArr = imgUl.getElementsByTagName('img');
        var list = document.getElementsByClassName('list')[0];       
        var liArr = list.getElementsByTagName('li');    //序列号，也可以通过下面创建的li直接使用
        var left =  document.getElementsByClassName('left')[0]
        var right =  document.getElementsByClassName('right')[0]
        var imgWidth = imgArr[0].offsetWidth;   //获取一张图片的宽度，不用box.offsetWidth,防止box设置padding时带来的不便。

        //当我们的图片轮播的最后一张时，这时要跳转到第一张，而且要有缓动的效果，所以此时我们的想法是，在最后一张图片的最后添加一张和第一张图片一样的图片，当缓动完这张图片的时候，直接跳到第一张。
        //克隆第一张图片放在最后
        var lastImg = imgUl.children[0].cloneNode(true);
        imgUl.appendChild(lastImg);

        //添加序列号，此时序列号的数量要比图片小1
        for(var i=0;i<imgArr.length-1;i++){
            var li = document.createElement('li');
            list.appendChild(li);     //添加到list中
            li.innerText = i+1;     //序列号中的数字要比其索引多1
            liArr[0].className = "current";     //默认页面刷新是第一个序列号有背景颜色    
        }
        for(var i=0;i<liArr.length;i++){
            liArr[i].index = i;
            liArr[i].onclick = function(){     //当序列号被点击时
                //排他思想，去掉其他小圆点背景
                for(var j=0;j<liArr.length;j++){
                    liArr[j].className = "";
                }
                this.className = "current";     //设置被点击的图片有背景颜色
                //鼠标放到小方块上的时候,索引值和key和square同步，定义两个索引值，目的是让序列号和图片相对应。
                key = square = this.index;
                animate(imgUl,-this.index*imgWidth);    //点击了序列号，图片运动到索引对应的图片
            }
        }

        //两个索引值，一个记录图片和左右小方块，一个记录序列号，初始值为0。
        var key = 0;
        var square = 0;
        function autoPlay(){       //自动播放函数
            key++;        //图片自动播放时对应的索引+1
            if(key>liArr.length){
                //图片滑到最后一张，跳到第一张，即缓动完添加的图片瞬间跳到第一张
                imgUl.style.left = 0;
                key = 1;      //key值本为0，但做自动播放所以加1,这样使ul开始左移
            }
            animate(imgUl,-key*imgWidth);   //移动key个imgWidth
            //通过square的自增来模拟序列号的索引，然后更换背景
            square++;          
            if(square>liArr.length-1){ 
                //索引等于最后一个的时候立刻变为0，因为图片运动到添加的那个图片时，对应的序列号为1，所以当square的值等于图片总数量时立刻变为0。
                square = 0;
            }
            for(var i = 0;i <liArr.length; i++){       
                liArr[i].className = "";
            }
            liArr[square].className = "current";          //同样的排他思想使序列号的背景改变
        }

        //添加定时器，使之开始自动轮播，可设置间隔时间
        var timer = setInterval(autoPlay,3000);

        box.onmouseover = function(){     //鼠标放到盒子上，停止轮播
            clearInterval(timer);
        }
        box.onmouseout = function(){     //鼠标离开盒子时，重新开启轮播
            timer = setInterval(autoPlay,3000);
        }

        left.onclick = function(){    //点击左侧小方块时
            key--;           //key--
            if(key<0){       //当key的值小于第一张图片的索引时，图片立刻换为添加的图片。
                imgUl.style.left = -imgWidth*(liArr.length)+"px";
                key = liArr.length-1;
            }
            animate(imgUl,-key*730);    //运动到key对应的值
            square--;     //使序列号一致
            if(square<0){      //序列号索引小于第一张图片索引时，立刻跳到最后一个序列号
                square = liArr.length-1;
            }
            for(var i=0;i<liArr.length;i++){    //排他思想
                liArr[i].className = "";
            }
            liArr[square].className = "current";
        }
        right.onclick = function(){     //点击向右小方块时，做一次自动轮播
            autoPlay();
        }

        //封装的缓动函数
        function animate(obj,target){
            clearInterval(obj.timer);
            var speed;     //定义步长
            obj.timer = setInterval(function(){
                speed = (target - obj.offsetLeft)/10;   //使步长不一样
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);     //以便在无限接近的时候可以到一格一格的到达目标值
                obj.style.left = obj.offsetLeft + speed + "px";
                if(Math.abs(target - obj.offsetLeft)<Math.abs(speed)){    
                    obj.style.left = target + "px";      //当目标值与实物值之差小于步长时，直接过渡到目标值并清除定时器。
                    clearInterval(obj.timer);
                }   
            },25);
        }
    }