PROMULGATOR

    I am a small little ston

    北京市中国北京研究院
    Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="visual_area">
    <div class="scroll_area">
        <ul id="scroll_content">
            <li>
                <p>内容1</p>
            </li>
            <li>
                <p>内容2</p>
            </li>
            <li>
                <p>内容3</p>
            </li>
        </ul>
        <ul>
            <li>
                <p>补位1</p>
            </li>
            <li>
                <p>补位2</p>
            </li>
            <li>
                <p>补位3</p>
            </li>
        </ul>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
* {
    padding:0;
    margin:0
}
#visual_area {
    width:600px;
    height:150px;
    background:#333;
    margin:100px auto;
    overflow:hidden;
}
#visual_area ul {
    background:#fff;
    float:left
}
#visual_area li {
    list-style:none;
    float:left;
    width:200px;
    height:150px;
    line-height:150px;
    text-align:center;
}
#visual_area li p {
    background:#ccc;
    width:198px;
    height:148px;
    border:1px solid #000
}
.scroll_area {
    width:4000px;
    height:150px
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
$(function() {
    var roll = function() {
        var o_place = $('#visual_area').scrollLeft();
        var n_place = o_place + 200;
        if (n_place < $('#scroll_content').width()) {
            $('#visual_area').scrollLeft(n_place);
        } else {
            $('#visual_area').scrollLeft(0);
        }
    }
    setInterval(roll, 1000);
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4
 立即下载

jQuery多幅图片向左无缝滚动代码

更新时间：2021-03-08 00:44:03

我制作一个最简单的无缝滚动效果，鼠标滑入滑出的处理在详解2中继续说明，因为我自己是个初学者，很多时候都是边学习边记录的。setinterval函数说明，本例中经过1000毫秒（时间间隔）向左滚动200像素（步长），是一个很慢速并且感觉有些跳的滚动，要实现比较细腻平滑的效果，时间间隔和步长尽量小一些，调整这两个数值会出现很多有趣的效果，有兴趣的可以试一试。需要说明的是：

var o_place=$('#visual_area').scrollleft(); 
var n_place=o_place+200;

为什么要这样做呢？setinterval函数在页面加载后的1秒后，获取可视区滚动条位置，滚动条位置设置为+200，所以执行一次roll函数滚动条位置加200，加了200之后的滚动条位置大于等于滚动内容的宽度就把滚动条位置归0.

0