功能：
1、圖片會自動播放，鼠標放上面會暫停播放
2、點擊左右出現的箭頭可以切換到上一張/下一張圖片
3、點擊序號會跳轉到對應圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>噹噹網首頁輪播圖-By小黑</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
#wrap{
margin: 50px auto;
width: 800px;
height: 330px;
overflow: hidden;
position: relative;
}
#list{
position: absolute;
bottom: 15px;
right: 250px;
}
#list li{
float: left;
margin-right: 15px;
cursor: pointer;
width: 23px;
height: 23px;
line-height: 23px;
text-align: center;
background: #ADA79D;
color: #FFF ;
border-radius: 50%;
}
#list .on{
background: red;
}
#bar_left,#bar_right{
width: 33px;
height: 80px;
line-height: 80px;
position: absolute;
top: 130px;
background: rgba(0, 0, 0, 0.3);
}
#bar_left{
left: -33px;
}
#bar_right{
right: -35px;
}
/*下面利用僞元素實現左側和右側的小箭頭*/
#bar_left:after,#bar_left:before,#bar_right:before,#bar_right:after{
content: "";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
position: absolute;
top: 25px;
}
/*左邊箭頭*/
#bar_left:before{
border-left: 15px solid transparent;
border-right: 15px solid #FFF;
right: 10px;
}
#bar_left:after{
border-left: 15px solid transparent;
border-right: 15px solid rgba(0, 0, 0, 0.3);
right: 7px;
}
/*右邊箭頭*/
#bar_right:before{
border-right: 15px solid transparent;
border-left: 15px solid #FFF;
left: 10px;
}
#bar_right:after{
border-right: 15px solid transparent;
border-left: 15px solid rgba(0, 0, 0, 0.3);
left: 7px;
}
#wrap:hover #bar_left{
left: 0;
cursor: pointer;
transition: left 0.5s;
}
#wrap:hover #bar_right{
/* display: block; */
right: 5px;
cursor: pointer;
transition: right 0.5s;
}
.tex{
margin: 20px auto;
width: 400px;
}
.tex ul li{
list-style-type:circle;
color: red;
font-weight: bold;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="pic">
<li><img src="images/dang1.jpg" alt=""></li>
<li><img src="images/dang2.jpg" alt=""></li>
<li><img src="images/dang3.jpg" alt=""></li>
<li><img src="images/dang4.jpg" alt=""></li>
<li><img src="images/dang5.jpg" alt=""></li>
<li><img src="images/dang6.jpg" alt=""></li>
<li><img src="images/dang7.jpg" alt=""></li>
<li><img src="images/dang8.jpg" alt=""></li>
</ul>
<div id="bar_left"></div>
<div id="bar_right"></div>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ol>
</div>
<div class="tex">
<ul>
<li>功能如下：</li>
<li>圖片會自動播放，鼠標放上面會暫停播放</li>
<li>點擊左右出現的箭頭可以切換到上一張/下一張圖片</li>
<li>點擊序號會跳轉到對應圖片</li>
</ul>
</div>
<script>
var wrap=document.getElementById('wrap');
var pics=document.getElementById('pic');
var lists=document.getElementById('list').getElementsByTagName('li');
var point_l=document.getElementById('bar_left');
var point_r=document.getElementById('bar_right');
var index=0;
var counter=null;
function change(){//計時器
counter=setInterval(function(){
index++;
if(index===lists.length){
index=0;
}
img(index);
},2000)
}
change();
function img(curIndex){//切換圖片
for (var i=0;i<lists.length;i++){
if(curIndex===i){
lists[i].className='on';
}
else{
lists[i].className='';
}
}
index=curIndex;
pics.style.marginTop=-330*curIndex+'px';//圖片上移
wrap.onmouseover=function(){//鼠標放到圖片上時圖片停止播放
pics.style.cursor="pointer";
clearInterval(counter);//清除計時器
}
pics.onmouseout=change;
}
//鼠標放到指定序號切換到指定圖片
for (var i=0;i<lists.length;i++){
lists[i].id=i;
lists[i].onmouseover=function(){
img(this.id);
this.className='on';
}
}
//當鼠標放在箭頭上時，點擊箭頭切換到下一張圖片
point_l.onmousedown=function(){//點擊左邊箭頭
if(index<=0){
index=lists.length;
}
img(index-1);
}
point_r.onmousedown=function(){//點擊右邊箭頭
if (index>=lists.length-1){
index=-1;
}
img(index+1);
}
</script>
</body>
</html>
效果圖
