js-轮播图

最新推荐文章于 2022-04-02 22:20:42 发布

albb58

最新推荐文章于 2022-04-02 22:20:42 发布

阅读量227

点赞数

文章标签： js轮播图

本文链接：https://blog.csdn.net/albb58/article/details/82153213

版权

轮播图
需求：
1、能自动在几张图片之间来回切换
2、在图片切换的同时，下方的与之相对应图片按钮也会随之显示不同样式
3、第一张与最后一张可以连接循环播放
4、点击前进或后退按钮，图片也会随之前进后退
下面是源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
        <title>轮播图 </title> 

    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box {
            position: relative;
            margin: auto;
            width: 810px;
            height: 324px;
            overflow: hidden;
        }
        .img {
            list-style: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 4050px;
            overflow: hidden;
        }
        img {
            width: 810px;
            height: 324px;
        }
        .img li {
            float: left;

        }
        .nav {
            list-style: none;
            position: absolute;
            right : 50px;
            bottom: 25px;
        }
        .nav li {
            float: left;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: rgba(0,0,0,0.5);
            margin-right: 15px;
            cursor: pointer;
        }
        .nav .active {
            background-color: #fff;
        }
        #leftBtn {
            background: url(btn.gif);
            width: 60px;
            height: 60px;
            position: absolute;
            top: 120px;
            left: 20px;
            cursor: pointer;
        }
        #rightBtn {
            background: url(btn.gif) 0 -60px;
            width: 60px;
            height: 60px;
            position: absolute;
            top: 120px;
            right: 20px;
            cursor: pointer;
        }
    </style>
    <script src="../../common.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        onload = function(){
            var oul = document.getElementById("box").children[0];
            var nav = document.getElementsByClassName("nav")[0].children;
            var leftBtn = document.getElementById("leftBtn");
            var rightBtn = document.getElementById("rightBtn");

            //定义index为第几张图片
            var index = 0;
            //运动函数,方便多出功能的实现,从定时器里提出
            function _move(){
                // ++index >3 ? index = 0 : "";
                //自增
                ++index;
                //建立for循环清除当前图片对应的按钮以外的按钮样式
                for(var i=0; i<nav.length; i++) {
                    nav[i].className = "";
                }
                //赋予当前图片对应的按钮不同的样式
                nav[index==4? 0 : index].className = "active";

                //图片的运动缓冲
                animate(oul,{left : -810 *index},function(){//回调函数
                    //判断当图片播放到最后一张时,迅速跳到第一张图片,形成无缝播放
                    if(index >= 4){
                        //index归0
                        index = 0;
                        //left归0
                        oul.style.left = 0;
                    }
                })
            }
            //建立定时器,实现轮播
            var timer = setInterval(_move,3000);
            //鼠标划入时,停止定时器,停止轮播
            box.onmouseenter = function(){
                clearInterval(timer);
            }
            //鼠标划出时,再次开启定时器,实现轮播
            box.onmouseleave = function(){
                timer = setInterval(_move,3000);
            }
            //建立for循环,实现按钮点击
            for(var i=0; i<nav.length; i++){
                //另类的伪数组下标
                nav[i].num = i;
                //点击事件,鼠标点击按钮时,显示按钮所对应的图片
                nav[i].onclick = function(){
                    index = this.num-1;
                    //调用函数
                    _move();
                }
            }
            //点击,向左滑动图片
            leftBtn.onclick = function(){
                index -=2;
                //当index为-2时,转为2,也就是第一张图片与第4张图片链接
                index == -2 ? index =2 : "";
                _move();
            }
            //点击,向右滑动图片
            rightBtn.onclick = function(){
                _move();
            }
        }
    </script>
    <body>
        <div id="box">
            <ul class="img">
                <li><img src="001.jpg" ></li>
                <li><img src="002.jpg" ></li>
                <li><img src="003.jpg" ></li>
                <li><img src="004.jpg" ></li>
                <li><img src="001.jpg" ></li>
            </ul>
            <ul class="nav">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div id="leftBtn"></div>
            <div id="rightBtn"></div>
        </div>
    </body>
</html>

源码中引入的封装函数

//元素的运动缓冲
//animate( obj, {left: 300, width: 400})
function animate(ele /*元素*/ , option /*元素属性，是一个对象，对象的值为百分制*/ , callback) {
    if (ele.isMoving) return;

    ele.isMoving = true;
    //遍历对象
    for (var i in option) {
        //自调用函数
        (function (prop) {
            //设定终点距离
            var end = option[prop];
            //设定时器,ele[prop+"-timer"]:元素中的遍历出的每一个属性
            ele[prop + "-timer"] = setInterval(function () {
                //判断是不是opacity透明度属性
                if (prop == "opacity") {
                    //定义变量并赋值当前元素的透明度数值并转为百分制
                    var currentValue = getStyle(ele)[prop] * 100;
                    //定义变量,算出速度,用终点数值减去当前已进行的数值在除以8,得到每次前进的数值
                    var speed = (end - currentValue) / 8;
                    //判断speed变量是否大于0
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    //将逐渐进行的数值,依次转为浮点数,在添加到元素中
                    //                  ele.style[prop] = (currentValue + speed) / 100;
                    //                  //判断该当该元素值已经超过或者等于设定的终点数值时,结束定时器
                    //                  //一般来说,由于前面已经向上或向下取整了,所以一般不会出现超过终点值的情况
                    //                  if ("opacity" >= end) {
                    //                      clearInterval(ele[opacity + "-timer"]);
                    //                  }
                    ele.style.opacity = (currentValue + speed) / 100;
                    ele.style.filter = "alpha(opacity=" + (currentValue + speed) + ")"
                    if (ele.style.opacity == end / 100) {
                        clearInterval(ele["opacity-timer"]);
                        if (isAllover()) {
                            callback ? callback() : "";
                        }
                    }

                } else {
                    //定义变量并赋值当前元素的值并取整
                    var currentValue = parseInt(getStyle(ele)[prop]);
                    //定义变量,算出速度,用终点距离减去当前已进行的鞠丽丽在除以8,得到每次前进的距离
                    var speed = (end - currentValue) / 8;
                    //判断speed变量是否大于0
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    //将每次前进的距离依次添加到元素中
                    ele.style[prop] = currentValue + speed + "px";
                    //                  //判断该当该元素值已经超过或者等于设定的终点数值时,结束定时器
                    //                  //一般来说,由于前面已经向上或向下取整了,所以一般不会出现超过终点值的情况
                    //                  if (parseInt(getStyle(ele)[prop]) >= end) {
                    //                      clearInterval(ele[prop + "-timer"]);
                    //                  }
                }
                if (parseInt(getStyle(ele)[prop]) == end) {
                    clearInterval(ele[prop + "-timer"]);
                    if (isAllover()) {
                        callback ? callback() : "";
                    }
                }
            }, 30)
        })(i);
    }

    function isAllover() {
        var flag = true;
        for (var attr in option) {
            var end = option[attr];
            var curtVal = parseInt(getStyle(ele)[attr]);
            if (attr == "opacity") {
                curtVal = getStyle(ele)[attr] * 100;
            }
            if (curtVal != end) {
                flag = false;
                return flag;
            }
        }
        ele.isMoving = false;
        return flag;
    }
}

//获取非行内样式
function getStyle(ele) {
    if (ele.currentStyle) {
        return ele.currentStyle; //IE
    } else {
        return getComputedStyle(ele); //非IE
    }
}