轮播图 | 易学教程

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<style>
	* {
	margin:0;
	padding:0;
	}
	a{
	text-decoration: none;
	}
	.container {
	position: relative;
	width: 600px;
	height: 400px;
	margin:100px auto 0 auto;
	box-shadow: 0 0 5px green;
	overflow: hidden;
	}
	.container .wrap {
	position: absolute;
	width: 4200px;
	height: 400px;
	z-index: 1;
	}
	.container .wrap img {
	float: left;
	width: 600px;
	height: 400px;
	}
	.container .buttons {
	position: absolute;
	right: 5px;
	bottom:40px;
	width: 150px;
	height: 10px;
	z-index: 2;
	}
	.container .buttons span {
	margin-left: 5px;
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: green;
	text-align: center;
	color:white;
	cursor: pointer;
	}
	.container .buttons span.on{
	background-color: red;
	}
	.container .arrow {
	position: absolute;
	top: 35%;
	color: green;
	padding:0px 14px;
	border-radius: 50%;
	font-size: 50px;
	z-index: 2;
	display: none;
	}
	.container .arrow_left {
	left: 10px;
	}
	.container .arrow_right {
	right: 10px;
	}
	.container:hover .arrow {
	display: block;
	}
	.container .arrow:hover {
	background-color: rgba(0,0,0,0.2);
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="wrap" style="left: -600px;">
	<img src="http://sc.jb51.net/uploads/allimg/130112/2-1301122130215H.jpg" alt="5">
	<img src="http://img.sc115.com/uploads/allimg/110307/20110307114459136.jpg" alt="1">
	<img src="http://img5.3lian.com/gaoqing/01/05/075.jpg" alt="2">
	<img src="http://h.hiphotos.baidu.com/lvpics/w=600/sign=6570942cbf12c8fcb4f3f5cdcc0292b4/d01373f082025aafb3f498c7fdedab64024f1af3.jpg" alt="3">
	<img src="http://f.hiphotos.baidu.com/lvpics/w=600/sign=4351b6aa8694a4c20a23e42b3ef51bac/024f78f0f736afc3ece868c0b219ebc4b64512aa.jpg" alt="4">
	<img src="http://sc.jb51.net/uploads/allimg/130112/2-1301122130215H.jpg" alt="5">
	<img src="http://img.sc115.com/uploads/allimg/110307/20110307114459136.jpg" alt="1">
	</div>
	<div class="buttons">
	<span class="on">1</span>
	<span>2</span>
	<span>3</span>
	<span>4</span>
	<span>5</span>
	</div>
	<a href="javascript:;" class="arrow arrow_left"><</a>
	<a href="javascript:;" class="arrow arrow_right">></a>
	</div>
	<script>
	var wrap = document.querySelector(".wrap");
	var next = document.querySelector(".arrow_right");
	var prev = document.querySelector(".arrow_left");
	next.onclick = function () {
	next_pic();
	}
	prev.onclick = function () {
	prev_pic();
	}
	function next_pic () {
	index++;
	if(index > 4){
	index = 0;
	}
	showCurrentDot();
	var newLeft;
	if(wrap.style.left === "-3600px"){
	newLeft = -1200;
	}else{
	newLeft = parseInt(wrap.style.left)-600;
	}
	wrap.style.left = newLeft + "px";
	}
	function prev_pic () {
	index--;
	if(index < 0){
	index = 4;
	}
	showCurrentDot();
	var newLeft;
	if(wrap.style.left === "0px"){
	newLeft = -2400;
	}else{
	newLeft = parseInt(wrap.style.left)+600;
	}
	wrap.style.left = newLeft + "px";
	}
	var timer = null;
	function autoPlay () {
	timer = setInterval(function () {
	next_pic();
	},2000);
	}
	autoPlay();

	var container = document.querySelector(".container");
	container.onmouseenter = function () {
	clearInterval(timer);
	}
	container.onmouseleave = function () {
	autoPlay();
	}

	var index = 0;
	var dots = document.getElementsByTagName("span");
	function showCurrentDot () {
	for(var i = 0, len = dots.length; i < len; i++){
	dots[i].className = "";
	}
	dots[index].className = "on";
	}

	for (var i = 0, len = dots.length; i < len; i++){
	(function(i){
	dots[i].onclick = function () {
	var dis = index - i;
	if(index == 4 && parseInt(wrap.style.left)!==-3000){
	dis = dis - 5;
	}
	//和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可
	if(index == 0 && parseInt(wrap.style.left)!== -600){
	dis = 5 + dis;
	}
	wrap.style.left = (parseInt(wrap.style.left) + dis * 600)+"px";
	index = i;
	showCurrentDot();
	}
	})(i);
	}
	</script>
	</body>
	</html>

来源：https://www.cnblogs.com/ljj-233/p/11328731.html

标签

轮播

buttons