JavaScript焦點圖輪播效果詳解

admin發表於2018-08-11
JavaScript

通過簡單程式碼例項介紹一下如何利用原生JavaScript實現焦點圖效果。

程式碼比較簡單，主要目的是讓初學者對基本的操作有所掌握。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wrap {
  height: 170px;
  width: 490px;
  position: relative;
  margin: 100px auto;
}
.wrap ol {
  position: absolute;
  right: 5px;
  bottom: 10px;
}
.wrap ol li {
  height: 20px;
  width: 20px;
  background: #ccc;
  border: solid 1px #666;
  margin-left: 5px;
  color: #000;
  float: left;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
}
.wrap ol .on {
  background: #E97305;
  color: #fff;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var pic=document.getElementById('pic').getElementsByTagName('li');
  var list=document.getElementById('list').getElementsByTagName('li');
  var index=0;
  var timer=null;
 
  for (var x = 0; x < pic.length; x++) {
    list[x].id = x;
    pic[x].id = x;
    list[x].onmouseover = function () {
      clearInterval(timer);
      changeImg(this.id)
    }
    list[x].onmouseout = function () {
      index=this.id;
      autoChange(index);
    }
 
    document.getElementById('pic').onmouseout=function(){
      autoChange(index);
    }
    document.getElementById('pic').onmouseover=function(){
      clearInterval(timer);
    }
  }
  autoChange(index);
 
  function changeImg(id){
    for(var j=0;j<list.length;j++){
      list[j].className='';
      pic[j].style.display='none';
    }
    list[id].className='on';
    pic[id].style.display='block';
  }
 
  function autoChange(index){
    timer=setInterval(function(){
      index++;
      if(index>=pic.length){
        index=0;
      }
      changeImg(index);
    },1000)
  }
}
</script>
</head>
<body>
<div class="wrap" id='wrap'>
  <ul id="pic">
    <li><img src="demo/js/img/Lone.jpg" alt=""></li>
    <li style="display: none;"><img src="demo/js/img/Ltwo.jpg"></li>
    <li style="display: none;"><img src="demo/js/img/Lthree.jpg"></li>
    <li style="display: none;"><img src="demo/js/img/Lfour.jpg"></li>
    <li style="display: none;"><img src="demo/js/img/Lfive.jpg"></li>
  </ul>
  <ol id="list">
    <li class="on">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ol>
</div>
</body>
</html>

程式碼實現了簡單的焦點圖效果，下面介紹一下它的實現過程。

一.程式碼註釋: 

[CSS] 純文字檢視 複製程式碼
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

對元素的一些樣式屬性進行重置。

這裡是將所有元素的內邊距和外邊距設定為0，並且去掉列表前面的樣式，比如預設的黑點。 

[CSS] 純文字檢視 複製程式碼
.wrap {
  height: 170px;
  width: 490px;
  position: relative;
  margin: 100px auto;
}

設定輪播圖容器的尺寸。

同時設定其為相對定位，並水平居中。 

[CSS] 純文字檢視 複製程式碼
.wrap ol {
  position: absolute;
  right: 5px;
  bottom: 10px;
}

設定底部數字按鈕容器的位置。 

[CSS] 純文字檢視 複製程式碼
.wrap ol li {
  height: 20px;
  width: 20px;
  background: #ccc;
  border: solid 1px #666;
  margin-left: 5px;
  color: #000;
  float: left;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
}

設定數字按鈕的相關樣樣式，比如尺寸，字型顏色，邊框，內部文字的對齊方式等。 

[CSS] 純文字檢視 複製程式碼
.wrap ol .on {
  background: #E97305;
  color: #fff;
}

設定當前啟用狀態的數字按鈕的樣式。 

[JavaScript] 純文字檢視 複製程式碼
window.onload=function(){
  //code
}

當文件內容完全載入完畢再去執行函式中的程式碼。 

[JavaScript] 純文字檢視 複製程式碼
var pic=document.getElementById('pic').getElementsByTagName('li');
var list=document.getElementById('list').getElementsByTagName('li');
var index=0;
var timer=null;

獲取li元素列表，和宣告一些變數在後面將會用到。 

[JavaScript] 純文字檢視 複製程式碼
for (var x = 0; x < pic.length; x++) {
  //code
}

通過for迴圈進行批量操作。 

[JavaScript] 純文字檢視 複製程式碼
list[x].id = x;
pic[x].id = x;

設定對應元素的id屬性值。 

[JavaScript] 純文字檢視 複製程式碼
list[x].onmouseover = function () {
  clearInterval(timer);
  changeImg(this.id)
}

為數字按鈕註冊onmouseover事件處理函式。

當滑鼠懸浮，會停止定時器函式的執行，那麼也就停止了自動輪播效果。

同時將當前懸浮的按鈕啟用，同時當前顯示的圖片也會切換為對應索引的圖片。 

[JavaScript] 純文字檢視 複製程式碼
list[x].onmouseout = function () {
  index=this.id;
  autoChange(index);
}

為數字按鈕註冊onmouseout事件處理函式。

將當前數字按鈕的id屬性值賦值給變數index。

autoChange(index)從當前位置開始自動輪播，比如滑鼠從第2個數字按鈕離開，那麼自動輪播就從第二個按鈕和第二個圖片開始。 

[JavaScript] 純文字檢視 複製程式碼
document.getElementById('pic').onmouseout=function(){
  autoChange(index);
}
document.getElementById('pic').onmouseover=function(){
  clearInterval(timer);
}

為圖片容器註冊事件處理函式。

規定滑鼠懸浮停止輪播，滑鼠離開繼續輪播。 

[JavaScript] 純文字檢視 複製程式碼
autoChange(index);

開始自動輪播。 

[JavaScript] 純文字檢視 複製程式碼
function changeImg(id){
  for(var j=0;j<list.length;j++){
    list[j].className='';
    pic[j].style.display='none';
  }
  list[id].className='on';
  pic[id].style.display='block';
}

此函式實現了切換啟用位置的功能。

比如引數是2，那就是將id屬性值為2的數字按鈕和圖片作為當前啟用的狀態。 

[JavaScript] 純文字檢視 複製程式碼
function autoChange(index){
  timer=setInterval(function(){
    index++;
    if(index>=pic.length){
      index=0;
    }
    changeImg(index);
  },1000)
}

通過定時器函式，實現了自動輪播效果。

二.相關閱讀:

（1）.getElementsByTagName()可以參閱document.getElementsByTagName()一章節。

（2）.onmouseover可以參閱javascript mouseover事件一章節。

（3）.clearInterval()可以參閱clearInterval()一章節。

（4）.onmouseout可以參閱javascript mouseout事件一章節。

（5）.className可以參閱js className一章節。

相關文章