<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none;
}
#box{
position:relative;
width:400px;
height:300px;
}
img{
position:absolute;
width:400px;
height:300px;
}
#imgId1{
opacity:1;
}
#imgId2{
opacity:0;
}
#imgId3{
opacity:0;
}
#imgId4{
opacity:0;
}
#imgId5{
opacity:0;
}
ul{
position:absolute;
right:20px;
bottom:10px;
height:40px;
}
li{
float:left;
margin-left:10px;
width:20px;
height:20px;
border-radius:50%;
background-color:orange;
}
#leftArrow{
position: absolute;
left:0px;
top:50%;
}
#rightArrow{
position: absolute;
right:0px;
top:50%;
}
</style>
</head>
<body style="height:1000px;">
<div id="box">
<img id="imgId1" src="img/timg1.jpg" />
<img id="imgId2" src="img/timg2.jpg" />
<img id="imgId3" src="img/timg3.jpg" />
<img id="imgId4" src="img/timg4.jpg" />
<img id="imgId5" src="img/timg5.jpg" />
<ul id="btns">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="leftArrow" style="font-size: 50px">＜</div>
<div id="rightArrow" style="font-size: 50px">＞</div>
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var arr=["timg1.jpg","timg2.jpg","timg3.jpg","timg4.jpg","timg5.jpg"];
var ord = 0;
var myTimer = null;
function initUI() {
$("#box li:first").css({"backgroundColor":"red"});
}
function initEvent() {
$("#box").mouseenter(function () {
stopPlay();
});
$("#box").mouseleave(function () {
autoPlay();
});
$("#box li").click(function () {
goImg($("#box li").index(this));
});
$("#leftArrow").click(function () {
let transord =ord-1;
transord = transord<0?arr.length-1:transord;
goImg(transord);
});
$("#rightArrow").click(function () {
let transord =ord+1;
transord = transord>arr.length-1?0:transord;
goImg(transord);
});
}
function autoPlay() {
myTimer = setInterval(function () {
let outOrd = ord;
ord++;
if(ord>arr.length-1){
ord=0;
}
let $img = $("#box img");
$img.eq(outOrd).animate({"opacity":0},2000);
$img.eq(ord).animate({"opacity":1},2000);
$("#box li").eq(ord).css({"backgroundColor":"red"}).siblings().css({"backgroundColor":"orange"});
},3000);
}
function stopPlay() {
window.clearInterval(myTimer);
}
function goImg(transOrd) {
let outOrd = ord;
ord=transOrd;
if(ord>arr.length-1){
ord=0;
}
let $img = $("#box img");
$img.eq(outOrd).animate({"opacity":0},2000);
$img.eq(ord).animate({"opacity":1},2000);
$("#box li").eq(ord).css({"backgroundColor":"red"}).siblings().css({"backgroundColor":"orange"});
}
$(function () {
initUI();
initEvent();
autoPlay();
});
</script>
