JS图片切换，支持自定义，基于JQuery
来源：互联网 发布：java有序和无序 编辑：程序博客网 时间：2024/05/16 12:06
注：0.2版本已经发布。0.1版本的文章内容不再修改。如果需要请对照源码查阅。
演示地址已修改： http://lab.cnscene.com/smallslider/
自己写的一个JQuery插件，支持多个同时使用，参考了 绯雨de天空写的一个特效：http://feiyu.asgard.cn/article_184.html
作者承诺以后会增加功能，但现在，还没有，所以呢，我就先写了一个,模式参考了，但代码完全是自己写的，读者可以自行比较，
目前不能算完美，但非常好用，尤其是html页面代码整洁，
调用非常容易，按钮完全有js动态产生，不用手写。支持页面多组图片同时使用，相互自己不影响，在鼠标放到图片上时，停止图片播放，
鼠标移开后，再次播放，这里由于采用了一对一数组记录关系，即一个播放对象，记录当前一个setTimeOut返回值，保证了 setTimeOut函数调用后，不会产生内存泄漏。
特效支持的很有限，毕竟个人觉得过于华丽丽的切换特效不是js的事情，那是谁的事情呀？那是flash干的事！
如果有更好的意见，可以给我留言。
支持功能：
1，支持自定义图标按钮
2，支持多组同时播放，互不影响
3，支持三种切换特效
4，支持自定义按钮出现位置,共有四个值：LeftTop，LeftBottom,RightTop,RightBottom
5，支持自定义是否出现标题文本
6，支持自定义标题文本是否可点击
7，支持自定义图片切换的方式，Click为单击切换，Hover为鼠标移动到按钮上时切换
8，支持自定义按钮间间距
9，纯js生成按钮和文本，调用更加简洁，明了
测试浏览器： IE 6,7,8 Firefox 3+ Opera 9.6 , google chrome
演示地址： http://lab.cnscene.com/smallslider/
调用方法；
页面链进下面三个文件：
1.jquery 1.3.2版本， 2.插件jquery.smallslider.js 3.css文件：smallslider.css
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.smallslider.js"></script>
<link type="text/css" rel="stylesheet" href="css/smallslider.css" />
HTML部分格式：
<div class="smallslider m1" style="width:511px;height:186px;">
<ul>
<li><a href="images/1.jpg"><img alt="我要我要金币网升级完毕" src="images/1.jpg"/></a></li>
<li><a href="images/2.jpg"><img alt="梦幻西游金币超市火热开启" src="images/2.jpg"/></a></li>
<li><a href="images/3.jpg"><img alt="51PK游戏代练诚邀加盟" src="images/3.jpg"/></a></li>
</ul>
</div>
必须有一个<div></div>并且指定 类名为：smallslider ，
div内部为 <ul><li><a><img>这样的嵌套格式，
img的标签必须指定 alt，alt为下面显示的文本标题内容，所以必须要有，
现在，js调用：
<script type="text/javascript">
$(function(){
$('.m1').smallslider({SwitchEffect:'fadeOut',Position:'LeftBottom',SwitchMode:'Hover',ButtonImage:'images/bg.gif',ButtonImageOn:'images/bgon.gif'});
}) ;
</script>
怎么样？灰常简单吧？
详细的参数如下：
Time:3000, // 切换时间间隔，单位毫秒，1秒=1000毫秒
ButtonImage:'', // 按钮的背景图
ButtonImageOn:'', // 当播放到某按钮时，按钮的背景图
ShowText:true, // 是否显示标题，如果不显示，则只显示按钮
TextLink:true, // 是否给显示的标题加上链接，如果为false，则，只显示标题，标题不可单击，链接的地址自动和当前播放到的图片地址一致
AutoStart:true, // 是否自动开始播放
SwitchMode:'Click', // 图片切换的方式，Click为单击切换，Hover为鼠标移动到按钮上时切换
SwitchEffect:'fadeOut', // 切换特效,fadeOut,fadeIn, slideUp,slideDown,none,
SwitchTime:300, // 切换时间，单位毫秒，1秒=1000毫秒
Position:'RightBottom', // 按钮位置表示，共有四个值：LeftTop，LeftBottom,RightTop,RightBottom
OffsetX:10, // 水平方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px
OffsetY:4, // 竖直方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px
ButtonSpace:4 // 按钮之间的间隔 单位为像素，但不要加px
源码地址：http://lab.cnscene.com/smallslider/
作者承诺以后会增加功能，但现在，还没有，所以呢，我就先写了一个,模式参考了，但代码完全是自己写的，读者可以自行比较，
目前不能算完美，但非常好用，尤其是html页面代码整洁，
调用非常容易，按钮完全有js动态产生，不用手写。支持页面多组图片同时使用，相互自己不影响，在鼠标放到图片上时，停止图片播放，
鼠标移开后，再次播放，这里由于采用了一对一数组记录关系，即一个播放对象，记录当前一个setTimeOut返回值，保证了 setTimeOut函数调用后，不会产生内存泄漏。
特效支持的很有限，毕竟个人觉得过于华丽丽的切换特效不是js的事情，那是谁的事情呀？那是flash干的事！
如果有更好的意见，可以给我留言。
支持功能：
1，支持自定义图标按钮
2，支持多组同时播放，互不影响
3，支持三种切换特效
4，支持自定义按钮出现位置,共有四个值：LeftTop，LeftBottom,RightTop,RightBottom
5，支持自定义是否出现标题文本
6，支持自定义标题文本是否可点击
7，支持自定义图片切换的方式，Click为单击切换，Hover为鼠标移动到按钮上时切换
8，支持自定义按钮间间距
9，纯js生成按钮和文本，调用更加简洁，明了
测试浏览器： IE 6,7,8 Firefox 3+ Opera 9.6 , google chrome
演示地址： http://lab.cnscene.com/smallslider/
调用方法；
页面链进下面三个文件：
1.jquery 1.3.2版本， 2.插件jquery.smallslider.js 3.css文件：smallslider.css
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.smallslider.js"></script>
<link type="text/css" rel="stylesheet" href="css/smallslider.css" />
HTML部分格式：
<div class="smallslider m1" style="width:511px;height:186px;">
<ul>
<li><a href="images/1.jpg"><img alt="我要我要金币网升级完毕" src="images/1.jpg"/></a></li>
<li><a href="images/2.jpg"><img alt="梦幻西游金币超市火热开启" src="images/2.jpg"/></a></li>
<li><a href="images/3.jpg"><img alt="51PK游戏代练诚邀加盟" src="images/3.jpg"/></a></li>
</ul>
</div>
必须有一个<div></div>并且指定 类名为：smallslider ，
div内部为 <ul><li><a><img>这样的嵌套格式，
img的标签必须指定 alt，alt为下面显示的文本标题内容，所以必须要有，
现在，js调用：
<script type="text/javascript">
$(function(){
$('.m1').smallslider({SwitchEffect:'fadeOut',Position:'LeftBottom',SwitchMode:'Hover',ButtonImage:'images/bg.gif',ButtonImageOn:'images/bgon.gif'});
}) ;
</script>
怎么样？灰常简单吧？
详细的参数如下：
Time:3000, // 切换时间间隔，单位毫秒，1秒=1000毫秒
ButtonImage:'', // 按钮的背景图
ButtonImageOn:'', // 当播放到某按钮时，按钮的背景图
ShowText:true, // 是否显示标题，如果不显示，则只显示按钮
TextLink:true, // 是否给显示的标题加上链接，如果为false，则，只显示标题，标题不可单击，链接的地址自动和当前播放到的图片地址一致
AutoStart:true, // 是否自动开始播放
SwitchMode:'Click', // 图片切换的方式，Click为单击切换，Hover为鼠标移动到按钮上时切换
SwitchEffect:'fadeOut', // 切换特效,fadeOut,fadeIn, slideUp,slideDown,none,
SwitchTime:300, // 切换时间，单位毫秒，1秒=1000毫秒
Position:'RightBottom', // 按钮位置表示，共有四个值：LeftTop，LeftBottom,RightTop,RightBottom
OffsetX:10, // 水平方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px
OffsetY:4, // 竖直方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px
ButtonSpace:4 // 按钮之间的间隔 单位为像素，但不要加px
源码地址：http://lab.cnscene.com/smallslider/
先附上 smallslider.js的源码：
/*
* Document : jquery.smallslider.js
* Created on : 2009-7-3, 11:56:24
* Author : smallchicken
* E-Mail : microji@163.com
* Description : JQuery plugin for switch images
* Version : 0.1
*/
(function($) {
$.fn.smallslider=function(options){
var defaults={
Time:3000, // 切换时间间隔，单位毫秒，1秒=1000毫秒
ButtonImage:'', // 按钮的背景图
ButtonImageOn:'', // 当播放到某按钮时，按钮的背景图
ShowText:true, // 是否显示标题，如果不显示，则只显示按钮
TextLink:true, // 是否给显示的标题加上链接，如果为false，则，只显示标题，标题不可单击，链接的地址自动和当前播放到的图片地址一致
AutoStart:true, // 是否自动开始播放
SwitchMode:'Click', // 图片切换的方式，Click为单击切换，Hover为鼠标移动到按钮上时切换
SwitchEffect:'fadeOut', // 切换特效,fadeOut,fadeIn, slideUp,slideDown,none,
SwitchTime:300, // 切换时间，单位毫秒，1秒=1000毫秒
Position:'RightBottom', // 按钮位置表示，共有四个值：LeftTop，LeftBottom,RightTop,RightBottom
OffsetX:10, // 水平方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px
OffsetY:4, // 竖直方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px
ButtonSpace:4 // 按钮之间的间隔 单位为像素，但不要加px
};
var opts=$.extend(defaults,options);
var $this=$(this);
var slider=new Array();
var ButtonBgColor='';
var ButtonBgColorOn ='';
if($this.length>0){
$.each($this,function(){
Init(this);
CreateButtons(this,0);
if(opts.AutoStart) StartSlider(this,0);
onImage(this);
});
}
function onImage(obj){
$(obj).find('img').hover(function(){
StopSlider(obj);
}, function(){
var i= $(obj).find('li').index( $(obj).find('.current-li'));
StartSlider(obj,i+1);
});
}
function Slide(obj,index){
StopSlider(obj); // 先清楚掉以前的setTimeOut;
// index表示当前停止在哪个元素上上面，其上一张为 prev，后一个，也就是将要显示的为 next
var listArr = $(obj).find('li');
var count=listArr.length;
if(index > count-1) index = 0;
// index 可能会传入-1 值，表示当前需要切换到状态0，即第一张图片，那么next正好是0
// 所以这里需要先经过运算，得出next，然后再进行限定0 - count-1之间
var prev= index - 1 < -1 ? count-1 : index - 1 ;
var next= index + 1 < count ? index + 1 : 0;
if(index < 0) index = 0;
if(next <0 ) next = 0 ;
listArr.hide();
listArr.eq(index).show();
switch( opts.SwitchEffect){
case 'fadeOut':
listArr.eq(index).fadeOut(opts.SwitchTime,function(){
listArr.eq(next).show();
});
break;
case 'fadeIn':
listArr.eq(index).hide();
listArr.eq(next).fadeIn(opts.SwitchTime);
break;
case 'slideUp':
listArr.eq(index).slideUp(opts.SwitchTime,function(){listArr.hide();listArr.eq(next).show();});
break;
case 'slideDown':
listArr.eq(index).hide();
listArr.eq(next).slideDown(opts.SwitchTime,function(){listArr.hide();listArr.eq(next).show();});
break;
case 'none':
listArr.eq(index).hide();
listArr.eq(next).show();
break;
default:
listArr.eq(index).hide();
listArr.eq(next).show();
break;
}
// 切换表示当前元素
$(obj).find('li').removeClass('current-li');
$(obj).find('li').eq(index).addClass('current-li');
$(obj).find('span').removeClass('current-btn');
$(obj).find('span').eq(next).addClass('current-btn');
// 切背景图标
if(opts.ButtonImageOn!=''){
if(opts.ButtonImage!=''){
$(obj).find('span').css({background:'transparent url('+opts.ButtonImage+') no-repeat 0 0'});
}else{
$(obj).find('span').css({backgroundColor:ButtonBgColor,backgroundImage:'',borderWidth:'1px'});
}
$(obj).find('span.current-btn').css({background:'transparent url('+opts.ButtonImageOn+') no-repeat 0 0',borderWidth:0});
}
//切换标题
var tit = $(obj).find('img').eq(next).attr('alt');
if(opts.TextLink){
tit = '<a href="'+$(obj).find('img').eq(next).parent('a').attr('href')+'">'+ tit+'</a>';
}
$(obj).find('h3').html(tit);
++index;
index = index > count -1 ? 0 : index;
StartSlider(obj,index);
}
function CreateButtons(obj,index)
{
var listArr = $(obj).find('li');
var count=listArr.length;
var buttons='';
for(var i=1; i <= count; i++ ){
buttons += '<span>'+i+'</span>';
}
buttons ='<div class="smallslider-btns">' + buttons + '</div>';
var left=0,right=0,top =0,bottom=0;
var style_btns={},style_lays={};
switch(opts.Position){
case 'LeftTop':
left = opts.OffsetX;
top = opts.OffsetY;
style_btns={left: left + 'px' , top: top+'px'};
style_lays={left:0,top:0,textAlign:'right'};
break;
case 'RightTop':
right = opts.OffsetX;
top = opts.OffsetY;
style_btns={right: right + 'px' , top: top+'px'};
style_lays={left:0,top:0,textAlign:'left'};
break;
case 'RightBottom':
right = opts.OffsetX;
bottom = opts.OffsetY;
style_btns={right: right + 'px' ,bottom: bottom+'px'};
style_lays={left:0,bottom:0,textAlign:'left'};
break;
case 'LeftBottom':
left = opts.OffsetX;
bottom = opts.OffsetY;
style_btns={left: left + 'px' ,bottom: bottom+'px'};
style_lays={left:0,bottom:0,textAlign:'right'};
break;
}
$(buttons).css(style_btns).appendTo($(obj));
if(opts.ShowText){
$('<div class="smallslider-lay"></div>').css(style_lays).appendTo($(obj));
var tit= $(obj).find('img').eq(index).attr('alt');
if(opts.TextLink){
tit = '<a href="'+$(obj).find('img').eq(index).parent('a').attr('href')+'">'+ tit+'</a>';
}
$('<h3></h3>').html(tit).css(style_lays).appendTo($(obj));
}
$(obj).find('span:not(:first)').css({marginLeft:opts.ButtonSpace+'px'});
$(obj).find('span').removeClass('current-btn');
$(obj).find('span').eq(index).addClass('current-btn');
if(opts.ButtonImage!=''){
$(obj).find('span').css({border:0,background:'transparent url('+opts.ButtonImage+') no-repeat 0 0'});
}
if(opts.ButtonImageOn!=''){
if(opts.ButtonImage!=''){
$(obj).find('span').css({background:'transparent url('+opts.ButtonImage+') no-repeat 0 0'});
}else{
$(obj).find('span').css({backgroundColor:ButtonBgColor,backgroundImage:'',borderWidth:'1px'});
}
$(obj).find('span.current-btn').css({background:'transparent url('+opts.ButtonImageOn+') no-repeat 0 0',borderWidth:0});
}
if(opts.SwitchMode=='Click'){
$(obj).find('span').click(function(){
var ix = $(obj).find('span').index($(this));
Slide(obj,ix-1); // 传入ix-1表示当前是他前面一个，则在调用函数后，就会自然的切换到下一张图片，正好是ix
});
}else if(opts.SwitchMode=='Hover'){
$(obj).find('span').hover(function(){
var ix = $(obj).find('span').index($(this));
Slide(obj,ix-1);
});
}
ButtonBgColor = $(obj).find('span:not(.current-btn)').css('backgroundColor');
ButtonBgColorOn = $(obj).find('span.current-btn').css('backgroundColor');
}
function Init(obj){
var listArr = $(obj).find('li');
listArr.hide();
listArr.eq(0).show();
}
function StartSlider(obj,index){
// 由第几个序号开始 初始为-1
var st =setTimeout(function(){
Slide(obj,index);
},opts.Time);
var i= $this.index(obj);
slider[i]=st;
}
function StopSlider(obj){
var i= $this.index(obj);
clearTimeout(slider[i]);
slider[i]=0;
}
return this.each(function(){
this.AccessStop=function(){
$.each($this,function(){
StopSlider($this);
});
}
});
}
})(jQuery);
- JS图片切换，支持自定义，基于JQuery
- jQuery图片切换插件jquery.cycle.js
- js图片轮动,jquery图片切换
- js、jquery图片动画，图片动态切换
- 漂亮图片切换效果，支持火狐，可自定义图片
- JS自定义属性之切换图片事件
- JS滚动图片切换_html5+jQuery代码
- jquery图片切换插件-NivoSlider.js
- jQuery.nivo.slider.js 幻灯片图片切换
- jquery图片切换插件jquery.cycle.js参数详解
- jquery图片切换插件jquery.cycle.js参数详解
- ie6支持，ie7不支持的js图片切换解决办法
- 基于Jquery的图片切换八种效果效果
- js基础自定义属性索引值之图片切换实例
- JQuery图片轮换插件,支持可视化自定义配置,零CSS
- query图片切换插件jquery.cycle.js参数详解
- 图片切换插件jquery.cycle.js参数详解
- 支持Lazy loading的图片画廊jQuery插件 - Least.js
- 一图五抠
- 暑假开始咯。。。
- SAP认证简介
- 为什么我半年来没有成长
- QT中定时器的使用方法
- JS图片切换，支持自定义，基于JQuery
- Oracle数据库中表的四种连接方式讲解
- 解决JSP中使用request乱码问题
- ASP.NET2.0身份验证和授权一(Membership&MembershipUser)
- XHTML and Accessibility in ASP.NET Whidbey
- .net下基于Forms的roles访问控制
- Membership、MembershipUser和Roles类
- ASP.NET 安全性
- 利用VB操作XML数据
