基于jQuery的轮播图插件(新手练习)
到年末了，今天没事，自己写了一个轮播图的插件….(新手练习, 勿喷)
可以添加标题，可以添加按钮….
切换方式目前只写了一种 渐隐渐现的方式…
HTML 结构
<div class="mySlide">
<ul class="slide-list">
<li><img src="img/news-img1.png" alt="" />li>
<li><img src="img/news-img2.png" alt="" />li>
<li><img src="img/news-img3.png" alt="" />li>
ul>
div>
Css 结构
.mySlide{
position: relative;
width: 547px; /*图片宽度*/
height: 371px; /*图片高度*/
}
.slide-list{
width: 547px; /*图片宽度*/
height: 371px; /*图片高度*/
overflow: hidden;
position: relative;
}
.slide-list li {
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
.slide-count{
position: absolute;
width: 100%;
height: 15px;
bottom: 8%;
left: 0;
text-align: center;
}
.slide-count span{
display: inline-block;
*display: inline-block;
*zoom: 1;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #3e3e3e;
margin: 0 5px;
cursor: pointer;
}
.slide-count span.active{
background-color: #C81623;
}
JavaScript
;(function($){
$.fn.Slide = function(options){
var root = this;
/*
* @ 配置参数
* oIndex 初始位置
* interval 轮播间隔
* hasTabBtn 是否包含切换按钮(默认不包含)
* hasCountBtn 是否包含计数按钮(默认不包含)
* hasTitle 轮播图下面是否具有标题
* autpPlay 是否自动播放(默认自动播放)
*/
var defaults = {
oIndex : 0,
interval : 2000, // 时间间隔
hasTabBtn : false, // 是否具有切换按钮
prevBtnClass : "prev-btn", // 上一页 className
nextBtnClass : "next-btn", // 下一页 className
hasCountBtn : false, // 是否具有计数按钮
countBtnClass : "slide-count",
hasTitle : false,
isAutoPlay : true // 是否自动播放
}
// 合并参数
var opts = $.extend({}, defaults, options);
var slide = {
play : function(){
/*
* opts的参数 绑定到 slide
* slide 赋值 that
*/
var that = this;
for(var p in opts){
that[p] = opts[p];
}
that.oUl = root.find(".slide-list"); // 图片列表
that.oLi = that.oUl.find("li"); // 每张图片
that.imgNum = that.oLi.length; // 图片数量
that.isPlay = null;
// 添加切换按钮
if(that.hasTabBtn){
that.setTabBtn();
}
// 添加计数按钮
if(that.hasCountBtn){
that.setCountBtn(that.imgNum);
}
// 自动播放
if(that.isAutoPlay){
that.autoPlay();
}
that.init();
},
// 初始化
init : function(){
var that = this;
that.oLi.eq(0).css({
opacity : 1
});
if(that.hasCountBtn){
that.countBtn.find("span").eq(0).addClass("active");
}
},
// 添加切换按钮
setTabBtn : function(){
var that = this;
that.prevBtn = $(''); // 上一页按钮
that.nextBtn = $(''); // 下一页按钮
root.append(that.prevBtn);
root.append(that.nextBtn);
that.prevBtn.on("click", function(e){
e.stopPropagation();
that.prevFun();
});
that.nextBtn.on("click", function(e){
e.stopPropagation();
that.nextFun();
})
// 链式调用
return that;
},
// 下一页
prevFun : function(){
var that = this;
that.oIndex--;
that.oIndex < 0 && (that.oIndex = that.imgNum - 1);
that.toggle("fade");
},
// 上一页
nextFun : function(){
var that = this;
that.oIndex++;
that.oIndex >= that.imgNum && (that.oIndex = 0);
that.toggle("fade");
},
// 创建计数按钮
setCountBtn : function(oLen){
var that = this;
that.countBtn = $(''); // 计数按钮
root.append(that.countBtn);
// 添加点
for(var i = 0; i < oLen; i++){
var oNum = $("");
that.countBtn.append(oNum);
}
var oSpan = that.countBtn.find("span");
that.countEvent(oSpan);
return that;
},
// 自动轮播
autoPlay : function(){
var that = this;
var countBtn = that.countBtn;
var interval = that.interval;
var oLi = that.oLi;
that.isPlay = setInterval(play, interval);
function play(){
that.oIndex ++;
that.oIndex >= that.imgNum && (that.oIndex = 0);
// 图片轮播
that.toggle("fade");
}
root.hover(function(){
clearInterval(that.isPlay);
}, function(){
that.isPlay = setInterval(play, interval);
});
return that;
},
// 按钮事件
countEvent : function(count){
var that = this;
var oLi = that.oLi;
count.each(function(){
$(this).on("click", function(e){
e.stopPropagation();
var i = count.index($(this));
that.oIndex = i;
$(this).addClass("active").siblings().removeClass("active");
oLi.eq(that.oIndex).stop().animate({
opacity : 1
}).siblings().stop().animate({
opacity : 0
});
});
})
},
// 切换的方式
toggle : function(pattern){
var that = this;
var oLi = that.oLi;
var countBtn = that.countBtn;
if(pattern == "fade"){
// 图片轮播
oLi.eq(that.oIndex).stop().animate({
opacity : 1
}).siblings("li").stop().animate({
opacity : 0
});
// 小圆点
if(countBtn){
countBtn.find("span").eq(that.oIndex).addClass("active").siblings().removeClass("active");
}
}
}
}
return this.each(function(){
slide.play();
});
};
})(jQuery);
插件的引入
// 先引入jQuery
<script src="http://apps.bdimg.com/libs/jquery/1.8.2/jquery.js">script>
// 引入插件
<script src="XX/Slide.js">script>
<script>
$(".mySlide").Slide({
hasCountBtn : true
});
script>