向左轮播滑动

最新推荐文章于 2021-06-04 21:01:14 发布

Zoe_Wang_ing

最新推荐文章于 2021-06-04 21:01:14 发布

阅读量786

点赞数

分类专栏： js 文章标签： swipe

js 专栏收录该内容

70 篇文章 0 订阅

订阅专栏

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

<!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].οnclick=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].οnmοuseοut=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();

//轮播图 me
function 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.οnclick=function(){
           if(iNow<len-1){
                iNow++;
                oSwipe.style.left=-(uls[0].offsetWidth*iNow)+'px';
            } 
        }
        oL.οnclick=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();
    
}

Zoe_Wang_ing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
向左轮播滑动

忘记从哪里看到的了，自己学习后的实例，存个档 demo*{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-
复制链接

扫一扫