图片轮播代码

网页代码 2021-11-21 10:04:18 0

	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>jQuery轮播图代码-jq22.com</title>
	<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	ul, li {
	list-style: none;
	}

	img {
	border: none;
	}

	.clear {
	clear: both;
	zoom: 1;
	}

	.clear:after {
	content: '';
	height: 0;
	display: visibility;
	clear: both;
	overflow: hidden;
	}

	#box {
	width: 500px;
	height: 300px;
	margin: 10px auto;
	position: relative;
	}

	#img {
	height: 100%;
	}

	#img img {
	width: 100%;
	height: 100%;
	display: none;
	}

	#num li {
	float: left;
	background-color: gray;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	text-align: center;
	line-height: 20px;
	color: #fff;
	font-weight: bold;
	margin-left: 5px;
	cursor: pointer;
	}

	#num {
	position: absolute;
	bottom: 5px;
	right: 5px;
	}

	#num li:hover {
	background-color: #f80;
	}

	#num li.active {
	background-color: #f80;
	}</style>
	</head>
	<body>
	<div id="box">
	<div id="img">
	<img src="http://www.jq22.com/img/cs/500x500-1.png" alt=""> <img src="http://www.jq22.com/img/cs/500x500-2.png" alt="">
	<img src="http://www.jq22.com/img/cs/500x500-3.png" alt=""> <img src="http://www.jq22.com/img/cs/500x500-4.png" alt="">
	<img src="http://www.jq22.com/img/cs/500x500-5.png" alt=""> <img src="http://www.jq22.com/img/cs/500x500-6.png" alt="">
	</div>
	<ul id="num">

	</ul>
	</div>

	<script>
	$(function() {
	init();
	changImg(); //解决第一次第一张到第二张的时间间隔
	start();

	});
	//初始化
	function init() {
	var len = $('#img img').length; //获取图片有多少张
	var html = '';
	//拼html
	for (var i = 0; i < len; i++) {
	html += '<li onmouseover="changImg(' + i +
	')" onmouseout="reStart(' + i + ')">' + (i + 1) + '</li>';
	}
	//写进ul
	$('#num').html(html);
	//显示第一张图片
	$('#img img').first().css('display', 'block');
	//第一个数字背景颜色
	$('#num li').eq(0).addClass('active');
	}
	//图片轮播
	function changImg(num) {
	if (num == 'auto') { //定时器自动调用
	num = index;
	} else { //鼠标放上的时候清楚定时器
	clearInterval(timer);
	}
	//链式写法
	$('#img img').eq(num).css('display', 'block').siblings().css('display',
	'none');
	$('#num li').eq(num).addClass('active').siblings()
	.removeClass('active');
	index++;
	if (index == $('#img img').length) { //最后一张
	index = 0; //第一张
	}
	}
	var index = 0;
	var timer; //定时器
	//定时器播放
	function start() {
	timer = setInterval('changImg("auto")', 1000);
	}
	//鼠标离开之后又要自动播放
	function reStart(num) {
	index = num;
	changImg(num);
	start();
	}
	</script>

	</body>
	</html>