jQuery轮播图代码

Html

Css

* {
	margin:0;
	padding:0;
	list-style:none;
}
img {
	width:100%;
}
.lunbo {
	width:500px;
	height:300px;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}
.lunbo .lunbo-imgs {
	position:absolute;
	z-index:10;
}
.lunbo .lunbo-imgs li {
	height:300px;
	overflow:hidden;
}
.lunbo .lunbo-num {
	position:absolute;
	z-index:11;
	bottom:10px;
	left:45%;
}
.lunbo .lunbo-num li {
	float:left;
	background:white;
	color:#333333;
	padding:2px 6px;
	margin-left:10px;
}
.lunbo .lunbo-num li.current {
	background:red;
}

$(function() {
    var height = 300; //每张图片的高度
    var speed = 700; //动画时间
    var delay = 3000; //自动切换时间
    var now = 0; //当前显示图片的索引
    var max = 2; //图片的最大索引
    var $imgs = $('.lunbo-imgs'); //获取对象

//复制列表中的第一个图片追加列表的最后
    $imgs.find('li:first').clone().appendTo($imgs);
    //设置定时器实现图片自动切换
    var timer = setInterval(changeAuto, delay);
    //图片自动切换
    function changeAuto() {
        if (!$imgs.is(':animated')) { //判断是否在动画中
            //判断是否达到图片列表末尾
            if (now < max) {
                now += 1;
                changeNext();
            } else {
                now = 0;
                changeFirst();
            }

changeNum();
        }
    }
    //当鼠标指针划过时暂停移动 移出时恢复移动
    $('.lunbo').bind({
        mouseenter: function() {
            clearInterval(timer)
        },
        mouseleave: function() {
            //		 		clearInterval(timer)
            timer = setInterval(changeAuto, delay)
        }
    })
    //切换到下一张图片
    function changeNext() {
        $imgs.animate({
            'top': -height * now + 'px'
        }, speed)
    }
    //切换到第一张图片
    function changeFirst() {
        $imgs.animate({
            'top': -height * (max + 1) + 'px'

}, speed, function() {
            $(this).css('top', '0')
        })
    }
    var $lunboNum = $('.lunbo-num li')
    //单机小圆点或者数字切换图片
    $lunboNum.click(function() {
        //				now = $(this).index();
        //				changeNext();
        //				
        var x = now;
        now = $(this).index();
        if (x < now) {
            $imgs.css({
                top: -height * (now - 1) + 'px'
            })
            changeNext();
        } else if (x > now) {
            $imgs.css({
                top: -height * (now + 1) + 'px'
            })
            changeNext()
        }

changeNum();

})
    //点亮当前的选择的小圆点或者数字
    function changeNum() {
        $lunboNum.eq(now).addClass('current').siblings().removeClass('current')
    }
})

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

立即下载

jQuery轮播图代码



代码描述：jQuery轮播图上下垂直滚动切换

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

勿念

相关代码

jQuery轮播图代码

最新