九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

打開APP
userphoto
未登錄

開通VIP，暢享免費電子書等14項超值服

開通VIP

首頁

好書

留言交流

下載APP

聯(lián)系客服
Js+CSS輪顯效果
  • 自已寫的JavaScript輪顯切換效果，雖然還不是十分完美，但作為自己的一點小成就奉獻(xiàn)給大家，示例里的文字可以換成圖片，這樣圖片切換的效果就出來了。
    •  
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>JS圖片輪顯切換</title>
    <style type="text/css">
    *{ margin:0; padding:0}
    #wapper{ position:relative;height:280px; width:316px; overflow:hidden}
    #slideshow{width:316px; height:300px; overflow:hidden; position:relative;}
    #imglist{width:1264px; height:100%; float:left; padding:0; margin:0;position:absolute; left:0}
    #imglist li{ width:25%;height:100%; float:left}
    #nextlist{position:absolute; z-index:9}
    #nextlist li{ float:left; display:inline; height:30px; padding:10px 0; width:79px;}
    #nextlist li.current{background:#c00}
    #bg{ position:absolute; z-index:1;background:#ff0;filter:alpha(opacity=20);opacity:0.2; height:50px; width:316px}
    </style>
    </head>
    <body>
    <div id="wapper">
    <div id="slideshow">
    <ul id="imglist">
    <li style=" background:#f0c;">1</li>
    <li style=" background:#cf0;">2</li>
    <li style=" background:#09e;">3</li>
    <li style=" background:#efc;">4</li>
    </ul>
    </div>
    <div id="nextlist">
    <ul>
    <li class="current">111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    </ul>
    </div>
    <div id="bg"></div>
    </div>
    <script type="text/javascript">
    var num = 0;
    function nextElement(eleObj,aa){
    var obj = document.getElementById(eleObj);
      if (obj.movement) {
        clearTimeout(obj.movement);
      }
     if (!obj.style.bottom) {
         obj.style.bottom = "-50px";
     }
     var xpos = parseInt(obj.style.bottom);
       if (xpos == aa) {
      return false;
      }
       if (xpos > aa) {
      var dist = Math.ceil((xpos - aa)/5);
      xpos = xpos - dist;
       }
      if (xpos < aa) {
      var dist = Math.ceil((aa - xpos)/5);
      xpos = xpos + dist;
       }
       obj.style.bottom = xpos + "px";
     
     
      var repeat = "nextElement('"+eleObj+"','"+aa+"')";
      obj.movement = setTimeout(repeat,30);
    }
    function moveElement() {
    var elem = document.getElementById("slideshow");
    var nextElem = document.getElementById("nextlist");
    var imgElem = document.getElementById("imglist");
    var lis = elem.getElementsByTagName("li");
    var nextLis = nextElem.getElementsByTagName("li");
     
      if (imgElem.movement) {
        clearTimeout(imgElem.movement);
      }
      if (!imgElem.style.left) {
        imgElem.style.left = "0";
      }
       var xpos = parseInt(imgElem.style.left);
       var naa = num * -316;
       if (xpos == naa) {
       if(num==(lis.length - 1) || num>lis.length){
        num=0;
        return false;
       }
       else{
        num++;
        return false;
       }
      }
     for(var i=0;i<nextLis.length;i++){
      nextLis[i].className="";
      nextLis[num].className="current";
     }
       if (xpos > naa) {
      var dist = Math.ceil((xpos - naa)/4);
      xpos = xpos - dist;
       }
      if (xpos < naa) {
      var dist = Math.ceil((naa - xpos)/4);
      xpos = xpos + dist;
       }
       imgElem.style.left = xpos + "px";
     
     
      var repeat = "moveElement()";
      imgElem.movement = setTimeout(repeat,30);
     
    }
    function checkMove(){
    var elem = document.getElementById("slideshow");
    var nextElem = document.getElementById("nextlist");
    var imgElem = document.getElementById("imglist");
    var bgElem = document.getElementById("wapper");
    var lis = elem.getElementsByTagName("li");
    var nextLis = nextElem.getElementsByTagName("li");
      bgElem.onmouseover=function(){
       nextElement("nextlist",0);
       nextElement("bg",0);
      }
      bgElem.onmouseout=function(){
       nextElement("nextlist",-50);
       nextElement("bg",-50);
      }
     for(var i=0;i<nextLis.length;i++){
      
      nextLis[i].onmouseover=function(){
       clearInterval(changebox);
       thisMove(this);
      }
      nextLis[i].onmouseout=function(){
       startMove();
      }
      lis[i].onmouseover=function(){
       clearInterval(changebox);
       //thisStop(this);
      }
      lis[i].onmouseout=function(){
       startMove();
      }
     }
     function startMove(){
      changebox = setInterval("moveElement()",4000);
     }
     function thisMove(obj){
      for(var i=0;i<nextLis.length;i++){
       nextLis[i].className="";
       if(nextLis[i]==obj){
        nextLis[i].className="current";
        num=i;
        setTimeout("moveElement()",0);
       }
       else{
         nextLis[i].className="";
       }
      }
     }
    }
    changebox = setInterval("moveElement()",4000);
    checkMove();
    </script>
    </body>
    </html>
    打開APP，閱讀全文并永久保存 查看更多類似文章
    猜你喜歡
    類似文章
    掃地雷游戲demo
    MPBrowser簡易圖片瀏覽器 v1.0
    簡單的原生js輪播圖
    【圖片特效】Js版淘寶圖片切換，類似相冊播放效果
    網(wǎng)頁浮動特效代碼
    *javascript 節(jié)點nodeName,nodeValue,nodeType,childNodes,removeChile,appendChild
    更多類似文章 >>
    生活服務(wù)
    熱點新聞
    分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
    綁定賬號成功
    后續(xù)可登錄賬號暢享VIP特權(quán)！
    如果VIP功能使用有故障，
    可點擊這里聯(lián)系客服！

    聯(lián)系客服