JavaScript實(shí)現(xiàn)輪播圖特效

更新時(shí)間：2020年04月10日 15:47:43 作者：外號(hào)班長(zhǎng)

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)輪播圖特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)輪播圖特效的具體代碼，供大家參考，具體內(nèi)容如下

功能：

1、圖片會(huì)自動(dòng)播放，鼠標(biāo)放上面會(huì)暫停播放

2、點(diǎn)擊左右出現(xiàn)的箭頭可以切換到上一張/下一張圖片

3、點(diǎn)擊序號(hào)會(huì)跳轉(zhuǎn)到對(duì)應(yīng)圖片

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <title>當(dāng)當(dāng)網(wǎng)首頁(yè)輪播圖-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;
  }
  /*下面利用偽元素實(shí)現(xiàn)左側(cè)和右側(cè)的小箭頭*/
  #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>圖片會(huì)自動(dòng)播放，鼠標(biāo)放上面會(huì)暫停播放</li>
  <li>點(diǎn)擊左右出現(xiàn)的箭頭可以切換到上一張/下一張圖片</li>
  <li>點(diǎn)擊序號(hào)會(huì)跳轉(zhuǎn)到對(duì)應(yīng)圖片</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(){//計(jì)時(shí)器
  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.οnmοuseοver=function(){//鼠標(biāo)放到圖片上時(shí)圖片停止播放
  pics.style.cursor="pointer";
  clearInterval(counter);//清除計(jì)時(shí)器
  }
  pics.οnmοuseοut=change;
 }
 //鼠標(biāo)放到指定序號(hào)切換到指定圖片
 for (var i=0;i<lists.length;i++){
  lists[i].id=i;
  lists[i].οnmοuseοver=function(){
  img(this.id);
  this.className='on';
  }
 }
 //當(dāng)鼠標(biāo)放在箭頭上時(shí)，點(diǎn)擊箭頭切換到下一張圖片
 point_l.οnmοusedοwn=function(){//點(diǎn)擊左邊箭頭
  if(index<=0){
   index=lists.length;
  }
  img(index-1);
 }
 point_r.οnmοusedοwn=function(){//點(diǎn)擊右邊箭頭
  if (index>=lists.length-1){
  index=-1;
  }
  img(index+1);
 }
 </script>
</body>
 
</html>

效果圖