适合手机的图片轮播图

最新推荐文章于 2025-05-19 14:58:28 发布

原创最新推荐文章于 2025-05-19 14:58:28 发布 · 7.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #手机 #脚本 #图片

本文介绍了一种适用于手机的图片轮播图实现方法，通过动态计算图片的同比例高度来适应不同宽度的屏幕。同时，还加入了手机上左右滑动的交互效果。虽然未经多设备测试，但探讨了可能的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近要用到手机上的图片轮播图，在网上找了一些代码，发现都是写死的宽高，在手机上没法自适应，实在找烦了，就自己动手写了一段脚本，当时是依赖我们强大的jquery的，目前在手动干预滚动后，自动滚动会停止。下面是代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="format-detection" content="telephone=no, address=no">
<meta name="misapplication-tap-highlight" content="no">
<style>
body{margin:0;padding:0;}
.wrapper{
	position:relative;
	width:100%;
	height:1px;
	box-sizing:border-box;
	overflow:hidden;
	margin:0;
	padding:0;
}
.wrapper ul{
	position:absolute;
	width:100%;
	list-style:none;
	margin:0;
	padding:0;
}
.wrapper li{
	width:100%;
	list-style:none;
	float:left;
	padding:0;
	margin:0;

}
.wrapper li img{
	width:100%;
}
.wrapper .arrow-l{
	position:absolute;
	left:10px;
	z-index:99;
	display:none;
	width:15px;
	height:30px;
	background:rgba(51,51,51,0.3) url(./images/wrapper-arrow.png) no-repeat left center;
}
.wrapper .arrow-r{
	position:absolute;
	right:10px;
	z-index:99;
	width:15px;
	height:30px;
	background:rgba(51,51,51,0.3) url(./images/wrapper-arrow.png) no-repeat right center;
}
</style>
<title>首页</title>
</head>
<body>

<div class="wrapper">
	<ul> 
	<li><a href="http://www.baidu.com/" target="_blank"><img src="./img/1.jpg" class="wshow" /></a></li> 
	<li><a href="http://www.baidu.com/" target="_blank"><img src="./img/2.jpg" class="wshow" /></a></li> 
	<li><a href="http://www.baidu.com/" target="_blank"><img src="./img/3.jpg" class="wshow" /></a></li>
	<li><a href="http://www.baidu.com/" target="_blank"><img src="./img/4.jpg" class="wshow" /></a></li> 
	</ul> 
</div> 

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="./js/jquery-switcher.min.js"></script>
<script>
	$('.wrapper').switcher({stay:3000});
</script>
</body>
</html>

js脚本

(function($){
	$.fn.switcher=function(ops){
		var setting = {
			stay:3000
		};
if(typeof ops=='object') $.extend(setting,ops);
		var self = this[0],
			boxId = self.id;
		if(!boxId){
			boxId="wrapper001";
			self.id=boxId;
		}
		var srcImgs = $("#"+boxId+" .wshow"),
			len = srcImgs.length,
			width="100%",
			height="1",
			box= $(self),
			ul = $("#"+boxId+" ul"),
			lis = $("#"+boxId+" li"),
			curIndex = 0;
			maxleft=0,
			minleft=0,
			eachPx = 10,
			delay=10;


			console.info(srcImgs[0].onload);
		/*自适应时，宽高无法固定，根据第一张图片的大小比例进行缩放，设置滚动图片的可视区域大小*/
		var nowStyle = getComputedStyle?getComputedStyle(srcImgs[0],null):srcImgs[0].currentStyle;

			//console.info(srcImgs.length);

			
			
			width= parseInt(nowStyle.width);
			height = parseInt(nowStyle.height);

			box.css("height",height);
			ul.css("width",(width*len+10)+"px");
			lis.css("width",width+"px").each(function(i){
				$(this).attr("data-left",(0-width*i)+"px");
			});

			var arrowtop = parseInt((height-30)/2),
			arrowStyle = ' style="top:'+arrowtop+'px;" ';

			//添加左右箭头
			box.append('<div class="arrow-l"'+arrowStyle+'></div>').append('<div class="arrow-r"'+arrowStyle+'></div>');

			var arrowLeft = $(".arrow-l"),
				arrowRight = $(".arrow-r");

			intervalHandler = null;
			function scrollTo(tamp){
				if(intervalHandler != null)return;
				var index = curIndex+tamp;
				if(index<0||index>=len){
					return;
				}
				
				curIndex = index;
				var elen = 0-tamp*eachPx;

				var nowLeft = parseInt(ul.css("left")),
					moveLeft = parseInt($(lis[index]).data("left"));				
				
					intervalHandler = setInterval(function(){
						var nowLeft = parseInt(ul.css("left"));
						nowLeft += elen;
						//console.info(nowLeft+">>"+moveLeft);
						if((tamp>0&&nowLeft>=moveLeft)||(tamp<0&&nowLeft<=moveLeft)){
							ul.css("left",nowLeft+"px");
						}else{
							clearInterval(intervalHandler);

							if(curIndex==0){
								arrowLeft.hide();
							}else if(curIndex+1==len){
								arrowRight.hide();
							}else{
								arrowLeft.show();
								arrowRight.show();
							}
							ul.css("left",moveLeft+"px");							
							intervalHandler = null;
						}
					},delay);
			}

			function scrLeft(){
				scrollTo(-1);
			}

			
			function scrRight(){
				scrollTo(1);
			}

			arrowLeft.bind("click",function(){
				stopAuto();
				scrLeft();
			});

			arrowRight.bind("click",function(){
				stopAuto();
				scrRight();
			});

		var touchPos = {startX:0,endX:0};
		self.addEventListener("touchstart",function(e){
			//e.preventDefault();
			if(touchPos.startX==0){
				touchPos.startX = e.targetTouches[0].clientX;
			}
			//alert(touchPos.startX);
		},false);
		
		self.addEventListener("touchend",function(e){
			var x = e.changedTouches[0].clientX;
			
			if(x-touchPos.startX>20){
				stopAuto();
				scrLeft(-1);
			}else if(x-touchPos.startX<-20){
				stopAuto();
				scrRight(1);
			}
			//alert(x-touchPos.startX);
			touchPos = {startX:0,endX:0};
		},false);

		autoStep = -1;
		autoHandler = setInterval(function(){
			if(curIndex==0||curIndex+1==len){
				autoStep = 0-autoStep;
			}
			scrollTo(autoStep);
		},setting.stay);

		function stopAuto(){
			clearInterval(autoHandler);
		};
		
	};
})($);

css中用到的背景图：