<!DOCTYPE html>
<
html
>
<
head
lang
=
"en"
>
<
meta
charset
=
"UTF-8"
>
<
title
></
title
>
<
style
>
*{margin:0; padding:0;}
ul{list-style:none;}
a{text-decoration:none;}
.clearfix{zoom:1;}
.clearfix:after{display:block; content:''; clear: both;}
.container{position:relative; width:790px; height:340px; margin:100px auto; overflow:hidden;}
.listImg{position:absolute; width:6320px; height:340px;}
.listImg li{float:left;}
.listImg li a img{width:100%;}
/*箭头样式*/
.arrow{ width:30px; height:60px; line-height:60px; text-align:center; background:rgba(0,0,0,.3); color:#fff; font-size: 2em;
z-index:100; cursor:pointer; position:absolute; top:40%; display:none;
}
.arrow:hover{background:rgba(0,0,0,0.6);}
#prev{left:20px;}
#next{right:20px;}
.container:hover .arrow{display:block;} /*鼠标进入轮播图才显示两个按钮*/
/*小按钮样式*/
.buttons{position:absolute; bottom:20px; left:45%; z-index:100;}
.buttons li{float:left; margin-right:10px;}
.buttons li span{display:block; width:10px; height:10px; border-radius:50%; background:#fff; cursor:pointer;}
.buttons li.active span{background:#f00;}
</
style
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
div
class
=
"list"
>
<
ul
class
=
"listImg clearfix"
style
=
"left:-790px;"
>
<
li
><
a
href
=
"#"
><
img
src
=
"img/6.jpg"
alt
=
"图片六"
></
a
></
li
>
<
li
><
a
href
=
"#"
><
img
src
=
"img/1.jpg"
alt
=
"图片一"
></
a
></
li
>
<
li
><
a
href
=
"#"
><
img
src
=
"img/2.jpg"
alt
=
"图片二"
></
a
></
li
>
<
li
><
a
href
=
"#"
><
img
src
=
"img/3.jpg"
alt
=
"图片三"
></
a
></
li
>
<
li
><
a
href
=
"#"
><
img
src
=
"img/4.jpg"
alt
=
"图片四"
></
a
></
li
>
<
li
><
a
href
=
"#"
><
img
src
=
"img/5.jpg"
alt
=
"图片五"
></
a
></
li
>
<
li
><
a
href
=
"#"
><
img
src
=
"img/6.jpg"
alt
=
"图片六"
></
a
></
li
>
<
li
><
a
href
=
"#"
><
img
src
=
"img/1.jpg"
alt
=
"图片一"
></
a
></
li
>
</
ul
>
<
ul
class
=
"buttons clearfix"
>
<
li
class
=
"active"
><
span
index
=
"1"
></
span
></
li
>
<
li
><
span
index
=
"2"
></
span
></
li
>
<
li
><
span
index
=
"3"
></
span
></
li
>
<
li
><
span
index
=
"4"
></
span
></
li
>
<
li
><
span
index
=
"5"
></
span
></
li
>
<
li
><
span
index
=
"6"
></
span
></
li
>
</
ul
>
<
a
href
=
"#"
class
=
"arrow"
id
=
"prev"
><</
a
>
<
a
href
=
"#"
class
=
"arrow"
id
=
"next"
>></
a
>
</
div
>
</
div
>
<
script
src
=
"dist/jquery-1.8.3.min.js"
></
script
>
<
script
>
var lists = $('.listImg');
//获取所有的小圆点
var btns = $('.buttons li');
//当前播放的是哪张图片对应的小圆点
var index =1;
//广告图片的张数
var len = 6;
//间隔时间,多少毫秒播一次
var interval = 3000;
var timer;
//滚动图片
function play(offset){
var left = parseInt(lists.css('left'))+offset;
if (offset>0) {
offset = '+=' + offset;
}
else {
offset = '-=' + Math.abs(offset);
}
lists.animate({'left':offset},500,function(){
if(left>-790){
lists.css('left', -790*len);
}else if(left< -790*len ){
lists.css('left', -790);
}
})
}
//启动动画
function start() {
timer = setInterval(function () {
$('#next').trigger('click');
play();
}, interval);
}
//停止动画
function stop() {
clearTimeout(timer);
}
//点击左箭头
$('#prev').click(function(e){
e.preventDefault();
if(lists.is(':animated')){
return;
}
//index=1,就让index=6,否则加1
index==1?index=len:(index-=1);
showButton();
play(-790);
});
//点击右箭头
$('#next').click(function(e){
e.preventDefault();
if(lists.is(':animated')){
return;
}
//index=6,就让index=1,否则减1
index==len?index=1:(index+=1);
showButton();
play(790);
});
//“激活”对应的小圆点
function showButton(){
//btns的下标从0开始,index从1到6,共6个小圆点,实际的图片下标是index-1
btns.eq(index-1).addClass('active').siblings('.active').removeClass('active');
}
//点击小圆点,切换图片
btns.click(function(){
//如果被点击的小圆点已经是被选中了的那一个(简单说就是重复点一个小圆点)
// 而被选中的小圆点都会加上一个active
if($(this).hasClass('active') || lists.is(':animated')){
return; //直接退出点击事件的方法
}
//获取被点击的小圆点的自定义属性index的值
var targetIndex = parseInt($(this).children().attr('index'));
//定义图片的偏移量
var offset = -790 * (targetIndex - index);
play(offset);
//更新当前的index
index = targetIndex;
showButton();
});
$('.container').hover(stop, start); //鼠标移入停止,移出启动
start();
</
script
>
</
body
>
</
html
>