最近发现面试时常会要求写一段轮播图的效果;
HTML部分
<div id="box">
<div id="img">
//此处放图片
<img src="../img/photo1.jpg" alt="">
<img src="../img/photo2.jpg" alt="">
<img src="../img/photo3.jpg" alt="">
<img src="../img/photo4.jpg" alt="">
<img src="../img/photo5.jpg" alt="">
<img src="../img/photo6.jpg" alt="">
</div>
//此处小圆点
<ul id="num">
</ul>
</div>
css部分
* {
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;
}
JS部分
$(function() {
init();
changImg(); //解决第一次第一张到第二张的时间间隔
start();
});
//初始化
function init() {
var len = $('#img img').length; //获取图片有多少张
var html = '';
//拼html
for (var i = 0; i < len; i++) {
html += '<li οnmοuseοver="changImg(' + i +
')" οnmοuseοut="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();
}