这个插件是在上一个的基础是进行封装的，这个插件支持水平切换和垂直切换.
这里是插件结构
;(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);
2898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
