大图滚动--这是精髓实例

来源：互联网发布：mac文件存放在哪里编辑：程序博客网时间：2024/05/01 21:07
知识点:
1、index属性
2、className的用法
3、for循环的多次应用
<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>大图滚动</title>    <style type="text/css">    #wrap {        position: relative;        width:510px;        margin:0 auto;        height: 286px;        overflow: hidden;    }    #wrap:hover .left-arrow,#wrap:hover .right-arrow{        /*display: block;*/        opacity: 1;    }    #inner {        position: relative;        left:0;        top:0;        width: 9999px;    }    #inner a{        float: left;        width:510px;        height: 286px;        -webkit-user-select:none;    }    .paganation {        position: absolute;        bottom:10px;        left:0;        width:100%;        text-align: center;        -webkit-user-select:none;    }    .paganation span {        display: inline-block;        width:30px;        height: 30px;        text-align: center;        line-height: 30px;        border-radius: 50%;        background-color: #fff;        cursor: pointer;    }    .paganation span.active {        background-color: red;        color:#fff;    }    a {        text-decoration: none;    }    .left-arrow {        /*display: none;*/        opacity: 0;        transition:all 1s;        position: absolute;        font-family: "宋体";        left:0;        top:0;        width:40px;        height: 100%;        color:#fff;        text-align: center;        font-size: 40px;        line-height: 286px;        background-color: rgba(0,0,0,.5);        -webkit-user-select:none;    }    .right-arrow {        /*display: none;*/        opacity: 0;        transition:all 1s;        position: absolute;        font-family: "宋体";        right:0;        top:0;        width:40px;        height: 100%;        color:#fff;        text-align: center;        font-size: 40px;        line-height: 286px;        background-color: rgba(0,0,0,.5);        -webkit-user-select:none;    }    </style></head><body>    <div id="wrap">        <div id="inner">            <a href="###"><img src="img/1.jpg" alt=""></a>            <a href="###"><img src="img/2.jpg" alt=""></a>            <a href="###"><img src="img/3.jpg" alt=""></a>            <a href="###"><img src="img/4.jpg" alt=""></a>            <a href="###"><img src="img/5.jpg" alt=""></a>            <a href="###"><img src="img/6.jpg" alt=""></a>            <a href="###"><img src="img/7.jpg" alt=""></a>            <a href="###"><img src="img/8.jpg" alt=""></a>        </div>        <div class="paganation" id="paganation">            <span class ="active">1</span>            <span>2</span>            <span>3</span>            <span>4</span>            <span>5</span>            <span>6</span>            <span>7</span>            <span>8</span>        </div>        <a class="left-arrow" href="javascript:void(0);">&lt;</a>        <a class="right-arrow" href="javascript:void(0);">&gt;</a>    </div>    <script type="text/javascript" src="jquery.min.js"></script>    <script type="text/javascript">           //1、自动平移           var wrap = document.getElementById("wrap");           var inner = document.getElementById("inner");           var spanList = document.querySelectorAll("span");           var imgList = document.getElementsByTagName("img");           var perWidth = 510;//每章图片的宽度。这里注意不要加"px"否则会与后面造成重复。           var index = 0;                      var timer = setInterval(function(){                var t = 0;                var maxT = 30;                index++;                 if (index >= 8) {                    index = 0;                }                //求出在一个周期类inner的left变化量。当index再次为0时，下一周期inner的left变化量为7章图片的长度总和。                var begin = inner.offsetLeft;                var end = -perWidth*index;                var change = end - begin;                var timer1 = setInterval(function() {                 t++;                inner.style.left = change/maxT*t + begin + "px";                 if (t >= maxT) {                  clearInterval(timer1);//结束平移，在wrap窗口悬停。                };               },17);                //spanList.removeAttribute("class","active");                //spanList1.removeAttribute("class","active");               for (var i = 0; i < spanList.length; i++) {                spanList[i].className = "";                 }                spanList[index].setAttribute("class","active");                //spanList[index].previousSibling.removeAttribute("class","active");            },2000);            //点击按钮            //没有点击按钮，for循环完成后，j只有一个值即8            for (var j = 0; j < spanList.length; j++) {                spanList[j].index = j;//将j值保存到spanList[j]的属性index上。                spanList[j].onclick = function() {//给每一个按钮绑定一个click点击事件。                    //clearInterval(timer)                    inner.style.left = -perWidth*this.index + "px";//this.index可以获取当前按钮的index属性。                    for (var k = 0; k < spanList.length; k++) {                        spanList[k].className= "";                    }                    spanList[this.index].className = "active";                    index = this.index;                }            };    </script>   </body></html>
“`
0 0