• jQuery多张图无缝滚动实例代码


    <!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" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>多张图无缝滚动</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
    $(function(){
        //如果要使一个元素运动起来,一般情况下这个元素需要具有position属性值可以是absolute/relative
        var oul = $('.wrap ul');
        //获取字符然后相加就是新的oul
        var oulhtml = oul.html();
        oul.html(oulhtml+oulhtml);
        var speed = 2;
        var timeId = null;
        var ali = $('.wrap ul li');
        var aliWidth = ali.eq(0).width();
        var aliSize = ali.size();
        var ulWidth = aliWidth*aliSize;
        oul.width(ulWidth);
        function slider(){
            if(speed<0){
                //无缝向左滚动
                if(oul.css('left')==-ulWidth/2+'px'){
                    oul.css('left',0);
                }else{
                    oul.css('left','+=-2px');
                }
            }else{
                //无缝向右滚动
                if(oul.css('left')=='0px'){
                    oul.css('left',-ulWidth/2+'px')
                }else{
                    oul.css('left','+='+speed+'px');
                }
            }    
        };
        //setInterval函数的作用是每隔一段时间执行该函数里的代码
        timeId = setInterval(slider,30);
        $('.wrap').mouseover(function() {
            //clearInterval函数的作用是用来清除定时器
            clearInterval(timeId);
        }).mouseout(function(){
            timeId = setInterval(slider,30);
        });
        $('.goLeft').click(function() {
            speed = -2;
        });
        $('.goRight').click(function() {
            speed = 2;
        });
    });
    </script>
    <style>
    *{padding: 0;margin: 0}
    li{list-style: none;}
    body{margin: 50px;}
    .wrap{border: 3px solid #f00; width: 800px;height: 200px; margin: 0 auto;position: relative; overflow: hidden;}
    .wrap ul{overflow: hidden; _height:1px;width: 1600px;position: absolute;left: 0;top:0;}
    .wrap ul li{float: left;}
    </style>
    </head>
    <body>
        <a href="javascript:;" class="goLeft">向左走</a>
        <a href="javascript:;" class="goRight">向右走</a>
    <div class="wrap">
        <ul>
            <li><img src="1.jpg" alt="" /></li>
            <li><img src="2.jpg" alt="" /></li>
            <li><img src="3.jpg" alt="" /></li>
            <li><img src="4.jpg" alt="" /></li>
            <li><img src="5.jpg" alt="" /></li>
        </ul>
    </div>
    </body>
    </html>
  • 相关阅读:
    一文读懂数字人民币的发行原因与特性
    人工智能时代来临,我们终将何去何从?
    SQL在物联网时代还值得使用吗?
    比你更懂你的物联网时代,电商会不会出现新的模式
    什么样的才叫物联网?物联网发展趋势会比互联网更好吗?
    如何使用人工智能创建蛋白质形状的语言
    为什么智能优势是未来物联网的核心
    大数据、物联网和人工智能等技术能否带来新的模式
    函数间的参数传递
    函数间的参数传递
  • 原文地址:https://www.cnblogs.com/littlefly/p/3662890.html
Copyright © 2020-2023  润新知