PROMULGATOR

    小新

    江苏省
    Html
    Css
    Js
1
2
3
4
5
6
7
8
9
<div class="box">
    <ul>
        <li><img src="http://www.jq22.com/img/cs/500x500-1.png"></li>
        <li><img src="http://www.jq22.com/img/cs/500x500-2.png"></li>
        <li><img src="http://www.jq22.com/img/cs/500x500-3.png"></li>
        <li><img src="http://www.jq22.com/img/cs/500x500-4.png"></li>
        <li><img src="http://www.jq22.com/img/cs/500x500-5.png"></li>
    </ul>
</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
* {
    padding:0px;
    margin:0px;
}
.box {
    width:500px;
    border:1px solid black;
    position:relative;
    margin:50px auto;
    height:87px;
    overflow:hidden;
}
.box ul {
    position:absolute;
    left:0px;
    top:0px;
}
.box li {
    list-style:none;
    float:left;
}
.box img {
    width:200px;
}
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
function Lunbo() {
    this.ul = document.getElementsByTagName("ul")[0];
    this.li = document.getElementsByTagName("li");
    this.img = document.getElementsByTagName("img");
    this.box = document.getElementsByClassName("box")[0];
    this.speed = 5;
    var that = this;
    this.init = function() {
        this.ul.innerHTML += this.ul.innerHTML;
        this.ul.style.width = parseInt(getComputedStyle(this.ul)["width"]) * 2 + "px";
        setInterval(this.fn, 50);
        document.onclick = function(ev) {
            ev = ev || window.event;
            if (ev.clientX > document.documentElement.clientWidth / 2) {
                that.speed = 5;
            } else {
                that.speed = -5;
            }
        }
    }
    this.fn = function() {
        that.ul.style.left = that.ul.offsetLeft + that.speed + "px";
        if (that.ul.offsetLeft < -that.ul.offsetWidth / 2) {
            that.ul.style.left = "0px";
        }
        if (that.ul.offsetLeft >= 0) {
            that.ul.style.left = -that.ul.offsetWidth / 2 + "px";
        }
    }
}
new Lunbo().init();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

js图片无缝滚动

提供图片无缝滚动，点击左边或右边会随方向滚动。

0