JavaScript练习—图片切换 

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #outer {
            width: 500px;
            margin: 50px auto;
            padding: 10px;
            background-color: greenyellow;
            /* 设置文本居中 */
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            // 点击按钮切换图片，就是要修改img标签道德src属性

            // 获取两个按钮
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");

            // 获取img标签
            var img = document.getElementsByTagName("img")[0];

            // 创建一个数组，用来保存图片的路径
            var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"]

            //创建一个变量，来保存当前正在显示图片的索引
            var index = 0;

            // 获取id为info的p元素
            var info = document.getElementById("info");

            //分别为两个按钮绑定单击响应函数
            prev.onclick = function () {
                // alert("上一张");

                // 切换到上一张，索引自减
                index = (index - 1) % imgArr.length;
                img.src = imgArr[index];
                // 设置提示文字
                info.innerHTML = "一共 " + imgArr.length + " 张图片" + "，当前第 " + (index + 1) + " 张";
            }

            next.onclick = function () {
                // alert("下一张");
                // 要修改一个元素的属性 元素.属性 = 属性值
                // 切换到上一张，索引自增
                index = (index + 1) % imgArr.length;
                img.src = imgArr[index];
                info.innerHTML = "一共 " + imgArr.length + " 张图片" + "，当前第 " + (index + 1) + " 张";
            }
        }
    </script>
</head>

<body>

    <div id="outer">
        <p id="info">一共 5 张图片，当前第 1 张</p>
        <img src="img/1.jpg" />
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>

</html>

 

1.jpg

 

2.jpg

 

3.jpg

 

4.jpg

 

 5.jpg

 自动切换图片

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    </style>

    <script type="text/javascript">
        window.onload = function () {
            var btn01 = document.getElementById("btn01");
            // 使图片可以自动切换

            // 获取img标签
            var img1 = document.getElementById("img1");
            // 创建一个数组来保存图片的路径
            var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
            // 创建一个变量，用来保存当前图片的索引
            var index = 0;
            // 定义一个变量，用来保存定时器的标识
            var timer;
            // 开启一个定时器，来自动切换图片
            btn01.onclick = function () {
                /*
                    目前，我们每点击一次按钮，就会开启一个定时器，
                        点击多次就会开启多个定时器，这就导致图片的切换速度过快，
                        并且我们只能关闭最后一次开启的定时器
                */
                // 在开启定时器之前，需要将上一个定时器关闭
                clearInterval(timer);

                timer = setInterval(function () {
                    // 使索引自增
                    index++;

                    // 判断索引是否超过最大索引
                    // if (index >= imgArr.length) {
                    //     // 则将index设置为0
                    //     index = 0;
                    // }
                    index %= imgArr.length;

                    // 修改img1的src属性
                    img1.src = imgArr[index];
                }, 1000)
            }

            var btn02 = document.getElementById("btn02");
            btn02.onclick = function () {
                // 点击按钮以后，停止图片的自动切换，关闭定时器
                /*
                    clearInterval()可以接收任意参数，
                        如果参数是一个有效的定时器的标识，则停止对应的定时器
                        如果参数不是一个有效的标识，则什么也不做
                */
                clearInterval(timer);
            }
        }
    </script>
</head>

<body>
    <img id="img1" src="img/1.jpg" />
    <br /><br />
    <button id="btn01">开始</button>
    <button id="btn02">停止</button>
</body>

</html>

 轮播图

 

 

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

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

        }

        /* 设置imgList */
        #imgList {
            /* 去除项目符号 */
            list-style: none;
            /* 设置ul的宽度 */
            /* width: 2600px; */
            /* 开启绝对定位 */
            position: absolute;
            /* 
                设置偏移量 
                每向左移动520px，就会显示到下一张图片
            */
            left: 0px;
        }

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

        /* 设置导航按钮 */
        #navDiv {
            /*开启绝对定位*/
            position: absolute;
            /* 设置位置 */
            bottom: 15px;
            /*
                设置left值
                outer宽度 520
                navDiv宽度 25*5 = 125
                    520 - 125 = 395 
                    395/2 = 197.5 
            */
            /* left: 197px; */
        }

        #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
            var imgList = document.getElementById("imgList");
            //获取页面中所有的img标签
            var imgArr = document.getElementsByTagName("img");
            //设置imgList的宽度
            imgList.style.width = 520 * imgArr.length + "px";
            console.log(imgArr.length);
            /*设置导航按钮居中*/
            //获取navDiv
            var navDiv = document.getElementById("navDiv");
            //获取outer
            var outer = document.getElementById("outer");
            //设置navDiv的left值
            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(timer);

                    // 获取点击超链接的索引，并将其设置为index
                    index = this.num;
                    /*
                        切换图片
                            第一张 0
                            第二张 1 -520
                            第三张 2 -1040
                    */
                    // imgList.style.left = -520 * index + "px";
                    setA();

                    // 使用move函数来切换图片
                    move(imgList, "left", -520 * index, 60, function () {
                        //动画执行完毕，开启自动切换
                        autoChange();
                    });
                };
            };

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

            //创建一个方法用来设置选中的a
            function setA() {
                // 判断当前索引是否是最后一张图片
                if (index >= imgArr.length - 1) {
                    //则将index设置为0
                    index = 0;
                    //此时显示的最后一张图片， 而最后一张图片和第一张是一摸一样
                    //通过CSS将最后一张切换成第一张
                    imgList.style.left = 0;

                };


                //遍历所有a，并将它们的背景颜色设置为红色
                for (var i = 0; i < allA.length; i++) {
                    allA[i].style.backgroundColor = "";
                }
                //将选中的a设置为黑色
                allA[index].style.backgroundColor = "black";
            };

            // 定义一个自动切换定时器的标识
            var timer;
            //创建一个函数，用来开启自动切换图片
            function autoChange() {
                //开启一个定时器，用来定时去切换图片
                timer = setInterval(function () {
                    //使索引自增
                    index++;
                    //判断index的值
                    index = index % imgArr.length;

                    //执行动画，切换图片
                    move(imgList, "left", -520 * index, 30, function () {
                        //修改导航按钮
                        setA();
                    });
                }, 3000);
            };


            function move(obj, attr, target, speed, callback) {

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

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

                //判断速度的正负值
                //如果从0向800移动，则speed为正
                //如果从800向0移动，则speed为负
                if (current > target) {
                    //此时速度应为负值
                    speed = -speed;
                }

                // 开启一个定时器，用来执行动画效果
                // 向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
                obj.timer = setInterval(function () {
                    //获取box1的原来的left值
                    var oldValue = parseInt(getStyle(obj, attr));

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

                    // 判断newValue是否大于800
                    // 从800向0移动
                    // 向左移动时，需要判断newValue是否小于target
                    // 向右移动时，需要判断newValue是否大于target
                    if (speed < 0 && newValue < target || speed > 0 && newValue > target) {
                        newValue = target;
                    }

                    // 将新值设置给box1
                    obj.style[attr] = newValue + "px";

                    //当元素移动到800px时，使其停止执行动画
                    //当元素移动到0px时，使其停止执行动画
                    if (newValue === target) {
                        //达到目标，关闭定时器
                        clearInterval(obj.timer);
                        //动画执行完毕，调用回调函数
                        callback && callback();
                    }
                }, 30);
            }

            /*
             定义一个函数，用来获取指定元素的当前的样式
                 参数:
                     obj 要获取样式的元素
                     name 要获取的样式名
             */
            function getStyle(obj, name) {
                if (window.getComputedStyle) {
                    //正常浏览器的方式，具有getComputedStyle( )方法
                    return getComputedStyle(obj, null)[name];
                } else {
                    // IE8的方式，没有getComputedStyle( )方法
                    return obj.currentStyle[name];
                }
            }
        };
    </script>
</head>

<body>
    <!--创建一个外部的div, 来作为大的容器 -->
    <div id="outer">
        <!-- 创建一个ul，用于放置图片 -->
        <ul id="imgList">
            <li><img src="img/1.jpg" /></li>
            <li><img src="img/2.jpg" /></li>
            <li><img src="img/3.jpg" /></li>
            <li><img src="img/4.jpg" /></li>
            <li><img src="img/5.jpg" /></li>
            <li><img src="img/1.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>

 

posted @ 2020-07-29 16:32  我等着你  阅读(206)  评论(0)    收藏  举报