JS练习——轮播图

最新推荐文章于 2024-04-12 07:49:03 发布

Sun白

最新推荐文章于 2024-04-12 07:49:03 发布

阅读量245

点赞数

分类专栏：前端文章标签：算法编程语言 java

本文链接：https://blog.csdn.net/weixin_41929941/article/details/123334836

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

js/tools.js

/**
 * 定义一个浏览器，用来获取指定元素的当前样式
 * 参数：
 *      element 要获取样式的元素
 *      name 要获取的样式名
 */
function getStyle(element, name){
    if(window.getComputedStyle){
        //普通浏览器的方式
        return getComputedStyle(element,null)[name];
    }else {
        //IE8浏览器的方式
        return element.currentStyle[name];
    }
}

/**
 * 使标签移动的方法
 * @param obj 移动的标签
 * @param attr 修改的属性
 * @param target 移动的终点
 * @param speed 移动的速度
 * @param callback 结束使回调的函数
 */
function move(obj,attr,target,speed,callback){
    clearInterval(obj.timer);
    var start = parseInt(getStyle(obj,attr));
    if(start > target){
        speed = -speed;
    }

    obj.timer = setInterval(function (){
        var current = parseInt(getStyle(obj,attr));
        var end = current + speed;
        if((speed>0 && end>target) || (speed<0 && end<target)){
            end = target;
        }
        obj.style[attr] = end + "px";
        if(end ===  target){
            clearInterval(obj.timer);
            callback && callback();
        }
    },30);
}

轮播图HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        /**
         * 设置outer的样式
         */
        #outer{
            /*设置宽和高*/
            width: 320px;
            height: 150px;
            /*居中*/
            margin: 50px auto;
            /*设置背景颜色*/
            background-color: yellowgreen;
            /*设置padding*/
            padding: 10px 0;
            /*开启相对定位*/
            position: relative;
            /*裁剪溢出的你内容*/
            overflow: hidden;
        }

        /*设置imgList*/
        #imgList{
            /*去重项目符号*/
            list-style: none;
            /*设置ul的宽度*/
            /*width: 1920px;*/
            /*开启绝对定位*/
            position: absolute;
            /*设置偏移量*/
            left: 0;
        }

        /*设置图片中的li*/
        #imgList li{
            /*设置浮动*/
            float: left;
            /*设置左右外边距*/
            margin: 0 10px;
        }

        /*设置导航按钮*/
        #navDiv{
            /*开启绝对定位*/
            position: absolute;
            /*设置位置*/
            bottom: 18px;
            /*设置left的值
             *outer宽度320
             *navDiv宽度108
            */
            /*left: 106px;*/
        }

        #navDiv a{
            /*直接超链接浮动*/
            float: left;
            /*设置宽高*/
            width: 15px;
            height: 15px;
            /*设置背景颜色*/
            background-color: red;
            /*设置左右外边距*/
            margin: 0 3px;
            /*设置透明度*/
            opacity: 0.6;
            /*兼容IE8透明*/
            filter: alpha(opacity=60);
        }

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

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

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

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

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

            /**
             * 点击超链接切换到指定的图片
             *  点击第一个超链接，显示第一个图片
             *  点击第二个超链接，显示第二个图片
             *  ..
             */
            for (var i = 0; i < allA.length; i++) {

                //为每个超链接都添加num属性
                allA[i].num = i;

                //为超链接绑定
                allA[i].onclick = function (){

                    //关闭自动切换计时器
                    clearInterval(auto);

                    //获取点击超链接的索引
                    index = this.num;

                    //切换图片
                    // imgList.style.left = "-" + (index * 320) + "px";
                    move(imgList,"left",-320*index,20,function (){
                        auto = setInterval(autoChange,2000);
                    });

                    //修改导航栏颜色
                    setA();
                }
            }

            //创建一个方法用来设置选择的a
            function setA(){
                for (var i = 0; i <allA.length ; i++) {
                    allA[i].style.backgroundColor = "";
                }
                allA[index].style.backgroundColor = "black";
            }

            /**
             * 自动切换图片
             *
             */

            auto = setInterval(autoChange,2000);

            function autoChange(){
                index = (index + 1) % imgArr.length;
                move(imgList,"left",-320*index,20,function (){
                    if(index === imgArr.length-1){
                        index = 0;
                        imgList.style.left = "0px";
                    }
                    setA();
                });
            }
        };
    </script>
</head>
<body>
    <!-- 创建一个外部的DIV，来作为大的容器 -->
    <div id="outer">
        <!-- 创建一个u1，用于放置图片 -->
        <ul id="imgList">
            <li><img src="img/1.jpeg" width="300" height="150"/></li>
            <li><img src="img/2.jpeg" width="300" height="150"/></li>
            <li><img src="img/3.jpeg" width="300" height="150"/></li>
            <li><img src="img/4.jpeg" width="300" height="150"/></li>
            <li><img src="img/5.jpeg" width="300" height="150"/></li>
            <li><img src="img/6.jpeg" width="300" height="150"/></li>
            <li><img src="img/1.jpeg" width="300" height="150"/></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>
            <a href="javascript:;"></a>
        </div>
    </div>
</body>
</html>

Sun白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS练习——轮播图

js/tools.js/** * 定义一个浏览器，用来获取指定元素的当前样式 * 参数： * element 要获取样式的元素 * name 要获取的样式名 */function getStyle(element, name){ if(window.getComputedStyle){ //普通浏览器的方式 return getComputedStyle(element,null)[name]; }else {
复制链接

扫一扫