• js实现图片轮播


    html:

    
    

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href='style.css' rel='stylesheet' type='text/css'>
    <script src='demo.js' type='text/javascript'></script>
    <title>轮播图</title>
    </head>
    <body>
    <div id='container'>
    <div id='list' style='left:-120px'>
    <img src='images/4.jpg'>
    <img src='images/1.jpg'>
    <img src='images/2.jpg'>
    <img src='images/3.jpg'>
    <img src='images/4.jpg'>
    <img src='images/1.jpg'>
    </div>
    <div id='buttons'>
    <span index='0' class='on'></span>
    <span index='1'></span>
    <span index='2'></span>
    <span index='3'></span>
    </div>
    <div id='next' class='arrow'>&gt</div>
    <div id='prev' class='arrow'>&lt</div>
    </div>

    
    

    </body>
    </html>

     
    *{
        margin:0;
        padding:0;
    }
    #buttons{
        position: absolute;
        left: 40PX;
        bottom: 5PX;
        background: #000;
        opacity: 0.5;
        border-radius: 3PX;
         40PX;
    }    
    
    #buttons span{
        margin-right: 2PX;
        cursor: pointer;
           6px;
           height:6px;
           border-radius: 50%;
           float:left;
           border:1px solid #FFF;
    
    }
    
    
    .arrow{
        cursor: pointer;
        background: #000;
        12px;
        height: 15px;
        opacity: 0.5;
        font-weight: bold;
        color:#fff;
        line-height: 15px;
        text-align: center;
        position: absolute;
        top:50px;
    
    }
    
    .arrow:hover{
        opacity: 0.7
    }
    
    
    
    #next{
        right:0px;
    }
    #prev{
        left:0px;
    }
    
    
    
    
    #container{
        position: relative;
        margin:150px auto;
        border: 1px solid black;
        121px;
        height:121px;
        overflow: hidden;
    }
    
    
    #list{
        position: absolute;
        height:120px;
        720px;
        background: red;
    }
    #list img{
        float:left;
    }
    
    .on{
        background: green;
    }
    
    p{
        color:green;
    }
    View Code

    js:

    window.onload=function(){
        var container=document.getElementById('container')
        var list=document.getElementById('list');
        var buttons=document.getElementById('buttons').getElementsByTagName('span');
        var next=document.getElementById('next');
        var prev=document.getElementById('prev');
        var index=0;
        var flag=false;      //设置一个布尔值,控制当画面正在动画时,不可被操作。控制是否在动画状态
        var timer;
    
        function move(longer){
            flag=true;         //开始动画
            //list.style.left  只能取到内嵌css的样式值
            var newleft=parseInt(list.style.left)+longer  //数值型,后面可做比较
           
    
           //在规定时间完成动作的函数
            var time=300;  //完成动作所需总时间
            var interval=10 //执行每个分解动作的时间间隔
            var speed=longer/(time/interval)   //距离/次数=每次移动的距离
    
            function go(){
                if(speed<0 && parseInt(list.style.left)>newleft || speed>0 && parseInt(list.style.left)<newleft){  //向右移动|向左移动并且没有移动至目标值时
                    list.style.left=parseInt(list.style.left)+speed+'px';
                    setTimeout(go,interval)        //递归
                }else{
                    flag=false;  // 动画结束
                    list.style.left=newleft+'px'
                    if(newleft<-480){
                        list.style.left=-120+'px'
                    }
                    if(newleft>-120){
                        list.style.left=-480+'px'
                    }
                }
            }
            go();         //调用go()函数,不然不会被执行
        }
    
    
        next.onclick=function(){
                if(index==3){                //判断语句使用双等号
                    index=0
                }else{
                    index+=1               
                }            
                showButton()
                if(flag==false){
                    move(-120);
                }        
                
                
        }
    
        for(var i=0;i<buttons.length;i++){
            buttons[i].onclick=function(){
                if(this.className=="on"){
                    return             //如果点击的是已经点过的图片,则跳出函数,不执行
                }
                var myindex=parseInt(this.getAttribute('index'));        //取自定义属性
                var longer=-120*(myindex-index);                    //myindex是目标的index.所有myindex-index=偏移图片量
                move(longer);
                index=myindex;          
                showButton();
            }
        }
    
        prev.onclick=function(){
            if(index==0){
                index=3
            }else{
                index-=1
            }            
            showButton()
            if(flag==false){
                move(120)
            }                
                
        }
    
        function showButton(){
             for(var i=0; i<buttons.length;i++){
                 if(buttons[i].className=='on'){
                     buttons[i].className=""
                 }                                     //遍历所有buttons,去掉样式”on“        
             }
            buttons[index].className='on'
         }
       
        
        function play(){
             timer=setInterval(function(){
               next.onclick()
             },3000)
         }
            
        function stop(){
             clearInterval(timer)
         }
    
         container.onmouseover=function(){
             stop();
         }
       
        container.onmouseout=play            //函数也可以这样调用
       
         play();           //初始状态时,执行play()
    }
    View Code
  • 相关阅读:
    进入到已有的docker容器中
    Ubuntu 18.04下指定Sublime Text 3 默认python编译版本
    设计模式之单例模式(c++版)
    clang10在ubuntu18.04下编译ZeroTier,故障解决
    搜狗输入法安装实践
    ubuntu 安装 dingtalk,飞书,google,zoom,时钟等
    js为某个元素添加某个类,并为其他兄弟元素删除此类
    jquery 中attr和css的区别
    unlimited tablespace 权限是否对所有表空间拥有权限测试
    Oracle DG 日常管理操作
  • 原文地址:https://www.cnblogs.com/yzg1/p/4455934.html
Copyright © 2020-2023  润新知