jQuery手风琴轮播图

Html

Css





    
    手风琴轮播

* {
	margin:0;
	padding:0;
}
body {
	-ms-overflow-style:scrollbar;
	overflow-style:scrollbar;
	overflow-x:hidden;
}
li {
	list-style:none;
	position:absolute;
	overflow:hidden;
}
.img {
	width:1400px;
	height:400px;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}

$(function() {

var imgCounter = 6; //当前轮播图序号
    var timer = null;

//初始化，将所有照片有序地放入img盒子里
    $('li').each(function(index) {
        $(this).css('left', index * 100);
    })

function rotation(counter) {
        $('li').eq(counter).stop().animate({
            left: counter * 100 + 'px' //将点击的图片位置放入到初始化的位置 
        }, 700);
        $('li').eq(counter).nextAll().each(function(index) { //对当前图片的往后的所有图片进行重新定位
            $(this).stop().animate({
                left: 500 + counter * 100 + index * 100 + 'px' //具体的位置定位，
            }, 700)
        })

$('li').eq(counter).prevAll().each(function(index) { //对当前图片的往前的所有图片进行重新定位
            $(this).stop().animate({
                left: (counter - index - 1) * 100 + 'px' //具体的位置定位
            }, 700);
        })
    }

//手风琴轮播主要功能的实现
    $('li').mouseenter(function() {

var idx = $('li').index(this); //获取当前点击的图片序号
        imgCounter = idx;
        rotation(idx);
        clearTimeout(timer);
        autoRotation();

});

//自动轮播
    function autoRotation() {

timer = setTimeout(function() {
            if (imgCounter >= 6) {
                imgCounter = 0;
            } else {
                imgCounter++;
            }
            rotation(imgCounter);
            autoRotation();

}, 5000);

}

autoRotation();

})

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

立即下载

jQuery手风琴轮播图



代码描述：极其精简的手风琴轮播图，可自动轮播，鼠标悬停自动播放当前图片，代码只有短短几十行。无特殊样式

手风琴轮播图
1.代码非常简洁，只有几十行
竟然不能引用自己的图片，只有引用官方的图片，导致尺寸不一样，看一下可能有些问题；

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

枫叶荻花

相关代码

jQuery手风琴轮播图

最新