zoukankan      html  css  js  c++  java
  • 用jq实现移动端滑动轮播以及定时轮播效果

    Html的代码:

    <div class="carousel_img">
        <div class="car_img" style="background:url(files/DocMatchImg_1.png) no-repeat;background-size:cover;background-position:center;">
        </div>
        <div class="car_img" style="background:url(files/DocMatchImg_2.png) no-repeat;background-size:cover;background-position:center;">
        </div>
        <div class="car_img" style="background:url(files/DocMatchImg_1.png) no-repeat;background-size:cover;background-position:center;">
        </div>
        <div class="car_img" style="background:url(files/DocMatchImg_2.png) no-repeat;background-size:cover;background-position:center;">
        </div>
        <div class="car_img" style="background:url(files/DocMatchImg_2.png) no-repeat;background-size:cover;background-position:center;">
        </div>
        
        <div class="carousel_index">
            <div class="carousel_icon carousel_icon1"></div>
            <div class="carousel_icon carousel_icon2"></div>
            <div class="carousel_icon carousel_icon2"></div>
            <div class="carousel_icon carousel_icon2"></div>
            <div class="carousel_icon carousel_icon2"></div>
        </div>
    </div>
    

    css代码:

    .carousel_img{100%;position:relative;top:0;left:0;overflow:hidden;height:200px;}
    .car_img{100%;height:200px;position:absolute;top:0;left:0;}
    .carousel_index{position:absolute;top:180px;right:0;padding-right:24px;height:12px;}
    .carousel_icon{12px;height:12px;float:left;}
    .carousel_icon1{background:url(../image/DovmatchWhite.png) no-repeat;background-size:8px;background-position:center center;}
    .carousel_icon2{background:url(../image/DovmatchGrey.png) no-repeat;background-size:8px;background-position:center center;}
    

    jq代码:

    $(document).ready(function(e) {
        var imgObj = document.getElementsByClassName("car_img");
        var imgLen = imgObj.length;
        var windowWidth = $(window).width();
        $(".car_img").bind("click",function(event){
            
        });
        int = setInterval(carouselImg,3000);
        for(var i=0;i<imgLen;i++){
            $(".car_img").eq(i).css({"top":"0","left":i*windowWidth});
            imgObj[i].addEventListener('touchstart',touchstart,false);
            imgObj[i].addEventListener('touchmove',touchmove,false);
            imgObj[i].addEventListener('touchend',touchend,false);
        }
        
    });
    
    function touchstart(event){
        event.preventDefault();
        if( event.targetTouches.length == 1 )
        {
            clearInterval(int);
            var touch = event.targetTouches[0];
            pressX = touch.pageX;
        }
    }
    
    /*
     *定义每次滑动的距离spanX
     *定义当前滑动的索引位置thisIndex,轮播图的个数imgLen
     */
    function touchmove(event){
        event.preventDefault();
        
        if( event.targetTouches.length == 1 )
        {
            var touch = event.targetTouches[0];
            var spanX = touch.pageX - pressX ,
                windowWidth = $(window).width();
            var $car_img = $(".car_img"),
                $this = $(this);
            var thisIndex = $this.index(),
                imgLen = $(".car_img").length;
            for(var i=0;i < imgLen;i++){
                $car_img.eq(i).css("left",windowWidth*(i-thisIndex)+spanX);
            }
            
        }
    }
    
    function touchend(event){
        var $car_img = $(".car_img"),
            $this = $(this),
            $carousel_icon = $(".carousel_icon"),
            windowWidth = $(window).width();
        var thisIndex = $this.index(),
            imgLen = $(".car_img").length;
        var thisLeft = parseInt($(this).css("left"));
        //向左滑动执行的方法
        if(thisLeft < -32 && thisIndex < imgLen){
            //当轮播图滑动最后一个位置时,当前轮播图位置不变
            if(thisIndex == imgLen-1){
                for(var i=0;i < imgLen;i++){
                    $car_img.eq(i).animate({"left":windowWidth*(i-thisIndex)},300);
                    
                }
            }
            //当轮播不在最后一个位置时,轮播图位置变化方法
            else{
                for(var i=0;i < imgLen;i++){
                    $car_img.eq(i).animate({"left":windowWidth*(i-(thisIndex+1))},300);
                    $carousel_icon.eq(i).addClass("carousel_icon2").removeClass("carousel_icon1");
                }
                $carousel_icon.eq(thisIndex+1).removeClass("carousel_icon2").addClass("carousel_icon1");
            }
            
        }
        //向右滑动执行的方法
        else if(thisLeft > 32 && thisIndex >= 0){
            //当轮播图在第一个位置时
            if( thisIndex == 0){
                for(var i=0;i < imgLen;i++){
                    $car_img.eq(i).animate({"left":windowWidth*(i-thisIndex)},300);
                }
            }
            //轮播图不在第一个位置
            else{
                for(var i=0;i < imgLen;i++){
                    $car_img.eq(i).animate({"left":windowWidth*(i-(thisIndex-1))},300);
                    $carousel_icon.eq(i).addClass("carousel_icon2").removeClass("carousel_icon1");
                }
                $carousel_icon.eq(thisIndex-1).removeClass("carousel_icon2").addClass("carousel_icon1");
            }
        }
        //当滑动距离在大于-32px并且小于32px时,当前轮播图位置不变
        else{
            for(var i=0;i < imgLen;i++){
                $car_img.eq(i).animate({"left":windowWidth*(i-thisIndex)},100);
            }
        }
        int = setInterval(carouselImg,3000);
    }
    
    function carouselImg(){
        var $car_img = $(".car_img"),
            $carousel_icon = $(".carousel_icon"),
            windowWidth = $(window).width();
        var imgLen = $car_img.length,
            imgZeroIndex = 0;
        for(var i=0;i<imgLen;i++){
            var everyImgLeft = parseInt($car_img.eq(i).css("left"));
            if(everyImgLeft == 0){
                imgZeroIndex = i;
                break;
            }    
            
        } 
        if(imgZeroIndex == imgLen-1){
            for(var i=0;i<imgLen;i++){
                $car_img.eq(i).animate({"left":windowWidth*i},300);
                $carousel_icon.eq(i).removeClass("carousel_icon1").addClass("carousel_icon2");
            }
            $carousel_icon.eq(0).removeClass("carousel_icon2").addClass("carousel_icon1");
        }
        else{
            for(var i=0;i<imgLen;i++){
                $car_img.eq(i).animate({"left":windowWidth*(i-(imgZeroIndex+1))},300);
                $carousel_icon.eq(i).removeClass("carousel_icon1").addClass("carousel_icon2");
            }
            $carousel_icon.eq(imgZeroIndex+1).removeClass("carousel_icon2").addClass("carousel_icon1");
        }
    }
    

    代码有缺陷,其中touchstart函数中点击开始的X坐标pressX不用全局变量该怎么表示?还有int这样的一个全局变量,没有解决好,有大神可以指正下。

    展示效果图
    clipboard.png

  • 相关阅读:
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    《EffectiveJava中文第二版》 高清PDF下载
    《MoreEffectiveC++中文版》 pdf 下载
    《啊哈c语言》 高清 PDF 下载
  • 原文地址:https://www.cnblogs.com/10manongit/p/12654954.html
Copyright © 2011-2022 走看看