<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery轮播图代码</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: 150px;
height: 150px;
padding-top:180px
}
#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.zecoki.com/ximages/left-ads/1.jpg" onclick ="window.open('http://bbs.zecoki.com/plugin.php?id=threed_pay')" style="cursor: pointer;"/>
<img src="http://www.zecoki.com/ximages/left-ads/2.png" onclick ="window.open('http://bbs.zecoki.com/plugin.php?id=threed_pay')" style="cursor: pointer;"/>
<!--原代码 <img src="vip.jpg" 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")', 2500);
}
//鼠标离开之后 又要自动播放
function reStart(num) {
index = num;
changImg(num);
start();
}
</script>
</body>
</html>
近期评论