欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

js實(shí)現(xiàn)自動(dòng)播放勻速輪播圖

本文實(shí)例為大家分享了js實(shí)現(xiàn)自動(dòng)播放勻速輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

為澄邁等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及澄邁網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、澄邁網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

函數(shù)封裝：（ 勻速運(yùn)動(dòng)函數(shù)）

function animate(obj,target,step,speed){
  clearInterval(obj.timer);
 var absStep = Math.abs(step); 
 step = target > obj.offsetLeft ? absStep : -absStep;
 obj.timer = setInterval(function(){
  var distance = Math.abs(target - obj.offsetLeft);
  obj.style.left = obj.offsetLeft + step + 'px';
  if(distance < absStep){
  clearInterval(obj.timer);
  obj.style.left = target + 'px';
  }
 },speed);
 }

對象可以動(dòng)態(tài)生成屬性，用對象的timer，避免了全局變量的使用，

實(shí)現(xiàn)步驟：

 1.動(dòng)態(tài)生成ol導(dǎo)航條，并將導(dǎo)航條放入all中使其成為孩子節(jié)點(diǎn)
 2.根據(jù)ul中圖片數(shù)量動(dòng)態(tài)生成li標(biāo)簽，使li成為ol的子節(jié)點(diǎn)，
 3.給第0個(gè)li標(biāo)簽加上顏色（添加屬性current）
 4.用設(shè)置的屬性的值去操作圖片使圖片移動(dòng)，達(dá)到鼠標(biāo)放上去移動(dòng)到該圖片效果，排它原理實(shí)現(xiàn)樣式效果
 5.深度克隆ul中的第一張圖片并將圖片放在ul的末尾
 6.加入自動(dòng)播放函數(shù)使其自動(dòng)播放，設(shè)置兩個(gè)變量key，squre，key的值用來計(jì)算圖片的序號(hào)，squre用來計(jì)算當(dāng)前l(fā)i的序號(hào)
 7.自動(dòng)播放函數(shù)中排他原理設(shè)置當(dāng)前l(fā)i標(biāo)簽樣式
 8.在設(shè)置onmouseover和onmouseout事件鼠標(biāo)放在盒子上暫停，鼠標(biāo)離開盒子，繼續(xù)運(yùn)動(dòng)
 9.在鼠標(biāo)放在li標(biāo)簽時(shí)讓key等于當(dāng)前圖片的index屬性值 ，并把key的值賦給squre。

實(shí)現(xiàn)細(xì)節(jié)：

1.動(dòng)態(tài)給ul克隆出第0張圖片補(bǔ)到末尾，以實(shí)現(xiàn)自動(dòng)輪播是無縫的效果，
2.克隆分深克隆和淺克隆，深克隆克隆帶標(biāo)簽內(nèi)的所有內(nèi)容，
3.淺克隆只克隆外部標(biāo)簽，深克隆參數(shù)為true

效果：

js實(shí)現(xiàn)自動(dòng)播放勻速輪播圖

代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>勻速輪播動(dòng)畫</title>
<style type="text/css">
 *{ padding:0; margin:0; list-style:none; border:0;}
 .all{
 width:500px;
 height:200px;
 padding:7px;
 border:1px solid #ccc;
 margin:100px auto;
 position:relative;
 }
 .screen{
 width:500px;
 height:200px;
 overflow:hidden; 
 position:relative;
 }

 .screen li{ 
 width:500px; 
 height:200px; 
 overflow:hidden; 
 float:left;
 }
 .screen ul{ 
 position:absolute;
 left:0; 
 top:0px;
 width:3000px;
 }
 .all ol{ 
 position:absolute; 
 right:10px; 
 bottom:10px;
 line-height:20px;
 text-align:center;
 }
 .all ol li{ 
 float:left; 
 width:20px; 
 height:20px; 
 background:#fff; 
 border:1px solid #ccc; 
 margin-left:10px; 
 cursor:pointer;
 }
 .all ol li.current{ 
 background:yellow;
 }
</style>
<script src="js/勻速運(yùn)動(dòng).js"></script>
<script>
 function $(id){
  return document.getElementById(id);
 }
 window.onload = function(){
  var ul = $('ul');
  var all = $('all');
  var imgs = ul.getElementsByTagName('img');
  var ol = document.createElement('ol');
  all.appendChild(ol);
  for(var i=0;i<imgs.length;i++){
   var li = document.createElement('li');
   li.innerHTML = i+1;
   li.setAttribute('index',i);
   ol.appendChild(li);
  }
  ol.childNodes[0].className = 'current';
 
  var olLis = ol.children;
  for(var i=0;i<olLis.length;i++){
   olLis[i].onmouseover = function(){
    for(var j=0;j<olLis.length;j++){
     olLis[j].className = '';
    }
    this.className = 'current';
    var index = -500*this.getAttribute('index');
    animate(ul,index,20,10);
    key=this.getAttribute('index');
    squre = key;
   }
  }

 ul.appendChild(ul.children[0].cloneNode(true));

  var timer=null;
  var key=0;
  var squre = 0;
  timer=setInterval(autoPlay, 1000);
   function autoPlay(){
   key++; //記錄圖片
   squre++;//記錄導(dǎo)航條
   if(key>olLis.length){
    key=1;
    ul.style.left = 0 + 'px';
   }
   if(squre>=olLis.length){
    squre = 0;
   }
   animate(ul,-500*key,20,10);
   for(var i=0;i<olLis.length;i++){
    olLis[i].className = '';
   }
   olLis[squre].className = 'current';
   }
   all.onmouseover = function(){
   clearInterval(timer);
   }
   all.onmouseout = function(){
  timer=setInterval(autoPlay, 1000);
   }
 }
</script>
</head>
<body>
<div class="all" id='all'>
 <div class="screen">
  <ul id="ul">
   <li><img src="images/taobao/1.jpg" width="500" height="200" /></li>
   <li><img src="images/taobao/2.jpg" width="500" height="200" /></li>
   <li><img src="images/taobao/3.jpg" width="500" height="200" /></li>
   <li><img src="images/taobao/4.jpg" width="500" height="200" /></li>
   <li><img src="images/taobao/5.jpg" width="500" height="200" /></li>
  </ul>
 </div>

</div>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文題目：js實(shí)現(xiàn)自動(dòng)播放勻速輪播圖
標(biāo)題URL：http://chinadenli.net/article34/pgjgpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、手機(jī)網(wǎng)站建設(shè)、外貿(mào)建站、自適應(yīng)網(wǎng)站、云服務(wù)器、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司