无缝滚动插件版，欢迎拍砖!

最新推荐文章于 2022-02-25 20:00:37 发布

lsunwing

最新推荐文章于 2022-02-25 20:00:37 发布

阅读量116

点赞数

分类专栏：前端文章标签： jQuery CSS JavaScript C C++ ViewUI

本文链接：https://blog.csdn.net/lsunwing/article/details/83648827

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近闲的蛋疼，于是乎就做点立竿见影的事儿，欢迎拍砖，欢迎拍砖！

<html>
<head>
    <title>Jquery实现无缝滚动</title>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <script language="javascript" src="jquery.js"></script>
    <script language="javascript" src="script.js"></script>
</head>
<body>
<div>
    <div class="main">
        <div class="roll" id="roll">
            <div class="caption"><a href="http://www.baidu.com/" target="_blank">aaaaaaaaaaaaa</a></div>
            <div class="caption">bbbbbbbbbbbbb</div>
            <div class="caption">ccccccccccccc</div>
            <div class="caption">ddddddddddddd</div>
            <div class="caption">eeeeeeeeeeeee</div>
            <div class="caption">fffffffffffff</div>
            <div class="caption">ggggggggggggg</div>
            <div class="caption">hhhhhhhhhhhhh</div>
            <div class="caption">iiiiiiiiiiiii</div>
            <div class="caption">jjjjjjjjjjjjj</div>
            <div class="caption">kkkkkkkkkkkkk</div>
            <div class="caption">mmmmmmmmmmmmm</div>
            <div class="caption">nnnnnnnnnnnnn</div>
        </div>
    </div>
</div>
</body>
</html>

*{
	margin:0 0;
	padding:0px;
}
.main{
	width:200px;
	height:200px;
	overflow:hidden;
	border:1px #666 solid;
}

.roll{
	
	float:left;
	top:0px;
}

.caption{
	height:20px;
	line-height:20px;
	margin-left:20px;
}

$(document).ready(function(){
    $("#roll").myRoll("slow");
});

/**
 * @description  无缝滚动插件版
 * @param        speed:滚动速度控制参数，字符串类型参数字符串支持为slow，normal，fast三种
 *               数字类型参数范围是：1 —— 100（数字越小滚动越快）
 * @author       lsunwing
 * @date         2010/06/23
 */
$.fn.myRoll = function(speed){
    
    //滚动窗口的高
    var rollHeight = this.parent().height();
    //滚动条目数组
    var rollArray = this.find("div");
    //滚动条目数组个数
    var number = rollArray.size();
    //滚动条目的高
    var height = rollArray.eq(0).height();
    
    var obj = this;
    
    // 滚动速度控制
    var range = 1;  //滚动幅度
    var interval = 10;  //滚动时间间隔

    if(speed){
        if(typeof speed == "string"){
            if(speed == "slow"){
				interval = 100;
            }else if(speed == "normal"){
                interval = 50;
            }else if (speed == "fast"){
                interval = 10;
            }else{
                range = 1;
            }
        }else if(typeof speed == "number"){
            if(Math.ceil(speed) >= speed && Math.ceil(speed) <=100){
                interval = Math.ceil(speed);
            }else{
                interval = 100;
            }
        }else{
            range = 1;
            interval = 100;
        }
    }else{
        range = 1;
        interval = 100;
    }
    
    var top = 0;
    var flag = 0;

    //时间循环滚动
    var timeId;
    if(number > rollHeight/height){
        //开始滚动
        timeId = setInterval(startRoll,interval);
    }else{
        //内容高度小于滚动框的高度，不滚动
    }

    //鼠标动作
    $(this).hover(
        function(){
            clearInterval(timeId);
        },
        function(){
            timeId = setInterval(startRoll,interval);
        }
    );

    //滚动次数
    var c = Math.ceil(height/range);

    function startRoll(){
        flag++;
        if(flag >= c){            
            rollArray.eq(0).remove();
            obj.append($(rollArray).eq(0));
            //重新获得一下数组
            rollArray = obj.find("div");
            top = top + height;
            flag = 0;
        }
        top = top - range;
        
        obj.css("margin-top",top);
    }
}

lsunwing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无缝滚动插件版，欢迎拍砖!

最近闲的蛋疼，于是乎就做点立竿见影的事儿，欢迎拍砖，欢迎拍砖！ &lt;html&gt;&lt;head&gt; &lt;title&gt;Jquery实现无缝滚动&lt;/title&gt; &lt;link type="text/css" rel="stylesheet" href="style.css"/&gt; &amp
复制链接

扫一扫