jQuery仿淘宝幻灯片图片轮播效果二款

发布时间：2018-08-26 06:57:31 所属栏目：编程来源：站长网

导读：今天再介绍两款仿淘宝网的轮播图片效果，基于 jQuery 框架，如果你的网站很多功能都基于jQuery的话，那么推荐使用，这样可以提高网站的性能，并且jQuery是非常优秀的脚本，通过它可以实现很多功能。回顾一下以前的jQuery图片轮播：基于jQuery的超大全屏

　　今天再介绍两款仿淘宝网的轮播图片效果，基于jQuery框架，如果你的网站很多功能都基于jQuery的话，那么推荐使用，这样可以提高网站的性能，并且jQuery是非常优秀的脚本，通过它可以实现很多功能。

　　回顾一下以前的jQuery图片轮播：

　　基于jQuery的超大全屏背景/幻灯片自动播放

　　仿Flash幻灯带缓冲的焦点图切换轮播(黑色风格)

　　jQuery.slide.5.0图片集效果,自动切换播放

　　再看本文的效果：

　　网页演示：点击这里

　　运行演示：

<!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" /> <title>基于jQuery的两款仿淘宝网图片轮播效果 - Liehuo.Net</title> <base href="http://www.veryhuo.com"> <script src="/uploads/common/js/jquery-1.4.min.js" language="javascript" type="text/javascript"></script> <script src="/uploads/common/js/easing.js" language="javascript" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(function() { var $o = $(".j_Slide"); var ks = $o.find("ol").Oslide({ slidetag:$o.find("ol>li"), easing:"easeInOutCirc", speed:450 }); var $p = $(".j_Slide1"); var ks = $p.find("ol").Oslide({ slidetag:$p.find("ol>li"), btntag:$p.find(".handel"), direct:'right', easing:"easeInOutCirc" }); }); /// (function($){ $.fn.Oslide = function(setting){ var ps =$.fn.extend({ slidetag:null, btntag:null, cur:0, direct:"up", height:null, width:null, btnClass:"hover", length:null, bffunc:function(){}, easing:"", speed:350, time:4000 // 如果等于null 就没有自动滚动 }, setting); var $self = $(this); var events ={ __init:function(e) { $self.addClass("direct-"+ps.direct); ps.direct = ps.direct.toLowerCase(); ps.oldslidetag=ps.slidetag; ps.slidetag=(ps.slidetag==null)?$self.children():ps.slidetag; ps.length=(ps.length==null)?ps.slidetag.length:ps.length; ps.height=(ps.height==null)?ps.slidetag.eq(0).height():ps.height; ps.width=(ps.width==null)?ps.slidetag.eq(0).width():ps.width; $self.wrap(function(){ return '<div class="Oslide-wrap" />'; }) if(!ps.btntag) { var s = "<ul class='lbtn'>"; for(var i=0;i<ps.length;i++){s+="<li><a href='javascript:void(0)'>"+Number(i+1)+"</a></li>";} $self.parent().append(s+"</ul>"); ps.btntag=$self.parent().find('.lbtn'); } ps.btntag.children().bind("mouseover", function(){ m = ps.btntag.find("."+ps.btnClass).index(); if(m==$(this).index()) return false; events.__addFlag($(this).index()); events.__slide($(this).index()); }); if(ps.direct.toLowerCase()=="right") $self.css({ "width":ps.width*ps.length, "left":-ps.width*(ps.length-1) }) if(ps.direct.toLowerCase()=="down") { var r = []; for(var i=0;i<ps.slidetag.length;i++) r.push(ps.slidetag.eq(i).clone()) $self.html(""); for(var i=0;i<r.length;i++) $(r[i]).prependTo($self); $self.css("top",-ps.height*(ps.length-1)) } events.__addFlag(ps.cur); events.__setPosition(ps.cur); if(ps.time!=null) events.__addTimelistener(); }, __slide:function(next){ var og ={ "cg" :next - ps.cur, "bfuc":function(){}, "fuc": function(){}, "scollHei":function(){ var h; if(ps.direct=="up") h=-ps.height*ps.cur; else if(ps.direct=="down") h=ps.height*(ps.cur-ps.length+1) else h=0; return h; }, "scollWid":function(){ var w; if(ps.direct=="left") w=-ps.width*ps.cur; else if(ps.direct=="right") w=ps.width*(ps.cur-ps.length+1) else w=0; return w; } }; if((!next&&next!=0)||(ps.cur==ps.length-1&&next==0)) { if(ps.cur ==ps.length-1) { ps.cur = 0; og.bfuc = function(){ if(ps.direct=="down") ps.slidetag.slice(1,ps.length).prependTo($self); else ps.slidetag.slice(0,ps.length-1).appendTo($self); events.__resetPosition(); } og.scollHei= function(){ var h; if(ps.direct=="up") h=-ps.height; else if(ps.direct=="down") h=-ps.height*(ps.length-2); else h=0; return h; } og.scollWid= function(){ var w; if(ps.direct=="left") w=-ps.width; else if(ps.direct=="right") w=-ps.width*(ps.length-2); else w=0; return w; } og.fuc = function(){ ps.slidetag=(ps.oldslidetag==null)?$self.children():ps.slidetag; if(ps.direct=="down") ps.slidetag.slice(ps.length-1,ps.length).prependTo($self); else $self.children().slice(0,1).appendTo($self); events.__resetPosition(); } } else ps.cur++; cg=1; } else ps.cur = next; og.bfuc(); ps.bffunc(); $self.stop().animate({'top':og.scollHei(),'left':og.scollWid()},ps.speed,ps.easing,function(){og.fuc()}); events.__addFlag(ps.cur); }, __addFlag:function(n){ ps.btntag.children().eq(n).addClass(ps.btnClass).siblings().removeClass(ps.btnClass); }, __addTimelistener:function(n){ ps.myScroll = setInterval(function(){events.__slide()},4000); ps.btntag.children().add(ps.slidetag).hover(function(){ clearInterval(ps.myScroll); },function(){ ps.myScroll = setInterval(function(){events.__slide()},4000); }); }, __resetPosition:function(){ if(ps.direct=="left"||ps.direct=="up") $self.css({"top":"0px","left":0}); else if(ps.direct=="right") $self.css({"left":-ps.width*(ps.length-1)}); else if(ps.direct=="down") $self.css({"top":-ps.height*(ps.length-1)}); }, __setPosition:function(n){ n=n||0; if(ps.direct=="left") $self.css("left",-n*ps.width); else if(ps.direct=="right") $self.css("left",-(ps.length-n-1)*ps.width) if(ps.direct=="up") $self.css("top",-n*ps.height); else if(ps.direct=="down") $self.css("top",-(ps.length-n-1)*ps.height) } } events.__init(); for(var event in events) { var e = "Oslide." + event; $(this).unbind(e); $(this).bind(e, events[event]); } }; })(jQuery); </script> <style> /*reset*/ html{color:#666;background:#FFF;} body{font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:none;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} li{list-style:none;}caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';} abbr,acronym{border:none;font-variant:normal;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} input,button,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;} input,button,textarea,select{*font-size:100%;} legend{color:#000;}del,ins{text-decoration:none;} small{font-size:100%;} pre,code,tt{font:12px 'andale mono', 'lucida console', monospace;line-height:1.5} p,h1,h2,h3,span,em{color:#333333;} a,a:link,a:visited{color:#333333;text-decoration:none; cursor:pointer; } a:hover{color:#008b00;text-decoration: underline;} /*clear clearfix*/ .clearfix:after {content: "�020"; display: block; height: 0;clear: both; visibility: hidden; } .clearfix {zoom: 1;} .clear{clear:both;} /*box*/ .hd h3 {font-size:14px;color:#444444;padding-left: 10px; color:#fff; line-height:30px;} /*loading*/ .loading{background:#f9fdff url('../images/T16WJqXaXeXXXXXXXX-32-32.gif') no-repeat 50% 50%;} /*dotted*/ /*Slide*/ .j_Slide{margin:30px 50px;border:5px #c2dae5 solid; width:470px; height:150px;overflow:hidden;position:relative;-webkit-border-radius:4px;} .j_Slide .tb-slide-list{position:absolute; width:99999px;} .j_Slide .tb-slide-list li{height:150px;} .j_Slide .tb-slide-list li img{width:470px;height:150px;} .lbtn{position:absolute;z-index:3;bottom:3px;right:5px;} .lbtn li{float:left;line-height:21px;width:24px;padding:0 2px;} .lbtn li a,.lbtn li a:link,.lbtn li a:active,.lbtn li a:visited{display:block;text-align:center;background:url('../images/lbtnA_bg.gif') no-repeat left 50%;line-height:21px;font-family:"Arial Unicode MS";} .lbtn li.hover a,.lbtn li.hover a:link,.lbtn li.hover a:active,.lbtn li.hover a:visited {color:#fff;font-weight:bold;font-family:Verdana;text-decoration:none;background:url('../images/lbtnA_bg_hover.gif') no-repeat left top;} .j_Slide1{width:432px;height:152px;overflow:hidden;margin:30px 50px;} .j_Slide1 .tb-slide-list{position:absolute; width:99999px;} .j_Slide1 .bd{overflow:hidden;} .j_Slide1 .tb-slide-list li img{width:200px;height:100px;padding:8px;overflow:hidden;} .j_Slide1 .hd{height:30px;position:relative;background:#666;-webkit-border-top-left-radius:4px;-webkit-border-top-right-radius:4px;} .j_Slide1 .bd{position:relative;border:1px #000 solid;height:116px;} .j_Slide1 .hd .handel{position:absolute;right:5px;top:6px;} .j_Slide1 .hd .handel li{float:left;} .j_Slide1 .hd .handel li a,.j_Slide1 .hd .handel li a:link,.j_Slide1 .hd .handel li a:active,.j_Slide1 .hd .handel li a:visited{text-decoration:none;padding:2px 4px;} .j_Slide1 .hd .handel li.hover a,.j_Slide1 .hd .handel li.hover a:link,.j_Slide1 .hd .handel li.hover a:active,.j_Slide1 .hd .handel li.hover a:visited{color:#fff;} .direct-left{width:99999px;} .direct-left li{float:left;} .direct-right{} .direct-right li{float:right;} </style> </head> <body> <div class="j j_Slide loading"> <ol class="tb-slide-list"> <li class="J_ECPM"><a href="#" target="_blank"><img src="/uploads/common/images/1.jpg" /></a></li> <li class="J_ECPM"><a href="#" target="_blank"><img src="/uploads/common/images/2.jpg" /></a></li> <li class="J_ECPM"><a href="#" target="_blank"><img src="/uploads/common/images/3.jpg" /></a></li> <li class="J_ECPM"><a href="#" target="_blank"><img src="/uploads/common/images/4.jpg" /></a></li> </ol> </div> <div class="j j_Slide1"> <div class="hd"> <h3>最新商家</h3> <ul class="handel clearfix"> <li><a href="javascript:void(0)">●</a></li> <li><a href="javascript:void(0)">●</a></li> <li><a href="javascript:void(0)">●</a></li> </ul> </div> <div class="bd"> <ol class="tb-slide-list clearfix"> <li class="J_ECPM"><a href="#" target="_blank"><img src="/uploads/common/images/liehuonet_400x345_1.jpg" /></a><a href="#" target="_blank"><img src="/uploads/common/images/liehuonet_400x345_2.jpg" /></a></li> <li class="J_ECPM"><a href="#" target="_blank"><img src="/uploads/common/images/liehuonet_400x345_3.jpg" /></a><a href="#" target="_blank"><img src="/uploads/common/images/liehuonet_400x345_4.jpg" /></a></li> <li class="J_ECPM"><a href="#" target="_blank"><img src="/uploads/common/images/liehuonet_400x345_5.jpg" /></a><a href="#" target="_blank"><img src="/uploads/common/images/liehuonet_400x345_6.jpg" /></a></li> </ol> </div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

把not in 更换成not e	mydumper工具运用介绍
别花冤枉钱买专栏了！	Mysql索引类型创建错误