图片轮播源代码 | 易学教程

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
	<script type="text/javascript" src="../jquery/jquery-1.8.1.js"></script>
	<script type="text/javascript">
	var i=0;
	var timer;
	$(function(){
	$(".ig").eq(0).show().siblings().hide();
	showTime();
	$(".tab").hover(function(){
	i=$(this).index();
	Show();
	clearInterval(timer);
	},function(){
	showTime()
	});
	$(".btn1").click(function(){
	clearInterval(timer);
	if(i==0){
	i=5;
	}
	i--;
	Show();
	showTime();
	})
	$(".btn2").click(function(){
	clearInterval(timer);
	if(i==4){
	i=-1;
	}
	i++;
	Show();
	showTime();
	})
	})
	function Show(){
	$(".ig").eq(i).fadeIn(300).siblings().fadeOut(300);
	$(".tab").eq(i).addClass("bg").siblings().removeClass("bg")
	}
	function showTime(){
	timer=setInterval(function(){
	i++;
	if(i==5){
	i=0;
	};
	Show();
	},3000)
	}
	</script>
	<style type="text/css">
	*{margin:0;padding:0;}
	.ig{position:absolute;}
	.btn{position:absolute;
	width:60px;
	height:90px;
	background-color:rgba(0,0,0,0.5)
	color:#fff;
	text-align:center;
	line-height:90px;
	font-size:40px;
	top:95px;
	cursor:pointer;
	}
	.btn2{
	left:580px;
	}
	ul{list-style:none;}
	#tabs{position:absolute;top:260px;left:200px;}
	.tab{width:30px;height:30px;background:#5388e8;float:left;line-height:30px;text-algin:center;color:#fff;margin-right:10px;border-radius:100%;cursor:pointer}
	.bg{background:red;}
	</style>
	</head>

	<body>
	<div id="igs">
	<div class="ig"><img src="img/1.jpg"></div>
	<div class="ig"><img src="img/2.jpg"></div>
	<div class="ig"><img src="img/3.jpg"></div>
	<div class="ig"><img src="img/4.jpg"></div>
	<div class="ig"><img src="img/5.jpg"></div>
	</div>
	<div class="btn btn1"><</div>
	<div class="btn btn2">></div>
	<div id="tabs">
	<div class="tab bg">1</div>
	<div class="tab">2</div>
	<div class="tab">3</div>
	<div class="tab">4</div>
	<div class="tab">5</div>
	</div>
	</body>
	</html>

来源：https://www.cnblogs.com/chaofei/p/5701393.html

标签

轮播