不间断连续滚动，文字图片都可以

最新推荐文章于 2019-05-01 11:24:04 发布

weixin_30527143

最新推荐文章于 2019-05-01 11:24:04 发布

阅读量75

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wwqianduan/p/3542603.html

版权

<html> 
<head> 
<base href="http://keleyi.com"> 
<title></title><base target="_blank" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<style>
    *{ margin:0; padding:0;}
    #photo-list{ width:980px; height:400px; margin:0 auto; overflow:hidden;}
    ul{ width:9999px; height:400px;}
    ul li{height:400px;width:980px; display:inline-block;list-style-type:none; float:left;}
    .one{ background:#f0b8b8;}
    .two{ background:#eef0b8;}
    .three{ background:#b8f0d7;}
    .fore{ background:#b8e1f0;}
</style>
</head> 
<body> 
    <div id="photo-list">
        <ul id="scroll">
            <li class="one"></li>
            <li class="two"></li>
            <li class="three"></li>
            <li class="fore"></li>
        </ul>
    </div>
<script>
    $(function ()
    {
        var c = $('#photo-list');
        var ul = $('#scroll'),
           itemCount = $("li").length,
           width = $("li").width(), //获得每个img容器的宽度
           scrollLeft = 0,
           marquee = function ()
           {
               c.scrollLeft(scrollLeft);
               scrollLeft += 2;
               if (scrollLeft % width <= 1)
               {  //当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面
                   var htm = $("li").first().clone();
                   ul.append(htm);
                   $("li").first().remove();
                   scrollLeft = 0;
               };
           },
           speed = 20; //数值越大越慢
        $('#scroll').width(width * itemCount + 'px'); //加载完后设置容器长度        
        var timer = setInterval(marquee, speed);
    })
</script>
</body> 
</html>

转载于:https://www.cnblogs.com/wwqianduan/p/3542603.html

weixin_30527143

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
不间断连续滚动，文字图片都可以

<html> <head> <base href="http://keleyi.com"> <title></title><base target="_blank" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jqu...
复制链接

扫一扫