HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<link rel="stylesheet" type="text/css" href="demo1.css">
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<!-- <script src="jquery-3.2.1.js"></script> -->
<script src="demo1.js"></script>
</head>
<body>
<!-- <script src="./demo.js"></script> -->
<!-- <img src="./image/demo1.jpg" alt="text"> -->
<div id="wrapper">
<div id="banner">
<ul class="imgList">
<li><a href="#"><img src="../image/11.jpg" /> </a></li>
<li><a href="#"><img src="../image/12.jpg" /> </a></li>
<li><a href="#"><img src="../image/13.jpg" /> </a></li>
<li><a href="#"><img src="../image/14.jpg" /> </a> </li>
<li><a href="#"><img src="../image/15.jpg" /> </a></li>
</ul>
<div style="clear: both;"></div>
<span id="prev"><</span>
<span id="next">></span>
<ul class="infoList">
<li class="infoOn">1/5</li>
<li>2/5</li>
<li>3/5</li>
<li>4/5</li>
<li>5/5</li>
</ul>
</div>
<ul class="indexList">
<li class="active"><span class="indexOn">第1图</span></li>
<li><span>第2图</span></li>
<li><span>第3图</span></li>
<li><span>第4图</span></li>
<li><span>第5图</span></li>
</ul>
</div>
</body>
</html>
css部分
body,div,a,ul,li,img{
margin:0;
padding:0;
}
*{
list-style: none;
text-decoration: none;
}
#wrapper{
/* position: relative; */
width: 100%;
min-width: 1000px;
margin:50px auto;
background-color: ghostwhite;
}
#banner{
position:relative;
height: 460px;
overflow: hidden;
width: 960px;
margin: auto;
}
.imgList{
/* position:relative; */
width: 960px;
height: 460px;
overflow: hidden;
z-index: 10;
}
.imgList li{
/* display:inline; */
width: 960px;
height: 460px;
float: left;
-webkit-animation-name:fade;
-webkit-animation-duration: 5s;
animation-name:fade;
animation-duration: 5s;
}
/*给图片添加淡入淡出效果*/
@-webkit-keyframes fade{
from{opacity: 0; }
to{ opacity: 1; }
}
@keyframes fade{
from{opacity: 0.5; }
to{opacity: 1;}
}
li img{
width: 960px;
height: 420px;
}
#prev, #next{
position:absolute;
background-color:black;
color:white;
font-size:70px;
line-height: 65px;
font-weight:bold;
width:55px;
height:65px;
cursor: pointer;
z-index: 20;
opacity: 0.3;
text-align: center;
display:none;
transition:opacity 1s;
-webkit-transition: opacity 1s;
}
/*只有当鼠标放在图片容器里的时候，上一张，下一张按钮才出现*/
#banner:hover #prev{
display:block;
}
#banner:hover #next{
display:block;
}
#prev{
left:0;
top:200px;
-webkit-animation-name:leftIn;
-webkit-animation-duration: 1s;
animation-name:leftIn;
animation-duration: 1s;
}
/*给上一张按钮添加进入时动画*/
@-webkit-keyframes leftIn{
from{
left: -55px;
}
to{
left:0px;
}
}
@keyframes leftIn{
from{
left:-55px;
}
to{
left:0px;
}
}
#next{
right:0;
top:200px;
-webkit-animation-name:rightIn;
-webkit-animation-duration: 1s;
animation-name:rightIn;
animation-duration: 1s;
}
/*给下一张按钮添加进入时动画*/
@-webkit-keyframes rightIn{
from{
right:-55px;
}
to{
right:0px;
}
}
@keyframes rightIn{
from{
right:-55px;
}
to{
right:0px;
}
}
#prev:hover,#next:hover{
opacity: 0.7;
}
.infoList{
position:absolute;
top:15px;
left:15px;
font-size:18px;
color:white;
z-index:20;
}
.infoList li{
display:none;
}
.infoList .infoOn{
display:inline;
}
.indexList{
margin-top:20px;
height:35px;
width: 960px;
margin: auto;
text-align:center;
}
.indexList li{
display: inline;
line-height:35px;
cursor:pointer;
opacity: 0.8;
}
.indexList li span{
height:30px;
padding:0 11px;
line-height:30px;
border-left: solid 1px rgba(0,0,0,0.3);
}
.indexList li .indexOn{
border:none;
}
.indexList li:hover{
border-bottom: solid 4px deeppink;
opacity: 1;
}
.active{
border-bottom: solid 4px deeppink;
opacity: 1;
}
js部分
$(document).ready(function () {
var curIndex = 0;//定义一个全局变量，也就是图片的索引值
imgLen = $(".imgList li").length;//获取图片的张数
/*1.用定时器做一个自动播放函数，当图片索引值小于图片长度-1的时候，就让索引值自增，当它等于图片长度，也就是到最后一张图片的时候，让它为0，从第一张图片重新开始*/
var autoChange = setInterval(function () {
if (curIndex < imgLen - 1) {
curIndex++;
}
else {
curIndex = 0;
}
changeTo(curIndex);
}, 2400);
/*2.给上一张按钮添加鼠标悬浮事件，当鼠标悬浮时，清除定时器，鼠标移开时，调用函数重新开始自动播放*/
$("#prev").hover(function () {
clearInterval(autoChange);
}, function () {
autoChangeAgain();
});
/*3.给上一张按钮添加鼠标点击事件，当索引值>0的时候，就让它自减，否则也就是已经到第一张图片的时候让索引值为图片长度减1，也就是回到最后一张图片，再将索引值传给changeTo函数*/
$("#prev").click(function () {
curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
changeTo(curIndex);
})
/*4.给下一张按钮添加鼠标悬浮事件*/
$("#next").hover(function () {
clearInterval(autoChange);
}, function () {
autoChangeAgain();
});
/*5.给下一张按钮绑定鼠标点击事件*/
$("#next").click(function () {
curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
changeTo(curIndex);
})
/*6.给下面的文字列表绑定事件，当鼠标悬浮到某个li上面时清除定时器，移开又自动播放*/
$(".indexList").find("li").each(function (item) {
$(this).hover(function () {
clearInterval(autoChange);
changeTo(item);
curIndex = item;
}, function () {
autoChangeAgain();
});
});
/*7.定义一个重新自动播放函数*/
function autoChangeAgain() {
autoChange = setInterval(function () {
if (curIndex < imgLen - 1) {
curIndex++;
}
else {
curIndex = 0;
}
changeTo(curIndex);
}, 3000);
};
/*8.定义一个切换图片的函数*/
function changeTo(num) {
$(".imgList").find("li").css("display", "none").eq(num).css("display", "block");
$(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
$(".indexList").find("li").removeClass("active").eq(num).addClass("active");
};
});
$(".imgList li:not(:first-child)").hide();