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


    知识点:
    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>

    “`

  • 相关阅读:
    移动端input中的placeholder属性垂直
    js将文字转化为语音并播放
    js生成二维码
    jquery移除事件,绑定事件,触发事件
    js计算本地时间
    正则判断支付金额
    去除input默认带的上下按钮与修改placeholder的默认颜色、背景、placeholder内容的大小
    rem自适应手机端布局
    Python_PyQt5_库
    Python_用PyQt5 建 notepad 界面
  • 原文地址:https://www.cnblogs.com/jiandanshishu/p/12953295.html
Copyright © 2020-2023  润新知