把公司網站製作過程中的圖片輪播功能特別抽出來作爲一個插件，方便後期使用，滑動效果需要藉助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);