zoukankan      html  css  js  c++  java
  • yj轮播图2

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            ul{list-style:none;}
            *{margin:0;padding:0;}
            #box{1750px;height:940px;margin: 0 auto;overflow:hidden;position:relative;border: 2px #000 solid;}
            #ul{height:940px; 8750px;position:absolute;left:-1750px;}
            #ul li{1750px;height:940px;float:left;}
            span{25px;height:25px;background:#000;}
            span a{text-decoration:none;font-size:20px;color:#fff;line-height:25px;}
            .none{margin-left:5px;}
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="box">
                <ul id="ul">
                    <li>
                        <img src="banner3.jpg">
                    </li>
                    <li>
                        <img src="banner1.jpg">
                    </li>
                    <li>
                        <img src="banner2.jpg">
                    </li>
                    <li>
                        <img src="banner3.jpg">
                    </li>
                    <li>
                        <img src="banner1.jpg">
                    </li>
                </ul>
            </div>
    
            <span id="span_1"><a href="#"> < </a></span>
            <span id="span_2"><a href="#" class="none"> > </a></span>    
        </div>
            <script type="text/javascript">
    
            var ul = document.getElementById("ul");
            var lis = ul.getElementsByTagName("li");
            var span_1 = document.getElementById("span_1");
            var span_2 = document.getElementById("span_2");
            index = 1;
            var lislen = lis.length;
            var nim = lis[0].offsetLeft * lislen + "px";
            var toggle = true;
            var speed = -50; 
            var newleft = ul.offsetLeft;
            span_1.onclick = function(){
                if(toggle){
                    toggle = false;
                    index++;        
                    var timer = setInterval(function(){
                            newleft = newleft + speed;
                            
                                //console.log(newleft);
                            if (newleft <= -1750*index){
    
                                    newleft = -1750*index;                            
                                    toggle =true;
                                clearInterval(timer);
                            }
    
                            ul.style.left = newleft + "px";
    
                            if(index==4 && newleft == -1750*index){
                                index = 1;
                                ul.style.left = -1750 + "px";
                                newleft = -1750;
                            }
                            
                        },1000/60)
                }
                
                        
            };
    
            span_2.onclick = function(){
                index--;
                ul.style.left = -1750*index+"px";
                
                if(index<=0){
                    index=3;
                }
            };
    
            /*span_1.onclick = function(){
                index++;
                ul.style.left = -1750*index+"px";
                
                if(index>=4){
                    index=1;
                }
            }*/
    
            </script>
    </body>
    </html>
  • 相关阅读:
    Roce ofed 环境搭建与测试
    Ubuntu 1804 搭建NFS服务器
    Redhat 8.0.0 安装与网络配置
    Centos 8.1 安装与网络配置
    SUSE 15.1 系统安装
    VSpare ESXi 7.0 基本使用(模板、iso、SRIOV)
    VSpare ESXi 7.0 服务器安装
    open SUSE leap 15.1 安装图解
    KVM虚拟机网卡连接网桥
    GitHub Action一键部署配置,值得拥有
  • 原文地址:https://www.cnblogs.com/dexin/p/6374278.html
Copyright © 2011-2022 走看看