jQuery实现无缝图片滚动效果(原创)

Html

Css

* {
	padding:0;
	margin:0;
}
li {
	list-style-type:none;
	margin-top:40px;
}
body {
	margin:20px;
}
.wrap {
	width:600px;
	height:200px;
	position:relative;
	overflow:hidden;
}
.wrap ul {
	overflow:hidden;
	position:absolute;
	width:1600px;
	left:0;
	top:0;
}
.wrap ul li {
	float:left;
	width:200px;
}
.wrap ul li p {
	text-align:center;
}

// 如果想要使一个元素运动起来，一般情况下这个元素须要具有position属性absolute/relative
$(function() {
    var oul = $('.wrap ul');
    var oulHtml = oul.html();
    oul.html(oulHtml + oulHtml)
    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); //1600px

var speed = 2;

function slider() {

if (speed < 0) {
            if (oul.css('left') == -ulWidth / 2 + 'px') {
                oul.css('left', 0);
            }
            oul.css('left', '+=-2px');
        }

if (speed > 0) {
            if (oul.css('left') == '0px') {
                oul.css('left', -ulWidth / 2 + 'px');
            }
            oul.css('left', '+=' + speed + 'px');
        }

}

// setInterval()函数的作用是：每隔一段时间，执行该函数里的代码
    timeId = setInterval(slider, 30);

$('.wrap').mouseover(function() {
        // clearInterval()函数的作用是用来清除定时器
        clearInterval(timeId);
    });

$('.wrap').mouseout(function() {
        timeId = setInterval(slider, 30);
    });

});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

jQuery实现无缝图片滚动效果(原创)

代码描述：jQuery实现无缝图片滚动效果

1: 如果想要使一个元素运动起来，一般情况下这个元素须要具有position属性absolute/relative
2: setinterval()函数的作用是：每隔一段时间，执行该函数里的代码

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

Find Yourself

相关代码

jQuery实现无缝图片滚动效果(原创)

最新