• <em id="w2sng"><object id="w2sng"><u id="w2sng"></u></object></em>

  • <rp id="w2sng"></rp>
  • 徐州酷優網絡 開啟企業建站營銷新時代  站長學院 Loading
    熱線:0516-83703228
    您現在的位置:首頁 > 站長學院 > 建站資訊 > 建站、設計教程 > 幻燈片和輪播圖

    js文字圖片輪播效果代碼

    作者:eycms 日期:2016/2/16 17:30:59 人氣:92

      

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w.org/1999/xhtml">

    <head>

    <title>js文字圖片輪播</title>

    <style type="text/css">

    <!--

    * {margin:0; padding:0; font-size:12px;}

    ul,li { list-style:none;}

    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

    .clearfix{zoom:1;}

    #dd { width:303px; height:80px; margin:50px auto 0 auto; border:1px solid #ccc; border-right:none; overflow:hidden;}

    #dd li { float:left; width:50px; height:80px; overflow:hidden;border-right:1px solid #ccc;}

    #dd li span { width:50px; display:inline-block;  text-align:center; line-height:80px;}

    #dd li  p { width:150px; display:inline-block;}

    #dd li.on { width:200px;}

    #ii { width:303px;  margin:5px auto 0 auto;}

    #ii li { float:left; width:10px; height:10px; margin:0 1px; background:#ccc; text-align:center; line-height:10px; cursor:pointer;}

    #ii li.on{ background:#6CF;}

    -->

    </style>

    </head>

    <body>

    <ul id="dd" class="clearfix">

    <li><span>表一</span><p>戶籍管理<br />權益</p></li>

    <li><span>表二</span><p>戶籍管理<br />權益</p></li>

    <li><span>表三</span><p>戶籍管理<br />權益</p></li>

    </ul>

    <ul id="ii" class="clearfix">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    </ul>

    <script type="text/javascript">

    <!--

    function newSlider(){

    var dl=document.getElementById("dd").getElementsByTagName("li");

    var il=document.getElementById("ii").getElementsByTagName("li");

    var dlen = dl.length;

    var timer = null,index = 0,autoTime = 3000;

    //timer定時器,index當前顯示的是第幾個,autotime自動切換時間


    dl[0].className="on",il[0].className="on";


    //切換函數

    function play(j){

    index = j;

    stopAuto();//停止計時

    for (var i=0;i<dlen ;i++ ){

    dl[i].className="";

    il[i].className="";


    }

    dl[j].className="on";

    il[j].className="on";

    startAuto();//重新開始計時

    }


    //mouseover表切換

    for ( var i=0;i<dlen ;i++ ){

    dl[i].onmouseover=function(j){

    return function(){play(j);}

    }(i)

    }


    //click按鈕切換

    for ( var i=0;i<dlen ;i++ ){

    il[i].onclick=function(j){

    return function(){play(j);}

    }(i)

    }


    //自動切換開始

    function startAuto(){

    timer = setInterval(function(){

    index++;

    index = index>dlen-1?0:index;

    play(index);


    },autoTime);

    }

    //自動切換停止

    function stopAuto(){

    clearInterval(timer);

    }


    //啟動自動切換

    startAuto()


    }


    window.onload=function(){

    newSlider();

    }

    //-->

    </script>

    </body>

    </html></td>

     </tr>

    </table>


    回到頂部
    337p日本欧洲亚洲大胆人体在线|亚洲第八十八页夜|国产女王假阳虐男视频|天天摸天天做天天爽2020