一、布局
<style>
.container{
position: relative;
width: 500px;
height: 180px;
margin:100px auto;
}
.container ul{
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: rgba(0,0,0,0.4);
}
.container li{
width:10px;
height: 10px;
margin: 9px 18px;
border-radius: 50%;
line-height:10px;
margin-right: 10px;
border: 1px solid red;
background: rgba(255,255,255,1);
float: left;
}
.container li.active{
border: 1px solid red;
background: rgba(255,0,0,1);
}
.container .arrow{
position: absolute;
top: 50%;
margin-top: -25px;
width: 30px;
height: 50px;
line-height: 50px;
font-size:30px;
background: rgba(255,255,255,0.4);
}
.container #leftArrow{
left: 0;
}
.container #rightArrow{
right: 0;
}
</style>
<body>
<div class="container">
<div class="imgBox">
<img src="imgPlay/dd_scroll_5.jpg" alt="图片1"/>
</div>
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li> 4 </li>
<li> 5 </li>
<li> 6</li>
</ul>
<div class="arrow" id="leftArrow"> < </div>
<div class="arrow" id="rightArrow"> > </div>
</div>
</body>
二、JavaScript实现
<script>
/* JavaScript 图片轮播： 1定时器设置自动循环播放 2 鼠标停在下方小圆点(Li标签)上显示对应下标的图片 3按钮点击显示对应上一张下一张图片
1.定时器设置自动循环播放：定时改变图片的src属性和对应的小圆点(Li标签)高亮突出样式
2.鼠标停在下方小圆点(Li标签)上显示对应下标的图片，一直悬停图片则不动（注意：鼠标悬停时定时器停止播放图片）
鼠标移出的时候开始定时器循环播放图片（注意：从悬停的图片的下一张开始播放，而不是原来定时器播放图片的顺序）
3.按钮点击显示当前图片对应上一张下一张图片*/
var srcArr= [ "imgPlay/dd_scroll_1.jpg","imgPlay/dd_scroll_2.jpg" ,
"imgPlay/dd_scroll_3.jpg","imgPlay/dd_scroll_4.jpg" ,
"imgPlay/dd_scroll_5.jpg","imgPlay/dd_scroll_6.jpg" ];
var img = document.getElementsByClassName("container")[0].getElementsByTagName("img")[0];
var arrLi = document.getElementsByClassName("container")[0].getElementsByTagName("li");
var arrArrow = document.getElementsByClassName("container")[0].getElementsByClassName("arrow");
//Li自定义下标
for( var i = 0 ;i<arrLi.length ;i++) {
arrLi[i].index = i;
}
//初始化
var lastActiveLi =null;
var activeIndex = 0;
img.src = srcArr[ activeIndex ] ;
arrLi[ activeIndex].className="active";
lastActiveLi = arrLi[ activeIndex];
img.timer = null;
//滚动1：开启定时器图片滚动
img.timer =window.setInterval( function(){
lastActiveLi.className="";
activeIndex= (++activeIndex) % srcArr.length ;
img.src = srcArr[ activeIndex ] ;
arrLi[ activeIndex].className="active";
lastActiveLi = arrLi[ activeIndex];
} ,1000);
//滚动2：鼠标在li上移入移出
for( var i = 0 ;i<arrLi.length ;i++){
arrLi[i].onmouseover = function(){
lastActiveLi.className="";
activeIndex=this.index ;
img.src = srcArr[ activeIndex ] ;
arrLi[ activeIndex].className="active";
lastActiveLi = arrLi[ activeIndex];
window.clearInterval( img.timer );
};
arrLi[i].onmouseout = function(){
img.timer =window.setInterval( function(){
lastActiveLi.className="";
activeIndex= (++activeIndex) % srcArr.length ;
img.src = srcArr[ activeIndex ] ;
arrLi[ activeIndex].className="active";
lastActiveLi = arrLi[ activeIndex];
} ,1000);
};
}
//滚动3：点击左右箭头 上一张 下一张图片
arrArrow[0].onclick = function(){
lastActiveLi.className="";
activeIndex= (--activeIndex +srcArr.length) % srcArr.length ;
img.src = srcArr[ activeIndex ] ;
arrLi[ activeIndex].className="active";
lastActiveLi = arrLi[ activeIndex];
}
arrArrow[1].onclick = function(){
lastActiveLi.className="";
activeIndex= (++activeIndex ) % srcArr.length ;
img.src = srcArr[ activeIndex ] ;
arrLi[ activeIndex].className="active";
lastActiveLi = arrLi[ activeIndex];
}
</script>
三、JavaScript函数封装
var srcArr= [ "imgPlay/dd_scroll_1.jpg","imgPlay/dd_scroll_2.jpg" ,
"imgPlay/dd_scroll_3.jpg","imgPlay/dd_scroll_4.jpg" ,
"imgPlay/dd_scroll_5.jpg","imgPlay/dd_scroll_6.jpg" ];
var img = document.getElementsByClassName("container")[0].getElementsByTagName("img")[0];
var arrLi = document.getElementsByClassName("container")[0].getElementsByTagName("li");
var arrArrow = document.getElementsByClassName("container")[0].getElementsByClassName("arrow");
//自定义函数
function playImg( activeIndex ){
lastActiveLi.className="";
img.src = srcArr[ activeIndex ] ;
arrLi[ activeIndex].className="active";
lastActiveLi = arrLi[ activeIndex];
}
//Li自定义下标
for( var i = 0 ;i<arrLi.length ;i++) {
arrLi[i].index = i;
}
//初始化
var lastActiveLi =null;
var activeIndex = 0;
img.src = srcArr[ activeIndex ] ;
arrLi[ activeIndex].className="active";
lastActiveLi = arrLi[ activeIndex];
img.timer = null;
//滚动1：开启定时器图片滚动
img.timer =window.setInterval( function(){
activeIndex= (++activeIndex) % srcArr.length ;
playImg( activeIndex );
} ,1000);
//滚动2：鼠标在li上移入移出
for( var i = 0 ;i<arrLi.length ;i++){
arrLi[i].onmouseover = function(){
activeIndex=this.index ;
playImg( activeIndex );
window.clearInterval( img.timer );
};
arrLi[i].onmouseout = function(){
img.timer =window.setInterval( function(){
activeIndex= (++activeIndex) % srcArr.length ;
playImg( activeIndex );
} ,1000);
};
}
//滚动3：点击左右箭头 上一张 下一张图片
arrArrow[0].onclick = function(){
activeIndex= (--activeIndex +srcArr.length) % srcArr.length ;
playImg( activeIndex );
}
arrArrow[1].onclick = function(){
activeIndex= (++activeIndex ) % srcArr.length ;
playImg( activeIndex );
}
