自己写的手机端轮播插件-- hdpslide.js

最新推荐文章于 2021-10-05 12:08:50 发布

太羽

最新推荐文章于 2021-10-05 12:08:50 发布

阅读量2.8k

点赞数

分类专栏：移动前端

本文链接：https://blog.csdn.net/zchcode/article/details/39233737

版权

移动前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

把公司网站制作过程中的图片轮播功能特别抽出来作为一个插件，方便后期使用，滑动效果需要借助zepto.js的支持。轮播插件只有四个功能，轮播导航，标题，箭头和间隔时间，前三者默认都是不显示的，需要手动开启。间隔时间默认是2000。

html

<!doctype html>
<html lang="en-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/zepto.hdpslider.js"></script>
</head>
<body>
<div class="hdp"> 
	<ul class="hdp_con">
		<li><img src="img/0img1.jpg" alt="图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片1"></li>
		<li><img src="img/0img2.jpg" alt="图片2"></li>
		<li><img src="img/0img1.jpg" alt="图片3"></li>
		<li><img src="img/0img2.jpg" alt="图片4"></li>
	</ul>
</div>
<script> 
$(function(){	
	$(".hdp").hdpSlider({
		hdpTitle:true,
		hdpNum:true,
		hdpArrow:true,
		hdpTime:4000	
	});	
});
</script>
</body>
</html>

CSS

/**图片轮播**/
html{ font-size:75%;}
.hdp{ max-width:53rem; margin:0 auto; position:relative; overflow:hidden;}
.hdp_con{ transition-duration:1s; -webkit-transition-duration:1s; overflow:hidden;}
.hdp_title{ position:absolute; bottom:0; z-index:2; width:100%; height:2rem; line-height:2rem; opacity:0.6; background:#000;}
.hdp_title h3{ margin-left:1rem; width:80%; color:#fff; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.hdp_con li{ float:left;}
.hdp_con li img{ display:block; width:100%;}
.hdp_num{ position:absolute; right:0.5rem; bottom:0; z-index:3; height:2rem; line-height:2rem;}
.hdp_num span{ display:inline-block; margin:0 2px; width:6px; height:6px; border-radius:50%; background:#ccc; vertical-align:middle; cursor:pointer;}
.hdp_num .num_on{ background:#fff; height:5px; width:5px;}
.hdp_prev,.hdp_next{ position:absolute; top:45%; width:20px; height:25px; z-index:2; background:red; cursor:pointer; color:#fff; text-align:center;}
.hdp_prev{ left:1rem;}
.hdp_next{ right:1rem;}

hdpslide插件

/****************************
* zepto 手机图片轮播插件
* By:zch
* Date:2014-9-12
* 调用方法 $("selector").slider();
* 同时支持参数传递,如果想显示标题
* $(selector).slider({"hdpTitle":true})
* 圈圈导航，标题和箭头默认都是不显示的。
*****************************/
;(function($){
	$.fn.hdpSlider = function(options){
		var defaults = {
			hdpNum:false,    //是否添加圈圈
			hdpTitle:false,  //是否添加标题
			hdpArrow:false,  //是否添加箭头
			hdpTime:2000     //间隔时间
		};
		var opts = $.extend({},defaults,options);
		return this.each(function(){
			var obj = $(this);
			var hdpCon = obj.find(".hdp_con");
			var imgLen = obj.find(".hdp_con li").length;
			var imgIndex = 0;
			var transLeft = 0;
			
			//设置包含图片容器的宽度
			var hdpConWidth = 100*imgLen;
			var imgWidth = (100/imgLen).toFixed(5);
			obj.find(".hdp_con").css("width",hdpConWidth+"%");
			obj.find(".hdp_con li").css("width",imgWidth+"%");
			
			//添加箭头
			if(opts.hdpArrow){
				obj.append("<div class='hdp_prev'><</div><div class='hdp_next'>></div>");
				$(".hdp_prev").click(function(){
					clearInterval(hdp);
					imgIndex--;
					if(imgIndex == -1){
						imgIndex = imgLen -1;
					}
					hdpSlide(imgIndex);
					hdp = setInterval(function(){
						hdpSlide(imgIndex);
						imgIndex++;
						if(imgIndex == imgLen){
							imgIndex = 0;
						}
					},opts.hdpTime);
				})
				$(".hdp_next").click(function(){
					clearInterval(hdp);
					imgIndex++;
					if(imgIndex == imgLen){
						imgIndex = 0;
					}
					hdpSlide(imgIndex);
					hdp = setInterval(function(){
						hdpSlide(imgIndex);
						imgIndex++;
						if(imgIndex == imgLen){
							imgIndex = 0;
						}
					},opts.hdpTime);
				})
			}
			//添加标题
			if(opts.hdpTitle){
				obj.append("<div class='hdp_title'><h3></h3></div>");
				$(".hdp_title h3").html(obj.find(".hdp_con li").eq(0).find("img").attr("alt"));
			}
			//添加圈圈
			if(opts.hdpNum){
				obj.append("<div class='hdp_num'><span class='num_on'></span></div>");
				for(var i=0;i<imgLen-1;i++){
					$(".hdp_num").append("<span></span>");
				}				
				var numSpan = obj.find(".hdp_num span");
				//兼容PC端
				numSpan.mouseover(function(){
					imgIndex = $(this).index();
					hdpSlide(imgIndex);
				});
			}			
			
			//滑动定时器
			hdp = setInterval(function(){
				imgIndex++;
				if(imgIndex == imgLen){
					imgIndex = 0;
				}
				hdpSlide(imgIndex);
			},opts.hdpTime);
			
			//向左滑动
			hdpCon.swipeLeft(function(){
				clearInterval(hdp);
				imgIndex++;
				if(imgIndex == imgLen){
					imgIndex = 0;
				}
				hdpSlide(imgIndex);
				hdp = setInterval(function(){
					hdpSlide(imgIndex);
					imgIndex++;
					if(imgIndex == imgLen){
						imgIndex = 0;
					}
				},opts.hdpTime);
			});
			
			//向右滑动
			hdpCon.swipeRight(function(){
				clearInterval(hdp);
				imgIndex--;
				if(imgIndex == -1){
					imgIndex = imgLen -1;
				}
				hdpSlide(imgIndex);
				hdp = setInterval(function(){
					hdpSlide(imgIndex);
					imgIndex++;
					if(imgIndex == imgLen){
						imgIndex = 0;
					}
				},opts.hdpTime);
			});
			//公共滑动函数
			function hdpSlide(index){
				$(".hdp_title h3").html(obj.find(".hdp_con li").eq(index).find("img").attr("alt"));
				transLeft = -imgWidth*index + "%"
				hdpCon.css({"transform":"translate("+ transLeft +")","-webkit-transform":"translate("+ transLeft +")"});
				numSpan.removeClass("num_on").eq(index).addClass("num_on");
			}
		})
	}

})(Zepto);

太羽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
自己写的手机端轮播插件-- hdpslide.js

把公司网站制作过程中的图片轮播功能特别抽出来作为一个插件，方便后期使用，滑动效果需要借助zepto.js的支持。轮播插件只有四个功能，轮播导航，标题，箭头和间隔时间，前三者默认都是不显示的，需要手动开启。间隔时间默认是2000。
复制链接

扫一扫