jquery实现图片等元素的滑动（完整版）

最新推荐文章于 2021-03-28 00:17:58 发布

原创最新推荐文章于 2021-03-28 00:17:58 发布 · 置顶 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #class #stylesheet #border #callback

jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个基于jQuery的图片轮播插件，该插件提供了丰富的配置选项，包括切换时间间隔、按钮样式、显示标题及链接等。支持多种切换效果如淡入淡出、上下滚动等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link href="./css/smallslider.css" mce_href="./css/smallslider.css" type="text/css" rel="stylesheet"> <mce:script type="text/javascript" src="./js/jquery.js" mce_src="./js/jquery.js"></mce:script> <mce:script type="text/javascript" src="./js/smallslider_index.js" mce_src="./js/smallslider_index.js"></mce:script> </head> <body> <div id="smallsider_1" class="smallslider m1" style="width: 470px; height: 160px;"> <ul> <li class="current-li" style="display:list-item;" mce_style="display:list-item;"> <a href="./images/pic.gif" mce_href="images/pic.gif"><img alt="pic" src="./images/pic.gif" mce_src="images/pic.gif"></a> </li> <li class="current-li" style="display:list-item;" mce_style="display:list-item;"> <a href="./images/bg.gif" mce_href="images/bg.gif"><img alt="bg" src="./images/bg.gif" mce_src="images/bg.gif"></a> </li> <li class="current-li" style="display:list-item;" mce_style="display:list-item;"> <a href="./images/psh.jpg" mce_href="images/psh.jpg"><img alt="psh" src="./images/psh.jpg" mce_src="images/psh.jpg"></a> </li> <li class="current-li" style="display:list-item;" mce_style="display:list-item;"> <a href="./images/bg.gif" mce_href="images/bg.gif"><img alt="psh" src="./images/bg.gif" mce_src="images/bg.gif"></a> </li> </ul> <div style="left: 0px; bottom: 0px; text-align: left;" class="smallslider-lay"></div> </div> </body> </html>

/* * Document : jquery.smallslider.js * Created on : 2010-7-3, 11:56:24 * Author : smallchicken * Description : JQuery plugin for switch images */ ;(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 };//定义defaultsshu对象的属性值 var opts=$.extend(defaults,options);//把defaults的属性拓展给options，传递过来的值替换原有的值 var $this=$(this);//获取fn对象的当前的指针 var slider=new Array();//创建一个slider数组 var ButtonBgColor='';//照片按钮颜色 var ButtonBgColorOn ='';//当前照片按钮颜色 //以下是根据类似fn的这样的元素的个数做选择,（也就是说页面中可以有多个滑动的fn对象，但本例只有一个）若元素不是零个，就遍历整个 fn，并有回调函数init(),createbuttons(),onimage()等；否则什么也不做 if($this.length>0){ $.each($this,function(){ Init(this); CreateButtons(this,0); if(opts.AutoStart) StartSlider(this,0); onImage(this);//鼠标移到滑动的图片上执行此函数 }); } //鼠标悬停在某个图片时，调用的函数 //先停止图片滑动通过调用stopslider(),失去焦点时再调用startslider()继续滑动 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); }); } //滑动函数Slide //obj：滑动对象，index：当前显示图片的li的索引 function Slide(obj,index){ StopSlider(obj); // 先清除掉以前的setTimeOut; // index表示当前停止在哪个元素上上面，其上一张为prev，后一个，也就是将要显示的为next var listArr = $(obj).find('li');//所有的obj中的li构成一个对象ListArr，即所有的滑动的图片 var count=listArr.length;//就是返回obj中所有的的li的个数，即所有滑动的图片的数目 if(index > count-1) index = 0;//索引是从0开始，到count-1结束的 // 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();//先隐藏所有li listArr.eq(index).show(); //让当前的li显示 //下面是选择显示当前li的模式：切换的时间SwitchTime；再就是有的还调用回调函数 //例如fadeOut(speed, [callback])，callback是回调函数，即显示下一个li 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');//删除的当前li的CSS类名:current-li $(obj).find('li').eq(next).addClass('current-li');//为下一个li添加CSS类名：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')+'" mce_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); } //Slide函数结束 //以下是创建切换按钮 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>'; } //侦测按钮位置，共四个选项 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; } //switch结束，作用：确定滑动图片按钮的位置 //将切换按钮添加到div中,并添加到$obj中 //若标题带链接，则为标题添加链接 buttons ='<div class="smallslider-btns">' + buttons + '</div>'; $(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')+'" mce_href="'+$(obj).find('img').eq(index).parent('a').attr('href')+'">'+ tit+'</a>'; } $('<h3></h3>').html(tit).css(style_lays).appendTo($(obj)); } //为span添加，移除样式 $(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'|| opts.SwitchMode=='Hover'){ $(obj).find('span').click(function(){ var ix = $(obj).find('span').index($(this)); Slide(obj,ix-1); //传入ix-1表示当前是他前面一个，则在调用函数后，就会自然的切换到下一张图片，正好是ix }); } ButtonBgColor = $(obj).find('span:not(.current-btn)').css('backgroundColor'); ButtonBgColorOn = $(obj).find('span.current-btn').css('backgroundColor'); } //CreateButtons函数结束 //初始化$obj,显示第一个li内容，其他隠藏 function Init(obj){ var listArr = $(obj).find('li'); listArr.hide(); listArr.eq(0).show(); } //StartSlider与Slide连个函数嵌套调用 function StartSlider(obj,index){ // 由第几个序号开始初始为-1 var st =setTimeout(function(){ Slide(obj,index); },opts.Time); //定义一个st变量，存储setTimeout的返回ID，以便调用clearTimeout()使用 var i= $this.index(obj);//定义i，保存当前的滑动对象（因为这个程序可使用多个滑动对象obj） slider[i]=st;//调用滑动函数使obj对象有滑动动作，并赋予其唯一的setTimeout ID } //startslider函数结束 function StopSlider(obj){ var i= $this.index(obj); clearTimeout(slider[i]);//停止动画 slider[i]=0; } //stopslider函数结束 return this.each(function(){ this.AccessStop=function(){ $.each($this,function(){ StopSlider($this); }); } }); } })(jQuery); //function(options)结束 //全局函数结束

.smallslider{position:relative;padding:0;margin:0;overflow:hidden;} .smallslider ul{list-style-type:none;padding:0;margin:0;} .smallslider li{margin:0;padding:0;display:none;} .smallslider li a{margin:0;padding:0;} .smallslider li a img{border:0;padding:0;margin:0;vertical-align:top;} .smallslider h3{position:absolute;font-weight:bold;font-size:12px;margin:0;padding:0;text-indent:2%;line-height:24px;z-index:2;clear:both;width:98%;color:#cccccc;} .smallslider h3 a{padding:0;margin:0;text-indent:0;} .smallslider h3 a:link,.smallslider h3 a:visited{text-decoration:none;color:#ffffff;} .smallslider h3 a:hover{text-decoration:none;color:#FF6600;} .smallslider .current-li{} .smallslider-bar{position:absolute;z-index:1;height:auto;width:auto;} .smallslider-btns{position:absolute;z-index:3;} .smallslider-btns span{background-color:#FFFFFF;border:1px solid #DCDCDC;color:#9F9F9F;cursor:pointer;float:left;font-size:12px;height:15px;line-height:15px;text-align:center; width:15px;} .smallslider-btns span.current-btn{ background-color:#C00100; border:1px solid #A00100; color:white; font-size:13px;font-weight:bold;} .smallslider-lay{position:absolute;background:black;height:24px;width:100%;filter:alpha(opacity=39);-moz-opacity:0.39;opacity:0.39;}

这是完整版的，文件有点大，三个文件，分别html，css，jquery（需要安装jquery支持）

请修改html文件，以适用自己哦