zoukankan      html  css  js  c++  java
  • js 图片滑动

    var speed = 5;
    var box = document.getElementById("scrollbox");
    var picBox = document.getElementById("scrollpic");
    var imgWidth = document.getElementById("pic").offsetWidth;
    var direction = 'right';
    slide(speed);
    function slide(speed){
        var timer = setInterval(move,speed);
        box.onmouseover = function(){clearInterval(timer);};
        box.onmouseout = function(){timer = setInterval(move,speed);};
    }
    function changeDirection(){
        if(box.scrollLeft <= 0){
            direction = 'right';
        }
        if(picBox.offsetWidth - box.scrollLeft <= imgWidth){
            direction = 'left';
        }
    }
    function move(){
        changeDirection();
        switch(direction){
            case 'left': 
                    box.scrollLeft--;
                    break;
            case 'right':
                    box.scrollLeft++;
                    break;
            default:console.log('出错了');
        }
    }
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>javascript图片上下无缝滚动</title>
    <link rel="stylesheet" type='text/css' href='1.css'/>
    </head>
    <body>
    <div id="scrollbox">
        <div id="scrollcon">
            <div id="scrollpic">
                <a href="javaScript:void(0)"><img src="images/1.jpg"  id="pic"/></a>
                <a href="javaScript:void(0)"><img src="images/2.jpg" /></a>
                <a href="javaScript:void(0)"><img src="images/3.jpg" /></a>
                <a href="javaScript:void(0)"><img src="images/4.jpg" /></a>
                <a href="javaScript:void(0)"><img src="images/5.jpg" /></a>
            </div> 
        </div>
    </div>
    <script src="1.js" type='text/javascript'></script>
    </body>
    </html>
    *{
        margin:0;
        padding:0;
        border:0;
    }
    #scrollbox{
        background:#FFF;
        width:304px;
        height:304px;
        margin:10px auto;
        overflow: hidden;
    }
    #scrollcon{
        width:2000px;
        height:304px;
    }
    #scrollpic{
        width:1510px;/*每张图片宽度为300,加上每张图片margin-right为2,300*5+2*5=1510*/
        display: inline-block;/*去除浮动*/
        *display: inline;
        *zoom:1;
    }
    #scrollpic a{
        float: left;
        margin-right:2px; 
    }
    #scrollpic img{
        width: 300px;
        height: 300px;
    }

    下载地址:https://files.cnblogs.com/qduanlu/%E5%9B%BE%E7%89%87%E6%BB%91%E5%8A%A8.zip

  • 相关阅读:
    前端教程-3.调试工具(上)
    常用跨域方法实践(二)
    常用跨域方法实践(一)
    移动web问题小结
    Promise实现原理
    H5页面的跨webview预拉取数据尝试
    【译】编写高性能JavaScript
    校招社招必备核心前端面试问题与详细解答
    高性能极致用户体验前端开发实战
    http请求代理proxy-ajax
  • 原文地址:https://www.cnblogs.com/qduanlu/p/2830242.html
Copyright © 2011-2022 走看看