<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>17.11jQuery案例十一轮播</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1.定义变量并初始化
var index = 0;/*轮播位置*/
var timer = null;/*定时器*/
var speed = 2000;/*定时器时间间隔*/
var size = $('#lunbo ul li').length;/*元素个数*/
//2.定义展示函数
function display(index){
$('#lunbo ul li').eq(index).show().siblings().hide();
$('#lunbo ol li').eq(index).addClass('active')
.siblings().removeClass('active');
}
//3.为数字列表注册单击事件
$('#lunbo ol li').click(function(){
index = $(this).index();
display(index);
});
//4.定义播放函数
function autoPlay(){
if(index==size){index=0;}
else index++;
display(index);
}
function rightPlay(){
index++;
if(index==size){index=0;}
display(index);
}
function leftPlay(){
index--;
if(index==-1) index = size-1;
display(index);
}
//5.设置定时器
timer = setInterval(autoPlay,speed);
//6.停止播放
$('#lunbo').mouseenter(function(){
clearInterval(timer);
});
//7.启动播放
$('#lunbo').mouseleave(function(){
timer = setInterval(autoPlay,speed);
});
//8.左播放按钮
$('#left').click(function(){
leftPlay();
});
//9.右播放按钮
$('#right').click(function(){
rightPlay();
});
});
</script>
<style>
/*1*/
*{
margin:0;
padding:0;
}
li{ list-style-type:none;}
img{ border:0;}
/*2*/
#lunbo{
width:400px;
height:300px;
position:relative;
border:#F00 solid 2px;
margin:20px auto;
overflow:hidden;
cursor:pointer;
}
#lunbo ul{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#lunbo ul li{
width:100%;
height:100%;
display:none;
}
#lunbo ul li:first-child{
display:block;}
#lunbo ul li img{
width:100%;
height:100%;
}
/*3*/
#lunbo ol{
position:absolute;
left:35%;
bottom:5%;
}
#lunbo ol li{
float:left;
height:20px;
width:20px;
line-height:20px;
text-align:center;
border:solid 1px red;
background-color:#CCC;
margin-left:2px;
font-size:14px;
font-weight:bolder;
}
#lunbo ol li.active{
background-color:#666;
color:#FFF;
}
/*4*/
#left,#right{
width:30px;
height:30px;
text-align:center;
line-height:30px;
background-color:#CCC;
display:block;/*转换成块元素*/
}
#left:hover,#right:hover{
opacity:0.5;}
#left{
position:absolute;
left:0;
top:50%;
margin-top:-15px;
}
#right{
position:absolute;
right:0;
top:50%;
margin-top:-15px;
}
</style>
</head>
<body>
<div id="lunbo">
<ul>
<li><img src="img3/1.jpg"></li>
<li><img src="img3/2.jpg"></li>
<li><img src="img3/3.jpg"></li>
<li><img src="img3/4.jpg"></li>
<li><img src="img3/5.jpg"></li>
<li><img src="img3/6.jpg"></li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
<span id="left"><</span>
<span id="right">></span>
</div>
</body>
</html>
