移动端轮播图

矫情吗；* 2022-10-25 14:04 181阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70]

<link type="text/css" href="https://img1.tiancitycdn.com/mobile/mhyh/homepage/20170516/css/jquery.bxslider.css">
    <script>
      window.use_screen_base = '750';
    </script>
    <div id="slide" class="slide" class="index-slide" alt="star">
    	
    	<div class="img"><img src="https://img1.tiancitycdn.com/cls/event/2020/cs0724ld/images2/sp_1.jpg"/></div>
    	<div class="img"><img src="https://img1.tiancitycdn.com/cls/event/2020/cs0724ld/images2/sp_2.jpg"/></div>
    	<div class="img"><img src="https://img1.tiancitycdn.com/cls/event/2020/cs0724ld/images2/sp_3.jpg"/></div>
    	<div class="img"><img src="https://img1.tiancitycdn.com/cls/event/2020/cs0724ld/images2/sp_4.jpg"/></div>
    	<div class="slide-bt" style="display: none;"></div>
    	<a href="javascript:;" class="a_left" onclick="left()"></a>
    	<a href="javascript:;" class="a_right" onclick="right()"></a>
    </div>
    <script src="https://img1.tiancitycdn.com/mobile/yzgj/event/2016/20161227/m/js/jquery-1.7.2.min.js"></script>
    <script src="https://img1.tiancitycdn.com/mobile/yzgj/event/2016/20161227/m/js/rem_screen.js"></script>
    <script src="https://img1.tiancitycdn.com/mobile/yzgj/event/2016/20161227/m/js/common-1.2.2.min.js"></script>
    <script src="https://img1.tiancitycdn.com/mobile/mhyh/homepage/20170516/js/jquery.bxslider.js"></script>
    <script src="https://img1.tiancitycdn.com/project1/csol/event/2019/10/cs191021sale/js/dialog.min.js"></script>
    <script src="https://img1.tiancitycdn.com/k1/2016/sign/js/newlawyer.js"></script>
    <style type="text/css">
    /*特色滑动*/
    .slide{ width:100%;min-height:4rem;overflow:hidden;position:relative;top:0rem;left:0;}
    .slide .img{ overflow:hidden;position:absolute;transition:width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s; -moz-transition:width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s; -webkit-transition:width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s; -o-transition:width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s; -ms-transition:width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s;text-align:center;}
    .slide .img img{ width:100%;}
    .slide .img1 { width:40%;height:40%;top:30%;left:-40%;z-index:1;opacity:0.1; background-size:40% 40%;}
    .slide .img2 { width:60%;height:72%;top:12%;left:-50%;z-index:2;opacity:0.6; background-size:60% 72%;}
    .slide .img3 { width:80%;height:100%;top:0;left:10%;z-index:3; background-size:80% 100%;}
    .slide .img4 { width:60%;height:72%;top:12%;left:90%;z-index:2;opacity:0.6; background-size:60% 72%;}
    .slide .img5 { width:40%;height:40%;top:30%;left:100%;z-index:1;opacity:0.1; background-size:40% 40%;}
    *{ box-shadow:0px 0px 0px 1px #fff;}
    </style>
    <script>
    $(function(){ 
    	//特色滑动
    	$(".slide").height($(".slide").width()*0.1);
        slideNub = $(".slide .img").size();             //获取轮播图片数量
        for(i=0;i<slideNub;i++){ 
            $(".slide .img:eq("+i+")").attr("data-slide-imgId",i);
        }
        //根据轮播图片数量设定图片位置对应的class
        if(slideNub==1){ 
            for(i=0;i<slideNub;i++){ 
                $(".slide .img:eq("+i+")").addClass("img3");
            }
        }
        if(slideNub==2){ 
            for(i=0;i<slideNub;i++){ 
                $(".slide .img:eq("+i+")").addClass("img"+(i+3));
            }
        }
        if(slideNub==3){ 
            for(i=0;i<slideNub;i++){ 
                $(".slide .img:eq("+i+")").addClass("img"+(i+2));
            }
        }
        if(slideNub>3&&slideNub<6){ 
            for(i=0;i<slideNub;i++){ 
                $(".slide .img:eq("+i+")").addClass("img"+(i+1));
            }
        }
        if(slideNub>=6){ 
            for(i=0;i<slideNub;i++){ 
                if(i<5){ 
                   $(".slide .img:eq("+i+")").addClass("img"+(i+1));
                }else{ 
                    $(".slide .img:eq("+i+")").addClass("img5");
                }
            }
        }
        //根据轮播图片数量设定轮播图按钮数量
        if(slideBt){ 
            for(i=1;i<=slideNub;i++){ 
                $(".slide-bt").append("<span data-slide-bt='"+i+"' οnclick='tz("+i+")'></span>");
            }
            $(".slide-bt").width(slideNub*34);
            $(".slide-bt").css("margin-left","-"+slideNub*17+"px");
        }
        //自动轮播
        if(autoLb){ 
            setInterval(function(){ 
            	right();
        	}, autoLbtime*1000);
        }
        if(touch){ 
            k_touch();
        }
        slideLi();
        imgClickFy();
    });
    var autoLb = false;          //autoLb=true为开启自动轮播
    var autoLbtime = 2;         //autoLbtime为轮播间隔时间（单位秒）
    var touch = true;           //touch=true为开启触摸滑动
    var slideBt = true;         //slideBt=true为开启滚动按钮
    var slideNub;               //轮播图片数量
    //窗口大小改变时改变轮播图宽高
    $(window).resize(function(){ 
       $(".slide").height($(".slide").width()*0.56);
    });
    //右滑动
    function right(){ 
        var fy = new Array();
        for(i=0;i<slideNub;i++){ 
            fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
        }
        for(i=0;i<slideNub;i++){ 
            if(i==0){ 
                $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[slideNub-1]);
            }else{ 
               $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i-1]);
            }
        }
        imgClickFy();
        slideLi();
    }
    //左滑动
    function left(){ 
        var fy = new Array();
        for(i=0;i<slideNub;i++){ 
            fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
        }
        for(i=0;i<slideNub;i++){ 
            if(i==(slideNub-1)){ 
                $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[0]);
            }else{ 
               $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i+1]);
            }
        }
        imgClickFy();
        slideLi();
    }
    //轮播图片左右图片点击翻页
    function imgClickFy(){ 
        $(".slide .img").removeAttr("onclick");
        $(".slide .img2").attr("onclick","left()");
        $(".slide .img4").attr("onclick","right()");
        var n = $('.slide-bt span.on').attr('data-slide-bt') - 1;
        $('#slide div.img').addClass('opacity');
        $('#slide div.img:eq('+ n +')').removeClass('opacity');
    }
    //修改当前最中间图片对应按钮选中状态
    function slideLi(){ 
        var slideList = parseInt($(".slide .img3").attr("data-slide-imgId")) + 1;
        $(".slide-bt span").removeClass("on");
        $(".slide-bt span[data-slide-bt="+slideList+"]").addClass("on");
        var n = $('.slide-bt span.on').attr('data-slide-bt') - 1;
        $('#slide div.img').addClass('opacity');
        $('#slide div.img:eq('+ n +')').removeClass('opacity');
    }
    //轮播按钮点击翻页
    function tz(id){ 
        var tzcs = id - (parseInt($(".slide .img3").attr("data-slide-imgId")) + 1);
        if(tzcs>0){ 
            for(i=0;i<tzcs;i++){ 
                setTimeout(function(){ 
                  right();
                },1);2
            }
        }
        if(tzcs<0){ 
            tzcs=(-tzcs);
            for(i=0;i<tzcs;i++){ 
                setTimeout(function(){ 
                  left();
                },1);
            }
        }
        slideLi();
    }
    //触摸滑动模块
    function k_touch() { 
        var _start = 0, _end = 0, _content = document.getElementById("slide");
        _content.addEventListener("touchstart", touchStart, false);
        _content.addEventListener("touchmove", touchMove, false);
        _content.addEventListener("touchend", touchEnd, false);
        function touchStart(event) { 
            var touch = event.targetTouches[0];
            _start = touch.pageX;
        }
        function touchMove(event) { 
            var touch = event.targetTouches[0];
            _end = (_start - touch.pageX);
        }
        function touchEnd(event) { 
            if (_end < -100) { 
                left();
                _end=0;
            }else if(_end > 100){ 
                right();
                _end=0;
            }
        }
    }
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70]: /images/20221024/559f5d8f679d4bc18bcd602800df8ba8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，181人围观）

还没有评论，来说两句吧...

相关阅读

相关 PC 端网页轮播图

文章目录一、案例分析二、结构搭建三、具体实现 1.鼠标经过按钮时 2.动态生成小圆

清疚/ 2023年09月26日 10:39/ 0 赞/ 60 阅读

相关移动端轮播图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

矫情吗；*/ 2022年10月25日 14:04/ 0 赞/ 182 阅读

相关 html实现手机端轮播图,swiper移动端轮播图简单实现

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, min

你的名字/ 2022年10月07日 12:46/ 0 赞/ 286 阅读

相关轮播图

![这里写图片描述][SouthEast] > html页面 <!DOCTYPE html> <html> <head>

布满荆棘的人生/ 2022年06月05日 09:07/ 0 赞/ 355 阅读

相关轮播图

<html> <head> <meta name="viewport" id="viewport" content="width=device-

布满荆棘的人生/ 2022年05月29日 03:47/ 0 赞/ 280 阅读

相关原生js实现简单的移动端轮播图效果

近期接触了移动端html5和css3，想加入些轮播图，于是在网上搜集整理了一些资料，经自己补充改进使之较为完善 -------------------- 原生JavaScr

叁歲伎倆/ 2022年05月11日 12:40/ 0 赞/ 253 阅读

相关原生 js 实现移动端 Touch 轮播图

> 小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公

秒速五厘米/ 2022年03月30日 20:39/ 0 赞/ 257 阅读

相关移动端轮播

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont

谁践踏了优雅/ 2022年02月02日 02:39/ 0 赞/ 249 阅读

相关轮播图

本文转载至菜鸟教程，仅做笔记之用，方便自己学习 [菜鸟链接][Link 1] <!DOCTYPE html> <html> <head>

秒速五厘米/ 2021年12月10日 05:57/ 0 赞/ 510 阅读

相关轮播图

CSS样式 { margin: 0; padding: 0; list-style: none

柔情只为你懂/ 2021年11月23日 13:56/ 0 赞/ 544 阅读