切换图片尝试写第一个js插件 图片轮播

在写这篇文章之前，xxx已经写过了几篇关于改切换图片主题的文章,想要了解的朋友可以去翻一下之前的文章

最近在看怎么写js插件，实验写了一个简单的图片轮播插件 jqury.picPlay.js 。

基本html框架为<div class="picPanel"><div class="slider"></div></div>，根据需要往里添加class为.pic、.num、.txt的div来分离放置图片列表，数字列表和文字列表。

调用方式：$.fn.jsPicPlay(setting);

setting可以设置三个参数

type: 图片切换方向，默许为横向切换，值为2的时候为垂直切换

intervalTime:设置图片多久切换一次，默许为3000ms

speed:图片切换的速度，默许为200ms

 

插件源码

JS




View Code

(function($){
$.fn.extend({
jsPicPlay:function(setting){
var setting = setting || {};
var config = {
type:1, //默许横向切换
intervalTime:3000,
speed:400
};
$.extend(config,setting);
var panel =  this.length ? this : $(".picPanel");
panel.each(function(){
var panel = $(this),pic = $(".pic",panel),num = $(".num",panel),txt = $(".txt",panel),cn="on",intervalTime = config.intervalTime,speed = config.speed,type=config.type,curIndex=0,myTime = 0;
var picList = $("ul",pic),picItem = $("li",pic),numItem=$("li",num),txtItem = $("li",txt);
var flash = {
setStyle:function(){
switch(type){
case 2:
picList.css({position:"absolute"});
break;
default:
picList.css({position:"absolute","width":picItem.width()*picItem.length});
picItem.css({"float":"left"});
}
},
setNum:function(){
var ht="";
for(var i=1;i<picItem.length+1;i++){
ht+="<li>"+i+"</li>";
}
num.append("<ul>"+ht+"</ul>");
numItem = $("li",num);
numItem.first().addClass("on");
},
play:function(){
++curIndex >= picItem.length && (curIndex=0);
switch(type){
case 2:
picList.animate({
top:-curIndex*picItem.height()
},speed);
break;
default:
picList.animate({
left:-curIndex*picItem.width()
},speed);
}
numItem.removeClass(cn).eq(curIndex).addClass(cn);
txt.length && txtItem.eq(curIndex).show().siblings().hide();
},
start:function(){
myTime = picItem.length && setInterval(flash.play,3000);
},
stop:function() {
clearInterval(myTime);
}

};
flash.setStyle();
pic.length && num.length && flash.setNum();
flash.start();
num.delegate("li",'click',function(){
flash.stop();
curIndex=numItem.index($(this))-1;
flash.play();
flash.start();
});
});
return panel;
}
});
})(jQuery);

CSS




View Code

.picPanel ul,.picPanelul li{
padding:0;
margin:0;
list-style:none;
}

.picPanel {

font-size:12px;
font-family:arial,simsun;
}
.slider{
width:400px;
height:300px;
padding:2px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
}
.pic {
width:400px;
height:300px;
overflow:hidden;
position:absolute;
}
.num {
position:absolute;
bottom:20px;
right:10px;
height:20px;
}
.num li {
width:14px;
height:14px;
background:#000;
color:#fff;
margin:0 3px;
text-align:center;
line-height:14px;
font-size:10px;
cursor:pointer;
float:left;
}
.num .on {
font-weight:bold;
background:#ff0000;
}
.txt {
position:absolute;
bottom:2px;
height:20px;
width:400px;
opacity:0.6;
filter:alpha(opacity=60);
background:#000;
overflow:hidden;
}
.txt li {
color:#fff;
height:20px;
line-height:20px;
padding-left:8px;
z-index:99;
}

示例：

    每日一道理

漫漫人生路，谁都难免会遭遇各种失意或厄运。在凄风苦雨 惨雾愁云的考验面前，一个强者，是不会向命运低头的。风再冷，不会永远不息；雾再浓，不会经久不散。风息雾散，仍是阳光灿烂。

完全的带有数字和文字的轮播









 

景致1
景致2
景致3
景致4

html

<div id="picOne" class="picPanel">
<div class="slider">
<div class="pic">
<ul>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
</ul>
</div>
<div class="num"></div>
<div class="txt">
<ul>
<li>景致1</li>
<li>景致2</li>
<li>景致3</li>
<li>景致4</li>
</ul>
</div>
</div>
</div>

执行JS

$("#picOne").jsPicPlay();

 

仅有图片的轮播









html

<div class="picPanel" id="picTwo">
<div class="slider">
<div class="pic">
<ul>
<li><img src="img/4.jpg"/></li>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
</ul>
</div>
</div>
</div>

执行JS

$("#picTwo").jsPicPlay({type:2});

 

如果当前页面的一个或多个轮播都应用同样的设置直接写$.fn.jsPicPlay()来执行;

文章结束给大家分享下程序员的一些笑话语录： 问答

Q：你是怎么区分一个内向的程序员和一个外向的程序员的？ A：外向的程序员会看着你的鞋和你说话时。

Q：为什么程序员不能区分万圣节和圣诞节？ A：这是因为 Oct 31 == Dec 25！（八进制的 31==十进制的 25）