machinecat520
/
zj-Exercise


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

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

        /*设置imgList*/
        #imgList{
            /*去除项目符号*/
            list-style: none;
            /*设置ul的宽度（宽度不能写死），所以改到script标签中去设置*/
            /* width: 3100px; */
            /*开启绝对定位*/
            position: absolute;
            /*设置偏移量*/
            /*
            每向左移动615px，就会显示到下一张图片
            */
            left: -0px;
        }

        /* 设置图片中的li(由纵向显示调整为横向显示) */
        #imgList li{
            /*设置浮动*/
            float: left;
            /* 设置左右外边距 */
            margin: 0 10px;
        }

        /*设置导航按钮*/
        #navDiv{
            /*开启绝对定位*/
            position: absolute;
            /*设置位置*/
            bottom: 10px;
            /*设置left值
                outer宽度615
                navDiv宽度25*5=125
                    615-125=490
                    490/2=245
            */
            /* left: 245px; */
        }

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

        /*设置鼠标移入的效果*/
        #navDiv a:hover{
            background-color: black;
        }

    </style>
    <!-- 引入tools工具 -->
    <script src="js/tools.js"></script>
    <script>

        window.onload = function(){
            //设置imgList的宽度
            //获取imgList
            var imgList = document.getElementById('imgList');
            //获取页面中所有的img标签
            var imgArr = document.getElementsByTagName('img');
            //设置imgList的宽度
            imgList.style.width = 615*imgArr.length + 'px';

            /*设置导航按钮居中*/
            //获取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);

                    // alert('hello');
                    // alert(this);
                    // alert(this.num);
                    //获取点击超链接的索引，并将其设置为index
                    index = this.num;
                    //切换图片
                    /**
                     * 第一张   索引：0     left：0px
                     * 第二张   索引：1     left：-615px
                     * 第三张   索引：2     left：-1230px      
                    */
                    // imgList.style.left = -615*index+'px';
                    //设置选中的a
                    setA();

                    //使用
                    move(imgList,'left',-615*index,30,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 %= imgArr.length
                    //执行动画，切换图片
                    move(imgList,'left',-615*index,20,function(){
                        //修改导航按钮
                        setA();

                    });
                },3000);
            };


        };

    </script>
</head>
<body>
    <!-- 创建一个外部的div，来作为大的容器 -->
    <div id="outer">
        <!-- 创建一个ul，用于放置图片 -->
        <ul id="imgList">
            <li><img src="img/gl.jpeg"/></li>
            <li><img src="img/mn.jpeg"/></li>
            <li><img src="img/wo.jpeg"/></li>
            <li><img src="img/ym.jpeg"/></li>
            <li><img src="img/zly.jpeg"/></li>
            <li><img src="img/gl.jpeg"/></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>