• jquery 移动端轮播图


    <div class="slide">
        <div class="slide-box">
            <ul class="slide-ul">
                <li><a href="" title="1111"><img src="http://www.heibaipig.com/demo/images/test/1.jpg"></a></li>
                <li><a href="" title="2222"><img src="http://0.thumb.pc6.com/up/2016-5/20165199297.jpg"></a></li>
                <li><a href="" title="33333"><img src="http://0.thumb.pc6.com/up/2016-4/201642814841.jpg"></a></li>
                <li><a href="" title="44444"><img src="http://m.pc6.com/public/img/20151202.jpg"></a></li>
            </ul>
        </div>
        <div class="title-box"><p class="title">1111</p><span class="circle"><em class="active"></em><em></em><em></em><em></em></span></div>
    </div>
    *{ padding:0; margin:0;}
    /*.slide{position:relative}
    .slide-box{height:100%; margin:0 auto;position:relative; overflow:hidden}
    .slide ul{ position:absolute; left:0; top:0; 100%; min-height:160px;}
    .slide ul li{ float:left; list-style:none; position:relative}
    .slide ul li img{ 100%; height:100%;}*/
    
    /* focus_pic */
    .slide{clear:both;position:relative;z-index:0;width:100%;max-width:960px;max-height:480px;margin:0 auto 0.3em auto;overflow:hidden;}
    .slide-box{ width:100%;height:100%; margin:0 auto;position:relative; overflow:hidden}
    .slide .slide-ul{position:absolute;z-index:1;left:0;width:10000px;}
    .slide .slide-ul li{float:left;display:block;}
    .slide .slide-ul li img{display:block;width:100%;height:100%;}
    .slide .title-box{ width:90%; padding:0 5%; z-index:999; height:30px; line-height:30px; color:#fff; font-size:14px; background:rgba(0,0,0,.5); position:absolute; left:0; bottom:0;}
    .slide .circle{ float:right;}
    .slide .title{ float:left; display:inline-block;}
    .slide .circle em{ display:inline-block; width:5px; height:5px; margin-left:5px; background-color:#fff; border-radius:50%;}
    .slide .circle .active{ background-color:#f00}
    <script>
    //自适应
    function sizeShow(){
        var pic_w=$(window).width();
        var pic_h=pic_w*0.5;
        $(".slide").height(pic_h);
        $(".slide li").width(pic_w).height(pic_h);
        $(".slide ul").width(pic_w*4)
    };
    
    function scrollAuto(){
        sizeShow();
        $(window).resize(function(){sizeShow()});
        var oclass=$(".slide");
        var w=oclass.find("li").width();
        var iNow = 0, index = 1, timer = null;
        var touch={
                "s":[],
                "m":[],
                "e":[],
                "d":""
            };
        
        oclass[0].addEventListener('touchstart', function(e){
            touch.s[0] = e.targetTouches[0].pageX;
            touch.s[1] = e.targetTouches[0].pageY;
            touch.s[2] = (new Date()).getTime();
            clearInterval(timer)
        }, false);
        
        oclass[0].addEventListener('touchmove', function(e){
            var a=Math.abs(e.targetTouches[0].pageX-touch.s[0])
            var b=Math.abs(e.targetTouches[0].pageY-touch.s[1]);
            console.log("dMove:"+touch.d)
            if(a>=b && touch.d==""){
                touch.d=1;//左右
                //touch.m[0]=touch.s[0]
            }else if(touch.d==""){
                touch.d=0;//上下或者偏上下
            }
            console.log(a+":::"+b)
            if(touch.d==1){//左右滚动
               e.preventDefault();
                $(".slide ul").css({"left":-iNow*w+e.targetTouches[0].pageX-touch.s[0]});
               // touch.m[0]=e.targetTouches[0].pageX;
                //touch.m[1]=e.targetTouches[0].pageY;
            }
            
        }, false);
        
        oclass[0].addEventListener('touchend', function(e){
            console.log("dEnd:"+touch.d)
            if(touch.d==1){
                if((new Date()).getTime()-touch.s[2]>700){
                    if(e.changedTouches[0].pageX-touch.s[0]>w/3){
                        auto("right")
                    }else if(touch.s[0]-e.changedTouches[0].pageX>w/3){
                        auto("left")
                    }else{
                        auto("reset")
                    }
                }else{
                    if(e.changedTouches[0].pageX>touch.s[0]){
                        auto("right");
                    }else if(touch.s[0]>e.changedTouches[0].pageX){
                        auto("left")
                    }
                }
            }
            touch.d="";
            timer=setInterval(function(){
                if(iNow>=$(".slide li").length-1){
                    iNow=0;
                }else{
                    iNow++
                }
                $(".slide ul").animate({"left":-w*iNow})
                $(".circle em").eq(iNow).addClass("active").siblings().removeClass("active");
                $(".title-box .title").html($(".slide li").eq(iNow).find("a").attr("title"))
            },3000);
            
        }, false);
        
        function auto(c){
            if(c=="left"){
                if(iNow>=$(".slide li").length-1){
                    iNow=$(".slide li").length-1
                }else{
                    iNow++
                }
                console.log(iNow)
                $(".slide ul").animate({"left":-w*iNow})
            }else if(c=="right"){
                if(iNow<=0){
                    iNow=0
                }else{
                    iNow--
                }
                $(".slide ul").animate({"left":-w*iNow})
            }else if(c=="reset"){
                $(".slide ul").animate({"left":-w*iNow})
            }
            $(".circle em").eq(iNow).addClass("active").siblings().removeClass("active");
            $(".title-box .title").html($(".slide li").eq(iNow).find("a").attr("title"))
        };
        
        timer=setInterval(function(){
            if(iNow>=$(".slide li").length-1){
                iNow=0;
            }else{
                iNow++
            }
            $(".slide ul").animate({"left":-w*iNow})
            $(".circle em").eq(iNow).addClass("active").siblings().removeClass("active");
            $(".title-box .title").html($(".slide li").eq(iNow).find("a").attr("title"))
        },3000);
        
    }
    $(function(){
        scrollAuto();
    })
    
    
    </script>

    实现效果:

  • 相关阅读:
    CODE
    JS中如何进行对象的深拷贝
    js数组操作---改变原数组和不改变原数组的方法整理
    echarts做双柱图
    如何在react中使用OrgChart?
    如何让背景透明?
    如何使用css选择器隐藏滚动条?
    input 修改placeholder中颜色和字体大小
    在input、textarea 标签的placeholder中实现换行的方法
    React Hooks异步操作防踩坑指南
  • 原文地址:https://www.cnblogs.com/cainiaoz/p/5788016.html
Copyright © 2020-2023  润新知