zoukankan      html  css  js  c++  java
  • 移动端木马轮播图(图片不确定个数)无限轮播的问题

    <div class="containering">
    			<div id="slide" class="slide" alt="star">
    				<div class="img"><img src="666.png" /></div>
    				<div class="img"><img src="666.png" /></div>
    				<div class="img"><img src="111.png" /></div>
    				<div class="img"><img src="666.png" /></div>
    				<div class="img"><img src="666.png" /></div>
    				<div class="img"><img src="666.png" /></div>
    				<div class="img"><img src="666.png" /></div>
    			</div>
    		</div>
    

      

    body {
    				background-color: #262626
    			}
    			
    			* {
    				padding: 0;
    				margin: 0;
    			}
    			
    			.containering {
    				 100%;
    				height: 3.65rem;
    				box-sizing: border-box;
    				padding: 0 0.1rem;
    			}
    			
    			.slide {
    				 100%;
    				height: 3.65rem;
    				overflow: hidden;
    				position: relative;
    			}
    			
    			.slide .img {
    				overflow: hidden;
    				position: absolute;
    				transition: width 0.4s, height 0.4s, top 0.4s, left 0.4s, z-index 0.4s;
    			}
    			
    			.slide .img img {
    				 calc(100% - 14px);
    				height: calc(100% - 14px);
    				margin: 7px;
    			}
    			
    			.slide .img1 {
    				 20%;
    				height: 65%;
    				top: 22%;
    				left: 2%;
    				z-index: 1;
    			}
    			
    			.slide .img2 {
    				 26%;
    				height: 80%;
    				top: 14%;
    				left: 15%;
    				z-index: 2;
    			}
    			
    			.slide .img3 {
    				 35%;
    				height: 100%;
    				top: 0%;
    				left: 33%;
    				z-index: 3;
    			}
    			
    			.slide .img4 {
    				 34%;
    				height: 80%;
    				top: 14%;
    				left: 51%;
    				z-index: 2;
    			}
    			
    			.slide .img5 {
    				 20%;
    				height: 65%;
    				top: 22%;
    				left: 78%;
    				z-index: 1;
    			}
    			
    			.slide-bt {
    				position: absolute;
    				left: 50%;
    				bottom: 13%;
    				z-index: 10;
    			}
    			
    			.slide-bt span {
    				 24px;
    				height: 8px;
    				background: #c9caca;
    				float: left;
    				margin: 5px;
    				border-radius: 4px;
    			}
    

      

    var autoLb = true; //autoLb=true为开启自动轮播
    			var autoLbtime = 1; //autoLbtime为轮播间隔时间(单位秒)
    			var touch = true; //touch=true为开启触摸滑动
    			var slideBt = true; //slideBt=true为开启滚动按钮
    
    			var slideNub; //轮播图片数量
    
    			//窗口大小改变时改变轮播图宽高
    			$(window).resize(function() {
    				$(".slide").height($(".slide").width() * 0.56);
    			});
    
    			$(function() {
    				$(".slide").height($(".slide").width() * 0.56);
    				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 + "' onclick='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();
    			})
    
    			//右滑动
    			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()");
    			}
    
    			//修改当前最中间图片对应按钮选中状态
    			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");
    			}
    
    			//轮播按钮点击翻页
    			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);
    					}
    				}
    				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;
    					}
    				}
    			}
    

      

  • 相关阅读:
    前端面试官如何从笔试中选拔人才
    webapp应用--模拟电子书翻页效果
    用webpack实现前端自动化构建
    webpack3中文版使用参考文档--全面解析webpack.config.js
    300行代码揭密轮播插件核心代码的实现过程
    免费视频播放器videojs中文教程
    微信小程序开发初体验
    前端工程自动化构建总结
    细说前端自动化打包工具--webpack
    H5程序员如何利用cordova开发跨平台应用
  • 原文地址:https://www.cnblogs.com/xinheng/p/10094934.html
Copyright © 2011-2022 走看看