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


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

    “`

  • 相关阅读:
    [Linux] 设置系统时区
    [Python] 当猎头遇上 Guido van Rossum
    [Ubuntu] LightDM 轻量级桌面显示管理器
    [Java] Apache Ant 构建基础教程
    [Python] pip 简明指南
    .NET Core下的Spring Cloud——前言和概述
    福州首届.NET开源社区技术交流会圆满成功
    【福州活动】| "福州首届.NET开源社区线下技术交流会"(2018.11.10)
    使用CoreRT将.NET Core发布为Native应用程序
    使用.NET Core快速开发一个较正规的命令行应用程序
  • 原文地址:https://www.cnblogs.com/jiandanshishu/p/12953295.html
Copyright © 2020-2023  润新知