JS實現(xiàn)焦點圖輪播效果的方法詳解
更新時間：2016年12月19日 11:44:07 作者：鬼畜十三
這篇文章主要介紹了JS實現(xiàn)焦點圖輪播效果的方法,結合實例形式詳細分析了JS焦點圖輪播效果的原理、實現(xiàn)步驟與相關操作技巧,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)焦點圖輪播效果的方法。分享給大家供大家參考，具體如下：
效果圖如下：
一、所用到的知識點
1.DOM操作
2.定時器
3.事件運用
4.Js動畫
5.函數(shù)遞歸
6.無限滾動大法
二、結構和樣式
<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;，否則這里動不起來
}
prev.onclick=function(){
list_banner.style.left=parseInt(list_banner.style.left)+624+'px';
}
}
2.左右按鈕點擊的兩句話很像，封裝成函數(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.無限滾動
①假圖的做法
即圖片為412341，小于最后一張位置的時候，回到第一張的位置，大于 第一張位置的時候，拉到最后一張的位置
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.小圓點跟著左右按鈕切換
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.點擊小圓點圖片滾動及小圓點切換
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();
}
}
①點自己的時候不執(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>
關鍵是要取到點擊的是第幾張圖片，不能直接var myIndex=this.index;因為index是自定義屬性，dom自帶屬性可以通過點來獲取，自定義屬性不行，.getAttribute（）既可以獲取自定義屬性，又可以獲取dom自帶屬性
③更新index值，index=myIndex;
6.動畫函數(shù)（有一個漸變的運動過程）
function animate(offset){
animated=true;
var newLeft=parseInt(list_banner.style.left)+offset;
var time=300; //位移總時間
var interval=30; //位移間隔時間
var speed=offset/(time/interval); //每次移動距離
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目標值
list_banner.style.left=parseInt(list_banner.style.left)+speed+'px';
setTimeout(go,interval); //不止做一次運動（go函數(shù)），每隔30毫秒前進一下
}
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);
}
}
}
①一個函數(shù)不停地在一個條件后調用自身，這種做法就叫做遞歸，這里通過遞歸可以實現(xiàn)animate這個函數(shù)的動畫效果
②不停點就意味著不停調用animate函數(shù)，可能會造成卡頓，圖片亂刷，需要優(yōu)化，引進變量animated
7.自動播放
function autoplay(){
timer=setInterval(function(){
next.onclick();
},1000)
}
function stopautoplay(){
clearInterval(timer);
}
banner.onmouseover=stopautoplay;
banner.onmouseout=autoplay;
autoplay();
setTimeout只執(zhí)行一次，之前一直執(zhí)行，是因為遞歸
setInterval是每隔多少時間
8.假圖的優(yōu)化
實際運用中，圖片肯定是按順序存放，所以假圖最好通過js來生成，而不是本身寫在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é)點添加到目標的最后一個子節(jié)點之后
insertBefore是將新的節(jié)點添加到已存在的子節(jié)點之前
cloneNode方法，true表示深克隆，false表示淺克隆，深克隆是將標簽和標簽里的內容都復制過來，而淺克隆不復制內容
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
全面兼容的javascript時間格式化函數(shù)(比較實用)
這篇文章主要介紹了全面兼容比較實用的javascript時間格式化函數(shù),需要的朋友可以參考下2014-05-05
javascript Array.prototype.slice使用說明
slice 可以用來獲取數(shù)組片段，它返回新數(shù)組，不會修改原數(shù)組。2010-10-10
這篇文章主要介紹了簡單談談JavaScript的同步與異步的相關資料,需要的朋友可以參考下2015-12-12
這篇文章主要為大家介紹了JS瀏覽器的首屏白屏時間計算示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要為大家詳細介紹了原生js實現(xiàn)tab選項卡，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
一個模塊就是實現(xiàn)特定功能的文件，有了模塊，我們就可以更方便地使用別人的代碼，想要什么功能，就加載什么模塊。模塊開發(fā)需要遵循一定的規(guī)范，否則就都亂套了2016-12-12
這篇文章主要介紹了JavaScript簡單下拉菜單,采用JavaScript定時函數(shù)遞歸調用實現(xiàn)菜單漸顯效果,非常簡單實用,需要的朋友可以參考下2015-09-09
大家仔細看下面兩段代碼，代碼一的window.onload = doIt()函數(shù)后面有();而代碼二的window.onload = doIt函數(shù)名后面沒有括號。2008-09-09
這篇文章介紹了JS異步的執(zhí)行順序，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
javascript中setAttribute兼容性用法分析
這篇文章主要介紹了javascript中setAttribute兼容性用法,結合實例形式分析了javascript使用setAttribute進行屬性設置操作的相關使用技巧,需要的朋友可以參考下2016-12-12