jquery+css制作左右圆角按钮焦点图切换特效

4周前 (04-20 16:40)阅读27回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值4529
  • 级别管理员
  • 主题905
  • 回复2
楼主

jquery+css制作圆角按钮焦点图图片切换特效，用户可用鼠标点击左右按钮或底部按钮来实现图片切换显示功能。

<!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" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>jquery+css制作左右圆角按钮焦点图切换特效_武鸣人</title>
<style type=text/css>
 BODY {COLOR: #666}
UL, P{PADDING: 0px; MARGIN: 0px;}
A {COLOR: #333}
A:hover {COLOR: #e51a45; TEXT-DECORATION: none}
#imgPlay {
MARGIN: 8px auto; OVERFLOW: hidden; WIDTH: 960px; ZOOM: 1; POSITION: relative; HEIGHT: 304px
}
#imgPlay .imgs IMG {
BORDER-RIGHT: #dbdbdb 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #dbdbdb 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #dbdbdb 1px solid; WIDTH: 956px; PADDING-TOP: 1px; BORDER-BOTTOM: #dbdbdb 1px solid
}
#imgPlay .imgs LI {
FLOAT: left; POSITION: relative
}
#imgPlay .imgs {
WIDTH: 5760px
}
#imgPlay .btn {
RIGHT: 12px; OVERFLOW: hidden; WIDTH: 112px; BOTTOM: 12px; TEXT-INDENT: -9999px; POSITION: absolute; HEIGHT: 29px;
}
#imgPlay .btn A {
BACKGROUND: url(/img/20240420_www_wuming_ren_34.png) no-repeat;BACKGROUND-POSITION: 0px 0px; DISPLAY: block; WIDTH: 112px; HEIGHT: 29px;
}
#imgPlay .btn A:hover {
BACKGROUND: url(/img/20240420_www_wuming_ren_34.png) no-repeat;BACKGROUND-POSITION: 0px -30px;
}
#imgPlay .prev {
BACKGROUND: url(/img/20240420_www_wuming_ren_35.png) no-repeat 0px 0px; LEFT: 1px; WIDTH: 46px; CURSOR: pointer; TEXT-INDENT: -9999px; POSITION: absolute; TOP: 110px; HEIGHT: 81px
}
#imgPlay .next {
BACKGROUND: url(/img/20240420_www_wuming_ren_35.png) no-repeat 0px 0px; LEFT: 1px; WIDTH: 46px; CURSOR: pointer; TEXT-INDENT: -9999px; POSITION: absolute; TOP: 110px; HEIGHT: 81px
}
#imgPlay .next {
BACKGROUND-POSITION: right 0px; RIGHT: 1px; LEFT: auto
}
#imgPlay .num {
DISPLAY: inline; LEFT: 400px; POSITION: absolute; TOP: 275px; HEIGHT: 19px
}
#imgPlay .num SPAN {
DISPLAY: inline-block; BACKGROUND: url(/img/20240420_www_wuming_ren_35.png) no-repeat -19px -83px; MARGIN: 0px 2px; OVERFLOW: hidden; WIDTH: 14px; CURSOR: pointer; LINE-HEIGHT: 0; HEIGHT: 13px
}
#imgPlay .num SPAN.on {
BACKGROUND-POSITION: 1px -83px
}
#imgPlay .num .lc_wuming_ren {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(/img/20240420_www_wuming_ren_36.png) no-repeat; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 13px; PADDING-TOP: 3px; HEIGHT: 16px
}
#imgPlay .num .mc {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(/img/20240420_www_wuming_ren_36.png) no-repeat; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 13px; PADDING-TOP: 3px; HEIGHT: 16px
}
#imgPlay .num .rc_wuming {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(/img/20240420_www_wuming_ren_36.png) no-repeat; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 13px; PADDING-TOP: 3px; HEIGHT: 16px
}
#imgPlay .num .mc {
BACKGROUND: url(/img/20240420_www_wuming_ren_37.png) repeat-x
}
#imgPlay .num .rc_wuming {
BACKGROUND: url(/img/20240420_www_wuming_ren_38.png) no-repeat
}
#imgPlay #numInner {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; PADDING-BOTTOM: 0px; PADDING-TOP: 3px; POSITION: absolute; TOP: 275px; TEXT-ALIGN: center
}   
</style>
<SCRIPT src="/img/jquery-wuming.js" type=text/javascript></SCRIPT>
<SCRIPT type="text/javascript">
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('$(Y).X(3(){$(\'a[1p="#"]\').k(3(){$(4).2l(\'1p\',\'2h:2w(0)\')});$(\'.2v 8\').k(3(){7 o=$(4);$(4).r(\'.s\').d(3(){7 j=$(4).1J();o.r(\'.s\').6(\'5\').b(j).9(\'5\');o.r(\'.2u\').q().b(j).14(J)})});$(\'.2b 8\').k(3(m){$(4).r(\'a\').v(\'T\',-$(4).u());$(4).e(3(){$(4).r(\'a\').H({\'T\':\'0\'},x)},3(){$(4).r(\'a\').H({\'T\':$(4).u()},{1U:x,23:3(){$(4).v(\'T\',-$(4).U(\'8\').u())}})})});$(\'#1q 1n\').1Z(\'1Y\',3(){$(\'#1q 1n\').6(\'e\');$(4).9(\'e\')});$(\'.1h .1r\').k(3(i){$(4).e(3(){$(\'.1h .1r\').6(\'5\').b(i).9(\'5\');$(\'.1h 1o\').q().b(i).C()},3(){$(4).r(\'1o\').q();$(4).6(\'5\')})});$(\'.22 8\').k(3(i){$(4).d(3(){f(i==10)M l;$(\'.Z 8\').6(\'5\').b(i).9(\'5\');$(\'.Z p\').q().b(i).C()})});7 F=0;7 W=0;$(\'.Z .1B\').d(3(){f(F==1){$(4).6(\'5\');$(\'.Q\').q(x);F=0}N{$(4).9(\'5\');$(\'.Q\').C(x);F=1}M l});$(\'.Q\').e(3(){W=1},3(){W=0});$(\'1K\').1Q(\'d\',3(){f(F==1&&W==0){$(\'.Q\').q(x);$(\'.Z .1B\').6(\'5\');F=0}});3 1z(){f($(\'.I 8\').1s<=1)M;7 O=$(\'.I 8:1A\');O.q();$(\'.I 8:1A\').29();$(\'.I 8:1P\').2a(O);O.25(J)}27.1R(1z,1F);$(\'.1C 8\').k(3(i){$(4).e(3(){$(\'.1C 8\').6(\'5\').b(i).9(\'5\')})});$(\'.1u 8\').k(3(i){$(4).e(3(){$(\'.1u 8\').6(\'5\').b(i).9(\'5\')})});$(\'.1y 1x\').k(3(i){$(4).d(3(){$(\'.1y 1x\').6(\'5\').b(i).9(\'5\')})});$(\'.1w 1a\').k(3(i){$(4).e(3(){$(\'.1w 1a\').6(\'5\').b(i).9(\'5\')})});$(\'.1V .1T\').e(3(){$(\'.1l\').14(\'1t\')},3(){$(\'.1l\').1N(\'1t\')});$(\'.1W 8\').e(3(){$(4).9(\'5\')},3(){$(4).6(\'5\')});$(\'.1S .1v a\').k(3(i){$(4).d(3(){$(\'.1v a\').6(\'5\').b(i).9(\'5\')})});$(\'.2r 8\').e(3(){$(4).9(\'5\')},3(){$(4).6(\'5\')});$(\'.2q 8\').e(3(){$(4).9(\'5\')},3(){$(4).6(\'5\')});$(\'.2s .2t\').1g(3(){$(\'#1D\').u(24);$(4).1c(\'\\2p\\2y\')},3(){$(\'#1D\').u(\'1O\');$(4).1c(\'\\2z\\2x\')});$(\'.19 .1E a\').k(3(i){$(4).d(3(){$(\'.19 .1E a\').6(\'5\').b(i).9(\'5\');$(\'.19 1a\').q().b(i).C()})});$(\'.2f 8 .t .2g\').d(3(){$(4).U().U().r(\'.t\').C();$(4).U().q()})});$(Y).X(3(){7 t=l;7 1b=\'\';7 V=J;7 w=2c;7 n=$(\'#g 8\').1s;7 S=n*18;7 15=(w-(S+26))/2;7 c=0;$(\'#g\').16(w*n);$(\'#g 8\').k(3(i){1b+=\'<E></E>\'});$(\'#A\').16(S).1c(1b);$(\'#G .2o\').16(S);$(\'#G .2k\').v(\'1m\',15);$(\'#A\').v(\'1m\',15+13);$(\'#A E:1P\').9(\'5\');3 17(D,1k){D=$(D)?$(D):D;D.9(1k).2j().6(1k)}$(\'#G .2n\').d(3(){11(1)});$(\'#G .2m\').d(3(){11(-1)});3 11(j){f($(\'#g\').2i(\':2d\')==l){c+=j;f(c!=-1&&c!=n){$(\'#g\').H({\'y\':-c*w+\'z\'},V)}N f(c==-1){c=n-1;$("#g").v({"y":-(w*(c-1))+"z"});$("#g").H({"y":-(w*c)+"z"},V)}N f(c==n){c=0;$("#g").v({"y":-w+"z"});$("#g").H({"y":0+"z"},V)}17($(\'#A E\').b(c),\'5\')}}$(\'#A E\').d(3(){c=$(4).1J();1L(c);17($(\'#A E\').b(c),\'5\')});3 1L(i){f($(\'#g\').v(\'y\')!=-i*w+\'z\'){$(\'#g\').v(\'y\',-i*w+\'z\');$(\'#g\').1N(0,3(){$(\'#g\').14(J)})}}3 1e(){t=1R(3(){11(1)},1F)}3 1M(){f(t)1X(t)}$("#G").e(3(){1M()},3(){1e()});1e()});$(Y).X(3(){7 B=l;7 L=l;$(\'.1G .s\').d(3(){f(B==l){$(\'.K\').C(x);$(4).9(\'5\');B=1i}N{$(\'.K\').q(x);$(4).6(\'5\');B=l}M l});$(\'.K\').e(3(){L=1i},3(){L=l});$(\'1K\').1Q(\'d\',3(){f(B==1i&&L==l){$(\'.K\').q(x);$(\'.1G .s\').6(\'5\');B=l}})});$(Y).X(3(){$(\'.1I\').k(3(i){$(4).r(\'.R\').d(3(){$(\'.1I\').b(i).r(\'p\').1g()})});$(".R").1g(3(){$(4).9("R-2")},3(){$(4).6("R-2")})});3 20(){7 1j=$(\'.21\').u();7 1d=$(\'.P\').u();7 1H=$(\'.P .28\').u();7 1f=1j-1d;f(1f>0){7 h=1d+1f-12;$(\'.P\').u(h)}f(1j-1H<2e){$(\'.P\').u(\'1O\')}}',62,160,'|||function|this|on|removeClass|var|li|addClass||eq||click|hover|if|actor||||each|false|||||hide|find|||height|css||200|marginLeft|px|numInner|isshowcity|show|ele|span|intIndexCity|imgPlay|animate|scroll_txt|500|s_c_links|ishovercitys|return|else|temp|artists_l|s_citys|hztitle|numWidth|top|parent|speed|intHoverCity|ready|document|u_city_nav||slide|||fadeIn|_left|width|cur||buy_caption|dl|str|html|lh|start|dh|toggle|category_list|true|rh|currentClass|minTips|left|td|ol|href|calendar|item|length|fast|list_1|tab_min_b|tr_commend|dd|vote_m|scrollList|last|more|live_top|city|tab_t|5000|s_city|list|sd|index|body|fade|stopt|fadeOut|auto|first|bind|setInterval|min_tip|help|duration|ticketInfo|videoList|clearInterval|mouseover|live|artHeight|artists_r|u_city_a|complete||slideDown||window|tab_min_in|remove|before|artist_l|960|animated|90|vocal_list|c7|javascript|is|siblings|num|attr|prev|next|mc|u5c55|tr_pic_list|news_list|sift|expand|info|perform|void|u7f29|u5f00|u6536'.split('|'),0,{}))
</SCRIPT>
</head>
<body style="text-align:center">
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
需要加载js文件，请刷新页面后看效果！
<DIV id=imgPlay>
<UL class=imgs id=actor>
  <LI><A href="https://www.wuming.ren/" target=_blank><IMG title="武鸣人一号图片" src="/img/20240420_www_wuming_ren_39.jpg"></A><DIV class=btn><A title=立即购买 href="https://www.wuming.ren/" target=_blank>立即购买</A></DIV></LI>
  <LI><A href="https://www.wuming.ren/" target=_blank><IMG title="武鸣人二号图片" src="/img/20240420_www_wuming_ren_40.jpg"></A><DIV class=btn><A title=立即购买 href="https://www.wuming.ren/" target=_blank>立即购买</A></DIV></LI>
  <LI><A href="https://www.wuming.ren/" target=_blank><IMG title="武鸣人三号图片" src="/img/20240420_www_wuming_ren_41.jpg"></A><DIV class=btn><A title=立即购买 href="https://www.wuming.ren/" target=_blank>立即购买</A></DIV></LI>
  <LI><A href="https://www.wuming.ren/" target=_blank><IMG title="武鸣人四号图片" src="/img/20240420_www_wuming_ren_42.jpg"></A><DIV class=btn><A title=立即购买 href="https://www.wuming.ren/" target=_blank>立即购买</A></DIV></LI>
  <LI><A href="https://www.wuming.ren/" target=_blank><IMG title="武鸣人五号图片" src="/img/20240420_www_wuming_ren_43.jpg"></A><DIV class=btn><A title=立即购买 href="https://www.wuming.ren/" target=_blank>立即购买</A></DIV></LI>
  <LI><A href="https://www.wuming.ren/" target=_blank><IMG title="武鸣人六号图片" src="/img/20240420_www_wuming_ren_44.jpg"></A><DIV class=btn><A title=立即购买 href="https://www.wuming.ren/" target=_blank>立即购买</A></DIV></LI>
</UL>
<DIV class=num>
<P class=lc_wuming_ren></P>
<P class=mc></P>
<P class=rc_wuming></P></DIV>
<DIV class=num id=numInner></DIV>
<DIV class=prev>上一张</DIV>
<DIV class=next>下一张</DIV></DIV>
</body>
</html>


赞0
踩0
☆收藏0
箭头按钮图片切换
回帖

jquery+css制作左右圆角按钮焦点图切换特效 期待您的回复！

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息