這個插件是在上一個的基礎是進行封裝的，這個插件支持水平切換和垂直切換.
這裏是插件結構
;(function(){
//定義插件名稱。方便後面調用
$.fn.pluginName = function(options){//options 經常用這個表示有許多個參數。
var defaults = {};//設置一些默認值
//這裏就是把用戶自定義的值覆蓋了默認用戶的值。如果用戶沒定義值，就用系統自定義的。
var settings = $.extend({}, defaults, options);
this.each(function(index, el) {
//往裏面添加你想添加的代碼
});
//返回this
return this;
}
})(jQuery);
我封裝好的代碼裏都有註釋，所以我就不用在這裏一一的解答咯，有什麼不明白的可以call我
htm+css代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>banner圖學習中</title>
<style type="text/css">
*{margin:0; padding: 0;font-family: 'Microsoft Yahei';}
a{text-decoration: none;}
li{list-style: none;}
img{border:0;}
ul{list-style: outside none none;}
.slider{ width: 1000px; height: 485px;border:1px solid #000; margin:0 auto; overflow: hidden; position: relative;text-align: center;}
.slider .slider_main{ position: absolute;}
.slider .slider_main li{ width: 1000px; height: 485px; float:left;}
.slider .slider_main img{ width: 1000px; height: 485px;}
.slider .slider_nav{ width:160px; height:15px;bottom:15px; left: 40%; position: absolute;border:1px solid #ff0000;text-align: center;}
.slider .slider_nav li{ float: left; width: 15px; height: 15px; cursor: pointer; background: #ccc; text-align: center; margin-left:10px;border-radius: 50%;}
.slider-nav .on{background: #f73f07; }
.slider .slider_nav li.on{ background: #f73f07; }
.slider .sliderPreNext .slider_pre,.slider .sliderPreNext .slider_next{width: 51px;top:46%; height: 51px; position: absolute; display:inline-block; *display:inline; zoom:1; z-index: 8;}
.slider .sliderPreNext .slider_pre{left:10px; background: url(../imgs/btn.png) no-repeat 0 0;}
.slider .sliderPreNext .slider_next{right:10px; background: url(../imgs/btn.png) no-repeat -58px 0;}
.slider .slider_pre:hover{background: url(../imgs/btn.png) no-repeat 0 -70px;}
.slider .slider_next:hover{background: url(../imgs/btn.png) no-repeat -58px -70px;}
</style>
</head>
<body>
<!-- 第一步先放一個大盒子，裝圖片和相關按鈕 -->
<div class="slider" id="sliderBox">
<!-- 第二步放圖片佈局 -->
<ul class="slider_main" id="slider_main">
<li class="111"><a href="#"><img src="../imgs/1.png" alt="" /></a></li>
<li class="222"><a href="#"><img src="../imgs/2.png" alt="" /></a></li>
<li class="333"><a href="#"><img src="../imgs/3.png" alt="" /></a></li>
<li class="444"><a href="#"><img src="../imgs/4.png" alt="" /></a></li>
<li class="555"><a href="#"><img src="../imgs/5.png" alt="" /></a></li>
</ul>
<!-- 點點索引 -->
<ul class="slider_nav">
<li class="slider_item on"></li>
<li class="slider_item"></li>
<li class="slider_item"></li>
<li class="slider_item"></li>
<li class="slider_item"></li>
</ul>
<!-- 左右箭頭 -->
<div class="sliderPreNext">
<a class="slider_pre" id="slider_pre" href="javascript:;"></a>
<a class="slider_next" id="slider_next" href="javascript:;"></a>
</div>
</div>
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.BannerPlugin.js"></script>
<script type="text/javascript">
$(function(){
$("#sliderBox").BannerPlugin({
duration:1500,
eventType:'hover',
horize:false
});
});
</script>
</html>封裝好的js：
/*
* @Author: liufang
* @describe: Support vertical and horizontal movement of plug-ins
* @Last Modified by name: liufang
* @Last Modified time: 2017-01-03 16:53:42
*/
;(function(){
$.fn.BannerPlugin = function(options){
var defaults = {//設置一下默認值
sliderMain :".slider_main",//獲取li的長度
sliderNav :'.slider_nav li',
prev :'#slider_pre',
next :'#slider_next',
pagination : true,//是否顯示分頁
easing : 'ease',//特效方式，ease-in,ease-out,linear
speed :1000,//播放速度
times :2000,//定時器時間
current :'on',//爲當前的數據添加背景顏色或者其他
eventType :'click',//點點序列點擊事件默認值爲click事件，還有hover事件
horize:true, //默認橫向，false垂着方向
playAuto:true//是否支持自動播放
};
var settings = $.extend({}, defaults, options);
this.each(function(index, el) {
var _this = $(this),
len = $(settings.sliderMain).find("li").length,
index = 0,
Interval = null,//設置定時器
_sliderWidth = _this.find('li img').width(),
_sliderHeight = _this.find('li img').height(),
_slilerprev = _this.find(settings.prev),
_slilernext = _this.find(settings.next);
console.log("len:"+len);
//水平滾動
function inithorizontal(index){
//根據index值計算ul元素的left值
var nowLeft = -index * _sliderWidth;
$(settings.sliderMain).css({"width": len * _sliderWidth + 'px' });
$(settings.sliderMain).stop(true, false).animate({'left': nowLeft}, settings.speed);//圖片移動
$(settings.sliderNav).removeClass(settings.current).eq(index).addClass(settings.current);//點點
}
//垂着滾動
function initVertical(index){
//根據index值計算ul元素的top值
var nowTop = -index * _sliderHeight;
$(settings.sliderMain).stop(true, false).animate({'top': nowTop}, settings.speed);//圖片移動
$(settings.sliderNav).removeClass(settings.current).eq(index).addClass(settings.current);//點點
console.log("tallWidth:"+$(settings.sliderMain).width());
}
// hover
$(this).hover(function() {
clearInterval(Interval);
}, function() {
playAuto();
});
if(settings.eventType == 'click'){
$(settings.sliderNav).on('click', function(event) {
event.preventDefault();
clearInterval(Interval);
var index = $(this).index();
settings.horize == true ? inithorizontal(index) : initVertical(index);
});
}
if(settings.eventType == 'hover'){
$(settings.sliderNav).hover(function() {
clearInterval(Interval);
var index = $(this).index();
settings.horize == true ? inithorizontal(index) : initVertical(index);
}, function() {
});
}
//上一頁
function sliderPrev(){
index--;
if(index < 0){
index = len -1;
}
settings.horize == true ? inithorizontal(index) : initVertical(index);
}
//下一頁
function sliderNext(){
index++;
if(index > len - 1){
index = 0;
}
settings.horize == true ? inithorizontal(index) : initVertical(index);
}
if(settings.prev || settings.next){
_slilerprev.add(_slilernext).click(function(event) {
clearInterval(Interval);
$(this).is(_slilernext) ? sliderNext():sliderPrev();
});
}
//設置定時器
function playAuto(){
Interval = setInterval(function(){
index++;
if(index > len - 1 ){
index = 0;
}
settings.horize == true ? inithorizontal(index) : initVertical(index);
},settings.times);
}
if(settings.playAuto == true){
playAuto();
}
});
//返回
return this;
}
})(jQuery);