1、提前工作
目录
先引入jquery-2.2.4.js:
链接: https://pan.baidu.com/s/1nEe0WrUokaPk5oqIk_15Lw 提取码: na29 复制这段内容后打开百度网盘手机App,操作更方便哦
导入图片
2、源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-2.2.4.js"></script>
<style>
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 {
top:120px;
margin-right: auto;
margin-left: auto;
width:1040px;
height: 300px;
/*margin: 10px auto;*/
position: relative;
}
#img {
height: 100%;
}
#img img {
width: 100%;
height: 100%;
display: none;
border-radius: 3px;
}
#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>
<script>
$(function() {
init();
changImg(); //解决第一次第一张到第二张的时间间隔
start();
//document.getElementById('num').innerHTML ="hello";
});
//初始化
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")', 2000);
}
//鼠标离开之后 又要自动播放
function reStart(num) {
index = num;
changImg(num);
start();
}
</script>
</head>
<body>
<div id="box">
<div id="img">
<img alt="" src="images/500x500-1.png" style="display: block;"> <img alt="" src="images/500x500-2.png" style="display: none;">
<img alt="" src="images/500x500-3.png" style="display: none;"><img alt="" src="images/500x500-4.png" style="display: none;">
<img alt="" src="images/500x500-5.png" style="display: none;"><img alt="" src="images/500x500-6.png" style="display: none;">
<img alt="" src="images/500x500-7.png" style="display: none;"><img alt="" src="images/500x500-2.png" style="display: none;">
</div>
<ul id="num"><li onmouseover="changImg(0)" onmouseout="reStart(0)" class="active">1</li><li onmouseover="changImg(1)" onmouseout="reStart(1)" class="">2</li><li onmouseover="changImg(2)" onmouseout="reStart(2)" class="">3</li><li onmouseover="changImg(3)" onmouseout="reStart(3)" class="">4</li>
<li onmouseover="changImg(4)" onmouseout="reStart(4)" class="">5</li><li onmouseover="changImg(5)" onmouseout="reStart(5)" class="">6</li><li onmouseover="changImg(6)" onmouseout="reStart(6)" class="">7</li><li onmouseover="changImg(7)" onmouseout="reStart(7)" class="">8</li>
</ul>
</div>
</body>
</html>