JS實(shí)現(xiàn)焦點(diǎn)圖輪播效果的方法詳解

更新時(shí)間：2016年12月19日 11:44:07 作者：鬼畜十三

這篇文章主要介紹了JS實(shí)現(xiàn)焦點(diǎn)圖輪播效果的方法,結(jié)合實(shí)例形式詳細(xì)分析了JS焦點(diǎn)圖輪播效果的原理、實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)焦點(diǎn)圖輪播效果的方法。分享給大家供大家參考，具體如下：

效果圖如下：

一、所用到的知識(shí)點(diǎn)

1.DOM操作

2.定時(shí)器

3.事件運(yùn)用

4.Js動(dòng)畫(huà)

5.函數(shù)遞歸

6.無(wú)限滾動(dòng)大法

二、結(jié)構(gòu)和樣式

<div id="banner" class="banner">
  <ul id="list-banner" class="list-banner fn-clear" style="left:-624px;">
      <li><a href="#"><img src="images/banner4.jpg" width="624" height="200" alt="" title="" /></a></li>
      <li><a href="#"><img src="images/banner1.jpg" width="624" height="200" alt="" title="" /></a></li>
      <li><a href="#"><img src="images/banner2.jpg" width="624" height="200" alt="" title="" /></a></li>
      <li><a href="#"><img src="images/banner3.jpg" width="624" height="200" alt="" title="" /></a></li>
      <li><a href="#"><img src="images/banner4.jpg" width="624" height="200" alt="" title="" /></a></li>
      <li><a href="#"><img src="images/banner1.jpg" width="624" height="200" alt="" title="" /></a></li>
  </ul>
  <div class="list-num-wp">
    <div id="list-num" class="list-num fn-clear">
      <a href="#" class="hover"></a>
      <a href="#"></a>
      <a href="#"></a>
      <a href="#"></a>
    </div>
  </div>
  <div class="left">
    <a id="left" href="#"></a>
  </div>
  <div class="right">
    <a id="right" href="#"></a>
  </div>
</div>

.banner{position:relative;width:624px;height:200px;overflow:hidden;}
.banner .list-banner{position:absolute;width:5000px;}
.banner .list-banner li{float:left;width:624px;height:200px;}
.banner .list-num-wp{position:absolute;bottom:7px;width:624px;height:11px;}
.banner .list-num{width:100px;margin:0 auto;}
.banner .list-num a{display:inline;float:left;width:11px;height:11px;margin:0 7px; background:url(../images/list-num.png) no-repeat;}
.banner .list-num a:hover{background:url(../images/list-num-hover.png));}
.banner .list-num a.hover{background:url(../images/list-num-hover.png);}
.banner .left a{display:block;position:absolute;width:49px;height:49px;top:75px;left:4px;background:url(../images/arrow.gif) 0 0;filter: Alpha(opacity=50);-moz-opacity:.5;opacity:0.5;}
.banner .right a{display:block;position:absolute;width:49px;height:49px;top:75px;right:4px;background:url(../images/arrow.gif) 0 -49px;filter: Alpha(opacity=50);-moz-opacity:.5;opacity:0.5;}

三、腳本思路

1.先左右按鈕功能

window.onload=function(){
  var prev=document.getElementById("left");
  var next=document.getElementById("right");
  var list_banner=document.getElementById("list-banner");
  next.onclick=function(){
    list_banner.style.left=parseInt(list_banner.style.left)-624+'px';  //注：html上的ul要加行間樣式left:0;，否則這里動(dòng)不起來(lái)
  }
  prev.onclick=function(){
    list_banner.style.left=parseInt(list_banner.style.left)+624+'px';
  }
}

2.左右按鈕點(diǎn)擊的兩句話(huà)很像，封裝成函數(shù)

function animate(offset){
    list_banner.style.left=parseInt(list_banner.style.left)+offset+'px';
}
next.onclick=function(){
    animate(-624);
}
prev.onclick=function(){
    animate(624);
}

3.無(wú)限滾動(dòng)

①假圖的做法

即圖片為412341，小于最后一張位置的時(shí)候，回到第一張的位置，大于第一張位置的時(shí)候，拉到最后一張的位置

function animate(offset){
  var newLeft=parseInt(list_banner.style.left)+offset;
  list_banner.style.left=newLeft+'px';
  if(newLeft<-2496){
    list_banner.style.left=-624+"px";
  }
  if(newLeft>-624){
    list_banner.style.left=-2496+"px";
  }
}

4.小圓點(diǎn)跟著左右按鈕切換

var index=1;
function showDot(){
  for(var i=0;i<list_num.length;i++){
    list_num[i].className="";
  }
  list_num[index-1].className="hover";
}
next.onclick=function(){
  animate(-624);
  index++;
  if(index>4){
    index=1;
  }
  showDot();
}
prev.onclick=function(){
  animate(624);
  index--;
  if(index<1){
    index=4;
  }
  showDot();
}

5.點(diǎn)擊小圓點(diǎn)圖片滾動(dòng)及小圓點(diǎn)切換

for(var i=0;i<list_num.length;i++){
  list_num[i].onclick=function(){
    if(this.className=="hover"){
      return;
    }
    var myIndex=parseInt(this.getAttribute("index"));
    var offset=-624*(myIndex-index);
    index=myIndex;
    animate(offset);
    showDot();
  }
}

①點(diǎn)自己的時(shí)候不執(zhí)行下列代碼

②

<div class="list-num-wp">
    <div id="list-num" class="list-num fn-clear">
      <a index="1" href="#" class="hover"></a>
      <a index="2" href="#"></a>
      <a index="3" href="#"></a>
      <a index="4" href="#"></a>
    </div>
</div>

關(guān)鍵是要取到點(diǎn)擊的是第幾張圖片，不能直接var myIndex=this.index;因?yàn)閕ndex是自定義屬性，dom自帶屬性可以通過(guò)點(diǎn)來(lái)獲取，自定義屬性不行，.getAttribute（）既可以獲取自定義屬性，又可以獲取dom自帶屬性

③更新index值，index=myIndex;

6.動(dòng)畫(huà)函數(shù)（有一個(gè)漸變的運(yùn)動(dòng)過(guò)程）

function animate(offset){
    animated=true;
    var newLeft=parseInt(list_banner.style.left)+offset;
    var time=300;     //位移總時(shí)間
    var interval=30;    //位移間隔時(shí)間
    var speed=offset/(time/interval);    //每次移動(dòng)距離
    speed=speed>0?Math.ceil(speed):Math.floor(speed);    //可能存在小數(shù)，取整
    function go(){
      if((speed < 0 && parseInt(list_banner.style.left)>newLeft)||(speed>0&&parseInt(list_banner.style.left)<newLeft)){   //newLeft目標(biāo)值
        list_banner.style.left=parseInt(list_banner.style.left)+speed+'px';
        setTimeout(go,interval);  //不止做一次運(yùn)動(dòng)（go函數(shù)），每隔30毫秒前進(jìn)一下
      }
      else{
        animated=false;
        list_banner.style.left=newLeft+'px';
        if(newLeft<-2496){
          list_banner.style.left=-624+"px";
        }
        if(newLeft>-624){
          list_banner.style.left=-2496+"px";
        }
      }
    }
    go();
}
next.onclick=function(){
    if(!animated){
      index++;
    }
    if(index>4){
      index=1;
    }
    showDot();
    if(!animated){
      animate(-624);
    }
}
prev.onclick=function(){
    if(!animated){
      index--;
    }
    if(index<1){
      index=4;
    }
    showDot();
    if(!animated){
      animate(624);
    }
}
for(var i=0;i<list_num.length;i++){
    list_num[i].onclick=function(){
      if(this.className=="hover"){
        return;
      }
      var myIndex=parseInt(this.getAttribute("index"));
      var offset=-624*(myIndex-index);
      index=myIndex;
      showDot();
      if(!animated){
        animate(offset);
      }
    }
}

①一個(gè)函數(shù)不停地在一個(gè)條件后調(diào)用自身，這種做法就叫做遞歸，這里通過(guò)遞歸可以實(shí)現(xiàn)animate這個(gè)函數(shù)的動(dòng)畫(huà)效果

②不停點(diǎn)就意味著不停調(diào)用animate函數(shù)，可能會(huì)造成卡頓，圖片亂刷，需要優(yōu)化，引進(jìn)變量animated

7.自動(dòng)播放

function autoplay(){
    timer=setInterval(function(){
      next.onclick();
    },1000)
}
function stopautoplay(){
    clearInterval(timer);
}
banner.onmouseover=stopautoplay;
banner.onmouseout=autoplay;
autoplay();

setTimeout只執(zhí)行一次，之前一直執(zhí)行，是因?yàn)檫f歸

setInterval是每隔多少時(shí)間

8.假圖的優(yōu)化

實(shí)際運(yùn)用中，圖片肯定是按順序存放，所以假圖最好通過(guò)js來(lái)生成，而不是本身寫(xiě)在html上

var img_first=list_banner.getElementsByTagName("li")[0];
var img_last=list_banner.getElementsByTagName("li")[3];
list_banner.appendChild(img_first.cloneNode(true));
list_banner.insertBefore(img_last.cloneNode(true),list_banner.getElementsByTagName("li")[0]);

appendChild是將新的節(jié)點(diǎn)添加到目標(biāo)的最后一個(gè)子節(jié)點(diǎn)之后

insertBefore是將新的節(jié)點(diǎn)添加到已存在的子節(jié)點(diǎn)之前

cloneNode方法，true表示深克隆，false表示淺克隆，深克隆是將標(biāo)簽和標(biāo)簽里的內(nèi)容都復(fù)制過(guò)來(lái)，而淺克隆不復(fù)制內(nèi)容

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: