JQuery实现轮播图

JQuery实现轮播图

 

	
		
		
		
		
		
	
	
		

			

				
				
				
				
			
			

				
1
				
2
				
3
				
4
			
			<
			>
		
	

body, ul, li, a{
	padding: 0px;
	margin: 0px;
	text-decoration: none;
	list-style: none;
}
.scroll{
	position: relative;
	width: 530px;
	height: 395px;
	border: 6px solid rgba(0, 0, 0, 0.5);
	margin: 50px auto;
	overflow: hidden;
}
.scrollImg{
	position: absolute;
}

.box img{
	float: left;
}
.tabs{
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
}
.tabs li{
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ccc;
	cursor: pointer;
	line-height: 20px;
	text-align: center;
}
.tabs .active{
	background: olivedrab;
}
.btn{
	width: 30px;
	height: 30px;
	background: rgba(44, 55, 66, 0.5);
	color: #fff;
	position: absolute;
	top: 50%;
	margin-top: -15px;
	font-size: 20px;
	text-align: center;
	line-height: 30px;
}
.btnb{
	right: 0px;
}

var i = 0;
var timer;
$(function() {
	$(".scrollImg").eq(0).show().siblings().hide();//第一张图片显示，其余兄弟图片隐藏
	showTime();
	//鼠标点击下发生变化
	$('li').hover(function() {
		i = $(this).index();
		show();
		clearInterval(timer);//清除轮播
	}, function() {
		showTime();
	});
	//给两个按钮绑定事件
	$(".btna").click(function() {
		clearInterval(timer);
		if(i == 0) {
			i = 4
		}
		i--;
		show();
		showTime();
	});
	$(".btnb").click(function() {
		clearInterval(timer);
		if(i == 3) {
			i = -1
		}
		i++;
		show();
		showTime();
	});
});

function show() {
	$('.scrollImg').eq(i).fadeIn(300).siblings().fadeOut();//第i张图片显示，其余图片隐藏
	$("li").eq(i).addClass("active").siblings().removeClass("active");//底部小标随图片轮播变换顺序
}

function showTime() {
	timer = setInterval(function() {  //间隔3秒，图片实现自动轮播
		i++;
		if(i == 4) {
			i = 0;
		}
		show();
	}, 3000);
}