js轮播图

最新推荐文章于 2020-11-18 22:37:03 发布

哆梦没有口袋

最新推荐文章于 2020-11-18 22:37:03 发布

阅读量106

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41795427/article/details/108825276

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

外部js文件tool（控制图片的移动）

function getStyle(obj,name){
    // if(window.getComputedStyle){
    //     return getComputedStyle(obj,null)[name];
    // }else{
    //     return obj.currentStyle[name];
    // }

    return window.getComputedStyle? getComputedStyle(obj,null)[name]:obj.currentStyle[name];
}

// let timer;
function move(obj,attr,target,speed,callback){

    //尝试创建一个可以执行简单动画的函数
    /**
     * 参数：
     *   obj:要执行动画的对象
     *   attr:要执行动画的样式，比如:left top width height
     *   target:要执行动画的目标位置
     *   speed:移动的速度（正数向右移动，负数向左移动）
     *   callback;回调函数，这个函数将在动画执行完毕以后执行
     */

    //关闭上一个定时器
    clearInterval(obj.timer);

    //获取元素目前的位置
    let current = parseInt(getStyle(obj,attr));

    //判断速度的正负值
    //如果从0向800移动，则speed为正
    //如果从800向0移动，则speed为负

    if(current>target){
        speed = -speed;
    }

    //开启一个定时器，用来执行动画效果
    obj.timer= setInterval(function(){
        //获取box1的原来的left值
        let oldValue = parseInt(getStyle(obj,attr));

        //在旧值的基础上增加
        let newValue = oldValue+speed;

        //判断newValue是否大于800
        //从800向0移动
        //向左移动时，需要判断newValue是否小于target
        //向右移动时，需要判断newValue是否大于target

        //判断newValue是否大于800
        if(speed<0 && newValue < target || speed>0 && newValue>target){
            newValue = target;
        }
        //将新值设置给box1
        obj.style[attr] = newValue +"px";

        //当元素移动到800px时，使其停止执行动画
        if(newValue ===  target){
            //达到目标，关闭定时器
            clearInterval(obj.timer);

            //动画执行完毕，调用回调函数
            callback && callback();
        }


    },30)
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/tools.js" type="text/javascript"></script>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        #outer{
            /*设置宽和高*/
            width:432px;
            height:232px;
            /*居中*/
            margin:50px auto;
            /*设置背景颜色*/
            background-color:greenyellow;
            /*设置padding*/
            padding:10px 0;
            /*开启相对定位*/
            position:relative;
            /*
              裁剪溢出内容
            */
            overflow:hidden;
        }
        #imgList{
            list-style:none;
            /*设置Ul的宽度*/
            /*width:2160px;*/
            /*设置偏移量*/
            position:absolute;
            /*
               每向左移动432px就会显示到下一张图片
            */
            left:0px;
        }
        #imgList li{
            /*设置浮动 */
            float:left;
            /*设置边距*/
            margin:0 10px;

        }
        /**设置导航按钮 */
        #navDiv{
            /* 开启绝对定位 */
            position:absolute;
            /*设置位置*/
            bottom:15px;
            /*flex:2;*/
            /*
               设置left值
               outer宽度：432px
               navDiv宽度25*5 = 125
                   432-125= 307
                   307/2 = 153.5
            */
            /*left:153px;*/
            /*left:50%;*/

        }
        #navDiv a{
            /* 设置超链接浮动*/
            float:left;
            width:15px;
            height:15px;
            background-color:red;
            /* 设置左右外边距 */
            margin: 0 5px;
            /* 设置透明 */
            opacity: 0.5;
            /* 兼容IE8 透明*/
           filter:alpha(opacity=50);

        }
        /**设置鼠标移入效果 */
        #navDiv a:hover{
            background-color:black;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            //设置imgList的宽度
            //获取imgList
            let timer;
            let imgList = document.getElementById("imgList");

            //获取页面中所有的img标签
            let imgArr = document.getElementsByTagName("img");

            //设置imgList的宽度
            imgList.style.width= 432*imgArr.length +"px";

            /*设置导航栏按钮居中*/
            //获取navDiv
            let navDiv = document.getElementById("navDiv");
            //获取outer
            let outer = document.getElementById("outer");
            //设置navDiv的Left值
            navDiv.style.left = (outer.offsetWidth-navDiv.offsetWidth)/2+"px";

            //默认显示图片的索引
            let index = 0;
            //获取所有的a
            let allA = document.getElementsByTagName("a");
            //设置默认选中的效果
            allA[index].style.background = "black";

            /*
            * 点击超链接切换到指定图片
            *  点击第一个超链接，显示第一张图片，以此类推
            **/
             //为所有的超链接绑定单击响应函数
            for(let i=0;i<allA.length;i++){
                allA[i].onclick = function(){
                    //关闭自动切换的定时器
                    clearInterval(timer);
                    //获取点击超链接的索引,并将其设置为index
                    index = i;
                    //切换图片
                    /**
                     * 第一张 索引为0,left为0
                     * 第二章 1，-432
                     */
                    // imgList.style.left = -432 *index +"px";
                    //设置选中的a
                    setA();
                    //使用move函数来切换图片
                    move(imgList,"left",-432*index,20,function(){
                        //动画执行完毕，开启自动切换
                        autoChange();
                    })

                };
            }

            //自动切换图片
            autoChange();


            //创建一个方法来设置选中的a
            function setA(){
                //判断当前索引是否是最后一张图片
                if(index >= imgArr.length-1){
                    //将index设置为0
                    index = 0;

                    //此时显示的是最后一张图片，而最后一张图片与第一张图片一模一样
                    //通过CSS将左右一张图片切换成第一张
                    imgList.style.left = 0+"px";
                }

                //遍历所有的a，并将背景颜色设置为红色
                for(let i=0;i<allA.length;i++){
                    allA[i].style.background = "";
                }
                // 将选中的a设置为黑色
                allA[index].style.background = "black";
            };
            //定义一个自动切换的定时器标识

            //创建一个函数，用来开启自动切换图片
            function autoChange(){
                //开启一个定时器，用于定时切换图片
                timer = setInterval(function(){
                    //使索引自增
                    index++;
                    //判断index的值
                    index %= imgArr.length;
                    //执行动画，切换图片
                    move(imgList,"left",-432*index,20,function(){
                        //修改导航
                        setA();
                    })
                },3000)
            }

        }
    </script>
</head>
<body>
<!-- 创建一个外部的div，来作为大的容器 -->
<div id="outer">
    <!-- 创建一个ul，用于放置图片 -->
    <ul id="imgList">
        <li><img src="../images/index/2.jpg"></li>
        <li><img src="../images/index/3.jpg"></li>
        <li><img src="../images/index/4.jpg"></li>
        <li><img src="../images/index/6.jpg"></li>
        <li><img src="../images/index/7.jpg"></li>
        <li><img src="../images/index/2.jpg"></li>
    </ul>
    <!-- 创建导航按钮 -->
    <div id = "navDiv">
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>

    </div>
</div>
</body>
</html>