向左轮播滑动

来源：互联网发布：黑暗网络进入方法编辑：程序博客网时间：2024/05/16 23:33

忘记从哪里看到的了，自己学习后的实例，存个档

<!DOCTYPE HTML><html><head>  <meta http-equiv="content-type" charset="utf-8" />    <meta http-equiv="content-type" content="text/html" />    <title>demo</title></head><style type="text/css">*{margin:0;padding:0;}ul,li,img{margin:0;padding:0;border:0;list-style-type:none;}#list{height:250px;list-style-type:none;overflow:hidden;}#luanpo{max-width:600px;height:200px;border:1px solid #CCC;margin:0 auto;position:relative;overflow:hidden;}#imgs li{float:left;height:200px;width:600px;}#imgs{height:200px;background:#ddd;position:absolute;}.a{background:red;}.b{background:yellow;}#num{overflow:auto;position:absolute;right:0;bottom:0;}#num li{float:left;height:30px;width:30px;text-align:center;line-height:30px;border:1px solid #CCC;margin-left:10px;cursor:pointer;z-index:2222;}/*me*/#swipebox{    max-width:600px;    overflow:hidden;    position:relative;    height:105px;    background: #fff;}#swipe{    display:block;    position:absolute;    left:0;    transition: left 2s;}#swipe ul{    width:600px;    margin:0;    float:left;}#swipe a{    z-index:10;}</style><body>    <div id="luanpo">        <ul id="imgs">            <li>a</li>            <li>b</li>            <li>c</li>            <li>d</li>        </ul>        <ul id="num">            <li class="a">1</li>            <li class="b">2</li>            <li class="b">3</li>            <li class="b">4</li>        </ul>    </div>    <!-- me -->    <a href="javascript:;" class="icon-angle-left" id="left"> 《 </a>    <a href="javascript:;" class="icon-angle-right" id="right"> 》 </a>    <div id="swipebox">        <div id="swipe">            <ul>                <li class="period">                    <i class="order">1</i> 预热期 <span class="date">2015.04.01-2015.05.01</span>                </li>            </ul>            <ul>                <li class="period">                    <i class="order">2</i> 众筹期 <span class="date">2015.04.01-2015.05.01</span>                </li>                            </ul>            <ul>                <li class="period">                    <i class="order">3</i> 建设期 <span class="date">2015.04.01-2015.05.01</span>                </li>                            </ul>                    </div>    </div>    <!-- /me --><script type="text/javascript">var imgs=document.getElementById('imgs').getElementsByTagName('li');var nums=document.getElementById("num").getElementsByTagName("li");var luanpo=document.getElementById("luanpo");var oimg=document.getElementById('imgs');var iNow=0;var dt=null;oimg.style.width=imgs.length*imgs[0].offsetWidth+"px";function tab(){    for(var i=0;i<nums.length;i++){        nums[i].index=i;        nums[i].onclick=function(){            clearInterval(dt);            iNow=this.index;            for(var i=0;i<nums.length;i++){                nums[i].className="b";                    }            this.className="a";            oimg.style.left=-(imgs[0].offsetWidth*iNow)+"px";    //这边可以加上我前面所写的那个缓动框架                    }        nums[i].onmouseout=function(){                start();        }    }}function start(){　　clearInterval(dt);    dt=setInterval(function(){        if(iNow>nums.length-2){            console.log(nums.length-2);            iNow=0;        }else{            iNow++;        }        for(var k=0;k<nums.length;k++){            if(iNow==nums[k].index){nums[k].className='a';}else{nums[k].className='b';}        }        oimg.style.left=-(imgs[0].offsetWidth*iNow)+"px";    //这边可以加上我前面所写的那个缓动框架    },3000);    tab();}start();//轮播图 mefunction fnSwipe(){    var uls = document.getElementById('swipe').getElementsByTagName('ul'),        oSwipe = document.getElementById('swipe'), len = uls.length,        oR = document.getElementById('right'),        oL = document.getElementById('left'),        iNow=0, dt=null;    oSwipe.style.width=uls.length*uls[0].offsetWidth+'px';        // function fnStart(){    //     clearInterval(dt);    //     dt=setInterval(function(){    //         if(iNow>len-2){    //             iNow = 0;    //         }else{    //             iNow++;    //         }    //         oSwipe.style.left=-(uls[0].offsetWidth*iNow)+'px';    //     },3000)            // }        function fnTab(){        oR.onclick=function(){           if(iNow<len-1){                iNow++;                oSwipe.style.left=-(uls[0].offsetWidth*iNow)+'px';            }         }        oL.onclick=function(){            if(iNow>0){                iNow--;                oSwipe.style.left=-(uls[0].offsetWidth*iNow)+'px';            }        }           }    fnTab();    }fnSwipe();</script></body></html>

//轮播图function fnSwipe(){    var uls = document.getElementById('swipe').getElementsByTagName('ul'),        oSwipe = document.getElementById('swipe'), len = uls.length,        iWid = document.body.scrollWidth,        oR = $('#right'),        oL = $('#left'),        iNow=0, dt=null;    oSwipe.style.width=len*iWid+'px';    //确定屏幕宽度    if(iWid <= 320) iWid = 320    else if(iWid >= 640) iWid = 640    // 给每一个轮播的宽度赋值      for(var i = 0; i < len; i++){        uls[i].style.width = iWid+'px';    }    function fnTab(){        oR.on('tap',function(){            if(iNow<len-1){                iNow++;                oSwipe.style.left=-(iWid*iNow)+'px';            }        })        oL.on('tap',function(){            if(iNow>0){                iNow--;                oSwipe.style.left=-(iWid*iNow)+'px';            }        })    }    fnTab();    }

0 0