超完美滚动轮播图

Html

Css

* {
	margin:0px;
	padding:0px;
}
.banner {
	width:500px;
	height:300px;
	margin:150px auto;
	position:relative;
	overflow:hidden;
	cursor:pointer;
}
.banner ul {
	list-style:none;
	width:700%;
	height:300px;
	position:absolute;
}
.banner ul li {
	width:500px;
	height:300px;
	float:left;
}
.banner ul li img {
	width:100%;
	height:100%;
}
.banner .arrow .left,.banner .arrow .right {
	width:40px;
	height:80px;
	background:#000000;
	opacity:0.3;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	font-family:"宋体";
	font-size:52px;
	color:#fff;
	line-height:80px;
	text-align:center;
}
.arrow .left {
	left:0px;
}
.arrow .right {
	right:0px;
}
.banner .arrow {
	display:none;
}
/*鼠标经过盒子，让箭头显示出来*/
		    .banner:hover .arrow {
	display:block;
	cursor:pointer;
}
/*小圆点样式*/
		   .banner ol {
	list-style:none;
	width:200px;
	height:20px;
	background:#222222;
	position:absolute;
	bottom:50px;
	left:50%;
	transform:translateX(-50%);
	/*opacity:0.3;
	*/
		    border-radius:10px;
}
.banner ol li {
	width:10px;
	height:10px;
	background:#fff;
	border-radius:50%;
	float:left;
	margin-left:21px;
	margin-top:5px;
	cursor:pointer;
}
.banner ol .now {
	background:aqua;
}

$(function() {
    // 把要操作的对象先获取到
    var banner = $('.banner');
    var Left = $('.left'); // alert(Left.length);
    var Right = $('.right');
    var Ul = $('ul'); // alert(Ul.length);
    var Width = $('ul li').width(); //alert(Width);
    var Point = $('.banner ol li'); // alert(Point.length);
    var Index = 0; //用于记录点击的次数，图片的张数(计数器，记录了图片移动的张数)

//点击小圆点让图片移动
    $.each(Point, function(index, value) { //如果此处我没有用each循环来写，那么我便需要用$(this).index()方法来获取图片的下标
        //让点击的小圆点有class样式，其他li没有class样式
        Point.eq(index).on('click', function() {
            $(this).addClass('now').siblings().removeClass('now');
            Ul.stop().animate({
                'left': -index * Width
            });
            Index = index;
            console.log(Index);
            //alert(Index);
        })
    });

//	点击右箭头,ul往左跑
    Right.on('click', function() {
        //需要做一个判断，如果发现此时图片是最后一张图片，就不能继续执行了
        //让index是图片的张数减一的时候,让index不继续加
        if (Index >= 6) {
            //让index变成0
            Index = 0;
            //              	让ul的left值瞬间变成0
            Ul.css('left', 0);
        }
        Index++;
        Ul.stop().animate({
            'left': -Index * Width
        });

if (Index == 6) {
            //因为在图片最后面添加了一张假图片，其实最后一张图片的时候，需要对应的是索引0的小圆点
            Point.eq(0).addClass('now').siblings().removeClass('now');

} else {
            Point.eq(Index).addClass('now').siblings().removeClass('now');
        }

})

//点击左箭头,让Ul往右跑
    Left.on('click', function() {
        if (Index <= 0) {
            //return; 此时不应该return,应该让index变成最大的值，left也变成最大的left
            Index = 6;
            Ul.css('left', -Index * Width);
        }
        Index--;
        Ul.stop().animate({
            'left': -Index * Width
        });

if (Index == 6) {
            //因为在图片最后面添加了一张假图片，其实最后一张图片的时候，需要对应的是索引0的小圆点
            Point.eq(0).addClass('now').siblings().removeClass('now');
        } else {
            Point.eq(Index).addClass('now').siblings().removeClass('now');
        }

})

//调取Right方法，使其自动播放
    var time = setInterval(function() {
        Right.click();
    }, 2000);

//鼠标移到banner中,自动播放停止
    banner.mouseenter(function() {
        clearInterval(time);
    });

// 鼠标移出banner中,自动播放开始
    banner.mouseleave(function() {
        time = setInterval(function() {
            Right.click();
        }, 2000);
    })
})

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

立即下载

超完美滚动轮播图



代码描述：jQuery轮播图无bug ，企业级、注释全

2

最新

发表评论全部评论

暂时没有评论！

尋0

2018/4/13 9:01:24

还是有bug，当连续点击左右切换按钮时（鼠标不移动），两侧的左右切换按钮没有规律性的偶尔消失

轻酌~浅醉0

2018/4/13 9:52:08

我没试出来，不过我设置的是鼠标移出包裹图片的这个div,按钮才消失，按常理来说，鼠标没移出应该不会消失。。。

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

轻酌~浅醉

相关代码

超完美滚动轮播图

最新