jQuery无缝滚动轮播图

Html

Css

.container {
	width:425px;
	height:325px;
	margin:0 auto;
	border:1px solid #ddd;
	position:relative;
	overflow:hidden;
}
.container:hover .btn {
	display:block;
}
img {
	width:425px;
	height:100%;
	float:left;
}
.btn {
	display:inline-block;
	border:20px solid transparent;
	position:absolute;
	top:40%;
	cursor:pointer;
	opacity:.5;
	display:none;
}
.btn:hover {
	opacity:1;
}
#prev {
	border-right:20px solid pink;
}
#next {
	border-left:20px solid pink;
	right:0;
}
.imgCon {
	position:absolute;
	width:1700px;
	height:100%;
}

$(function() {
    var arr = ['http://www.jq22.com/img/cs/500x300-1.png', 'http://www.jq22.com/img/cs/500x300-2.png', 'http://www.jq22.com/img/cs/500x300-3.png', 'http://www.jq22.com/img/cs/500x300-4.png'];
    // 默认第一张
    $.each(arr, function(i, m) {
        var gg = document.createElement('img');
        $(gg).attr('src', m);
        $('.imgCon').append(gg);
    });
    $('.imgCon').css({
        left: 0
    })
    var derection = true;

function time() {
        if (derection) { //向左

$('.imgCon').stop().animate({
                left: -425
            }, function() {
                $('.imgCon').css({
                    left: 0
                });
                var i = arr.shift();
                arr.push(i);
                $('.imgCon').html('');
                $.each(arr, function(i, m) {
                    var img = document.createElement('img');
                    $(img).attr('src', m);
                    $('.imgCon').append(img);
                });
            })
        } else {

$('.imgCon').css({
                left: -425
            });
            var i = arr.pop();
            arr.unshift(i);
            $('.imgCon').html('');
            $.each(arr, function(i, m) {
                var img = document.createElement('img');
                $(img).attr('src', m);
                $('.imgCon').append(img);
            });
            $('.imgCon').stop().animate({
                left: 0
            }, function() {

})
        }

}

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

立即下载

jQuery无缝滚动轮播图



代码描述：实现无缝滚动轮播，以及上下张图片的切换

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

相关代码

jQuery无缝滚动轮播图

最新