亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

javascript實(shí)現(xiàn)淘寶幻燈片廣告展示效果

 更新時(shí)間：2015年04月27日 09:04:54   作者：親愛(ài)的漢尼拔  
這篇文章主要介紹了javascript實(shí)現(xiàn)淘寶幻燈片廣告展示效果的方法,以實(shí)例形式完整講述了javascript實(shí)現(xiàn)幻燈效果的javascript、css及html實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript實(shí)現(xiàn)淘寶幻燈片廣告展示效果的方法。分享給大家供大家參考。具體如下：

一、效果圖如下：

二、代碼部分：

JS代碼部分：

function getClass(oParent,name){ 
  var arr=[]; 
  var oBj=oParent.getElementsByTagName("*"); 
  for(var i=0;i<oBj.length;i++){ 
    if(oBj[i].className==name){ 
      arr.push(oBj[i]); 
    } 
  } 
  return arr; 
} 
function startmove(obj,json,fnEnd){ 
  var cur=0; 
  clearInterval(obj.timer); 
  obj.timer=setInterval(function(){ 
    var oStop=true; 
    for(var attr in json){ 
      if(attr=='opacity'){ 
        cur=Math.round(parseFloat(getStyle(obj,attr)*100)); 
      }else{ 
        cur=parseInt(getStyle(obj,attr)); 
      } 
      var speed=(json[attr]-cur)/10; 
      speed=speed>0?Math.ceil(speed):Math.floor(speed); 
      if(cur!=json[attr]){ 
        oStop=false; 
      } 
      if(attr=='opacity'){ 
        obj.style[attr]=(cur+speed)/100; 
        obj.style.filter="alpha(opacity:"+cur+speed+")"; 
      }else{ 
        obj.style[attr]=cur+speed+"px"; 
      } 
    } 
    if(oStop){ 
      clearInterval(obj.timer); 
      if(fnEnd)fnEnd(); 
    } 
  },30); 
 
}; 
function getStyle(obj,name){ 
  if(obj.currentStyle){ 
    return obj.currentStyle[name]; 
  }else{
    return getComputedStyle(obj,false)[name]; 
  }
};

CSS部分：

*{ margin: 0px; padding: 0px; } 
img{ 
border: none; width: 470px; height: 150px;
float: left;
} 
.pic_body li{
width: 470px; height: 150px;
float: left; z-index: 3001; } 
ul{
 list-style: none; position: absolute; top: 0px; left: 0px;
 width: 470px; height: 150px; background: yellow; z-index: 3000;
} 
#div1{ border: 1px solid black; width: 470px; height: 150px;
 position: relative; margin: 100px auto; padding: 0px;
 overflow: hidden;
} 
#div1 ol{ bottom: 10px; right: 10px; 
position: absolute; z-index: 9999; 
} 
ol li{ background: yellow; float: left; 
display: inline; margin-right: 3px; padding: 3px 4px;
position: relative; top: 0px; left: 0px;
font-family: arial; font-size: 12px;
cursor: pointer; filter: alpha(opacity:60); opacity: 0.6;
border: 1px solid black;
} 
.active{ background: yellow; font-weight: bolder;
padding: 4px 6px; filter: alpha(opacity:100); opacity: 1;
}

HTML部分：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
  <meta charset="UTF-8"> 
  <title></title> 
  <link href="css.css" rel="stylesheet" type="text/css"> 
  <script src="myscript.js"></script> 
  <script> 
    window.onload=function() { 
      var now = 0; 
      var oDiv = document.getElementById('div1'); 
      var oOl = oDiv.getElementsByTagName('ol')[0]; 
      var oLi = oOl.getElementsByTagName('li'); 
      var oUl = getClass(oDiv, 'pic_body')[0]; 
      for(var i=0;i<oLi.length;i++){ 
        oLi[i].index=i; 
        oLi[i].onclick=function(){ 
          now=this.index; 
          tab(); 
        }; 
      } 
      function tab(){ 
        for(var i=0;i<oLi.length;i++){ 
          oLi[i].className=''; 
        } 
        oLi[now].className='active'; 
        startmove(oUl,{top:-150*now}); 
      }; 
      function next(){ 
        now++; 
        if(now==oLi.length){ 
          now=0; 
        } 
        tab(); 
      }; 
      var timer=setInterval(next,3000); 
      oUl.onmouseover=function(){ 
        clearInterval(timer); 
      }; 
      oUl.onmouseout=function(){ 
        timer=setInterval(next,3000); 
      }; 
    } 
  </script> 
</head> 
<body> 
<div id="div1"> 
  <ol> 
    <li class="active">1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
  </ol> 
  <ul class="pic_body"> 
    <li><img src="image/1.jpg"></li> 
    <li><img src="image/2.jpg"></li> 
    <li><img src="image/3.jpg"></li> 
    <li><img src="image/4.jpg"></li> 
    <li><img src="image/5.jpg"></li> 
  </ul> 
</div> 
</body> 
</html>

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

相關(guān)文章

  • JS閉包可被利用的常見(jiàn)場(chǎng)景小結(jié)

    JS閉包可被利用的常見(jiàn)場(chǎng)景小結(jié)

    閉包的一個(gè)通常的用法是為一個(gè)在某一函數(shù)執(zhí)行前先執(zhí)行的函數(shù)提供參數(shù)。例如，在web環(huán)境中，一個(gè)函數(shù)作為setTimeout函數(shù)調(diào)用的第一個(gè)參數(shù)，是一種很常見(jiàn)的應(yīng)用
    2017-04-04
  • JavaScript多圖片上傳案例

    JavaScript多圖片上傳案例

    JS上傳多圖片例子，為了更人性化，不要固定初始化時(shí)的個(gè)數(shù)，可以通過(guò)由用戶決定上傳圖片的個(gè)數(shù)，即是動(dòng)態(tài)地創(chuàng)建上傳圖片文框和按鈕的個(gè)數(shù)，感興趣的小伙伴們可以參考一下
    2015-09-09
  • 基于javascript實(shí)現(xiàn)checkbox復(fù)選框?qū)嵗a

    基于javascript實(shí)現(xiàn)checkbox復(fù)選框?qū)嵗a

    這篇文章主要介紹了基于javascript實(shí)現(xiàn)checkbox復(fù)選框?qū)嵗a，感興趣的小伙伴們可以參考一下
    2016-01-01
  • JS帶你深入領(lǐng)略Proxy的世界

    JS帶你深入領(lǐng)略Proxy的世界

    Proxy是es2015 標(biāo)準(zhǔn)規(guī)范加入的語(yǔ)法，很可能你只是聽(tīng)說(shuō)過(guò)，但并沒(méi)有用過(guò)，畢竟考慮到兼容的問(wèn)題，不能輕易地使用Proxy特性。但現(xiàn)在隨著各個(gè)瀏覽器的更新迭代，Proxy的支持度也越來(lái)越高：而且使用Proxy進(jìn)行代理和劫持，也漸漸成為了趨勢(shì)。
    2021-05-05
  • 手機(jī)端 HTML5使用photoswipe.js仿微信朋友圈圖片放大效果

    手機(jī)端 HTML5使用photoswipe.js仿微信朋友圈圖片放大效果

    這篇文章主要為大家詳細(xì)介紹了移動(dòng)web HTML5使用photoswipe模仿微信朋友圈圖片放大瀏覽，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-08-08
  • JS數(shù)組方法reverse()用法實(shí)例分析

    JS數(shù)組方法reverse()用法實(shí)例分析

    這篇文章主要介紹了JS數(shù)組方法reverse()用法,結(jié)合實(shí)例形式分析了JS數(shù)組reverse()方法基本功能、用法與操作注意事項(xiàng),需要的朋友可以參考下
    2020-01-01
  • js讀寫(xiě)COOKIE實(shí)現(xiàn)記住帳號(hào)或密碼的代碼(js讀寫(xiě)COOKIE)

    js讀寫(xiě)COOKIE實(shí)現(xiàn)記住帳號(hào)或密碼的代碼(js讀寫(xiě)COOKIE)

    js實(shí)現(xiàn)記住帳號(hào)或密碼(js讀寫(xiě)COOKIE) 的實(shí)現(xiàn)代碼，原理就是利用cookies保存于讀取功能。
    2010-05-05
  • 簡(jiǎn)單了解微信小程序的目錄結(jié)構(gòu)

    簡(jiǎn)單了解微信小程序的目錄結(jié)構(gòu)

    這篇文章主要介紹了簡(jiǎn)單了解小程序的目錄結(jié)構(gòu)，在開(kāi)發(fā)小程序之前，我們首先需要對(duì)其目錄結(jié)構(gòu)進(jìn)行了解，以便于提升開(kāi)發(fā)效率,需要的朋友可以參考下
    2019-07-07
  • YUI Compressor壓縮JavaScript原理及微優(yōu)化

    YUI Compressor壓縮JavaScript原理及微優(yōu)化

    最近寫(xiě)一個(gè)jQuery插件，在最后完成優(yōu)化時(shí)，對(duì)比發(fā)現(xiàn)壓縮后文件比較大，就思考那些是可以被修改和優(yōu)化的，發(fā)現(xiàn)壓縮原理也有很大的空間可以學(xué)習(xí)
    2013-01-01
  • uni-app?app引入天地圖簡(jiǎn)單代碼示例

    uni-app?app引入天地圖簡(jiǎn)單代碼示例

    uni-app是一種基于Vue.js的跨平臺(tái)開(kāi)發(fā)框架,允許開(kāi)發(fā)者使用統(tǒng)一的代碼編寫(xiě)多端應(yīng)用,這篇文章主要給大家介紹了關(guān)于uni-app?app引入天地圖的相關(guān)資料,需要的朋友可以參考下
    2024-02-02

最新評(píng)論