jquery帶圓圈箭頭只有大圖左右切換
編輯：JQuery常見問題
點擊這裡查看效果
效果圖(查看大圖)：
更多圖片切換
以下是源代碼：
<!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=utf-8" />
<title>jquery帶圓圈箭頭只有大圖左右切換效果 - </title>
<link href="http:///keleyi/phtml/jqtexiao/17/css/keleyi.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script>
(function(d,D,v){d.fn.responsiveSlides=function(h){var b=d.extend({auto:!0,speed:1E3,timeout:7E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!1,prevText:"Previous",nextText:"Next",maxwidth:"",controls:"",namespace:"rslides",before:function(){},after:function(){}},h);return this.each(function(){v++;var e=d(this),n,p,i,k,l,m=0,f=e.children(),w=f.size(),q=parseFloat(b.speed),x=parseFloat(b.timeout),r=parseFloat(b.maxwidth),c=b.namespace,g=c+v,y=c+"_nav "+g+"_nav",s=c+"_here",j=g+"_on",z=g+"_s",
o=d("<ul class='"+c+"_tabs "+g+"_tabs' />"),A={"float":"left",position:"relative"},E={"float":"none",position:"absolute"},t=function(a){b.before();f.stop().fadeOut(q,function(){d(this).removeClass(j).css(E)}).eq(a).fadeIn(q,function(){d(this).addClass(j).css(A);b.after();m=a})};b.random&&(f.sort(function(){return Math.round(Math.random())-0.5}),e.empty().append(f));f.each(function(a){this.id=z+a});e.addClass(c+" "+g);h&&h.maxwidth&&e.css("max-width",r);f.hide().eq(0).addClass(j).css(A).show();if(1<
f.size()){if(x<q+100)return;if(b.pager){var u=[];f.each(function(a){a=a+1;u=u+("<li><a href='#' class='"+z+a+"'>"+a+"</a></li>")});o.append(u);l=o.find("a");h.controls?d(b.controls).append(o):e.after(o);n=function(a){l.closest("li").removeClass(s).eq(a).addClass(s)}}b.auto&&(p=function(){k=setInterval(function(){var a=m+1<w?m+1:0;b.pager&&n(a);t(a)},x)},p());i=function(){if(b.auto){clearInterval(k);p()}};b.pause&&e.hover(function(){clearInterval(k)},function(){i()});b.pager&&(l.bind("click",function(a){a.preventDefault();
b.pauseControls||i();a=l.index(this);if(!(m===a||d("."+j+":animated").length)){n(a);t(a)}}).eq(0).closest("li").addClass(s),b.pauseControls&&l.hover(function(){clearInterval(k)},function(){i()}));if(b.nav){c="<a href='javascript:' class='"+y+" prev'>"+b.prevText+"</a><a href='javascript:' class='"+y+" next'>"+b.nextText+"</a>";h.controls?d(b.controls).append(c):e.after(c);var c=d("."+g+"_nav"),B=d("."+g+"_nav.prev");c.bind("click",function(a){a.preventDefault();if(!d("."+j+":animated").length){var c=f.index(d("."+j)),
a=c-1,c=c+1<w?m+1:0;t(d(this)[0]===B[0]?a:c);b.pager&&n(d(this)[0]===B[0]?a:c);b.pauseControls||i()}});b.pauseControls&&c.hover(function(){clearInterval(k)},function(){i()})}}if("undefined"===typeof document.body.style.maxWidth&&h.maxwidth){var C=function(){e.css("width","100%");e.width()>r&&e.css("width",r)};C();d(D).bind("resize",function(){C()})}})}})(jQuery,this,0);
$(function() {
$(".f426x240").responsiveSlides({
auto: true,
pager: true,
nav: true,
speed: 700
});
$(".f160x160").responsiveSlides({
auto: true,
pager: true,
speed: 700
});
});
</script>
<style>
.keleyiimg{border:0px;width:640px;height:400px;}
</style>
</head>
<body>
<div class="new_banner">
<ul class="rslides f426x240">
<li><a href="http://"><img src="http:///image/a/4ux3f2i2.jpg" class="keleyiimg" /></a></li>
<li><a href="http:///a/bjac/06r1x7tg.htm"><img src="http:///image/a/t1srjuxw.jpg" class="keleyiimg" /></a></li>
<li><a href="http:///a/bjad/8pwhsjna.htm"><img src="http:///image/a/2o411t0f.jpg" class="keleyiimg" /></a></li>
<li><a href="http:///a/bjac/s3sw6q5t.htm"><img src="http:///image/a/8cqe2jeh.jpg" class="keleyiimg" /></a></li>
<li><a href="http:///a/bjac/9jsb6j23.htm"><img src="http:///image/a/o2efxt56.jpg" class="keleyiimg" /></a></li>
<li><a href="http:///a/bjac/gucmqug3.htm"><img src="http:///image/a/clyf0qh8.jpg" class="keleyiimg" /></a></li>
<li><a href="http:///a/bjac/bb5e7986.htm"><img src="http:///image/a/9dk965e3.jpg" class="keleyiimg" /></a></li>
<li><a href="http:///dev/453467666cab56d0.htm"><img src="http:///image/a/k2mx9cgb.jpg" class="keleyiimg" /></a></li>
</ul>
</div>
<div style="width:780px;margin:0px auto;clear:both;">來源：<a href="http:///" target="_blank"></a> <a href="http:///a/bjad/8pwhsjna.htm">原文</a> <font color="#FFFFFF">適用浏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </font></div>
</body>
</html>
- 上一頁:jquery圖片放大鏡插件使用
- 下一頁:jQ的one()方法
小編推薦
熱門推薦