[原创]jquery 1946bv1946伟德国际博彩官网图片聚焦切换

原创 tQuery 随笔 jquery 1.7k阅读 2011-08-27 20:35:44 举报
<DIV><IMG src="http://www.w3cfuns.com/data/attachment/album/201108/27/2035407w9drdsdhcxzjchx.jpg"></DIV>;
<DIV>&nbsp;</DIV>
<DIV>因为跟同事一起搞淘宝散了,又要开始找工作了。是时候得自己多动手练练啦,最近要多看看书,学会写出jquery插件形式<A href="http://moxiaohe.com/quot;<" href="http://u.115.com/file/e657w5d2"" rel="nofollow" target="_blank">http://u.115.com/file/e657w5d2"; target=_blank>!</A></DIV>
<DIV>&nbsp;</DIV>
<DIV><A href="http://moxiaohe.com/quot;<" href="http://u.115.com/file/e657w5d2"" rel="nofollow" target="_blank">http://u.115.com/file/e657w5d2"; target=_blank>ishow</A>下载</DIV>
<DIV>展示地址:<a href="http://moxiaohe.com/quot;<" href="http://63d2.ta.ipc.la/ishow/index.html"" rel="nofollow" target="_blank">http://63d2.ta.ipc.la/ishow/index.html"; target="_blank">http://63d2.ta.ipc.la/ishow/index.html</A></DIV>;
<DIV>&nbsp;</DIV>
<DIV>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<A href="http://moxiaohe.com/quot;<" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"" rel="nofollow" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"; target=_blank>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</A>"&gt;<BR>&lt;html xmlns="<A href="http://moxiaohe.com/quot;<" href="http://www.w3.org/1999/xhtml"" rel="nofollow" target="_blank">http://www.w3.org/1999/xhtml"; target=_blank>http://www.w3.org/1999/xhtml</A>"&gt;<BR>&lt;head&gt;<BR>&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;<BR>&lt;title&gt;ishow1946bv1946伟德国际博彩官网展示&lt;/title&gt;<BR>&lt;style type="text/css"&gt;<BR>{margin:0; padding:0}<BR>img{border:0}<BR>body{font:12px/1.5em Arial, Helvetica, sans-serif; color:#666}<BR>#ishow{margin:100px auto; border:1px solid #ccc; position:relative; width:750px; overflow:hidden}<BR>#ishow_bar{ position:absolute; right:10px; bottom:10px;}<BR>#ishow_bar ul{list-style:none}<BR>#ishow_bar li{ float:left;}<BR>#ishow_bar li a{display:block; padding:0 5px; margin:0 0 0 5px; border:1px solid #ababab; text-decoration:none; color:#333; background:#fff; opacity:0.8;filter:(opacity=80)}<BR>#ishow_bar li a.on{ border:1px solid #f99; background:#fc0; color:#f30}<BR>.ishow_img2,.ishow_img3,.ishow_img4{display:none}<BR>&lt;/style&gt;<BR>&lt;script type="text/javascript" src="jquery-1.3.2.min.js"&gt;&lt;/script&gt;<BR>&lt;script&gt;<BR>$(function(){<BR>&nbsp;&nbsp;&nbsp;&nbsp; var imgId="#ishow_img";&nbsp; //图片所在div<BR>&nbsp; var bar="#ishow_bar"&nbsp;&nbsp;&nbsp;&nbsp; //导航工具div<BR>&nbsp;&nbsp;&nbsp;&nbsp; //自然鼠标滑过效果<BR>&nbsp; $(""+bar).find("a").hover(ishow_on);<BR>&nbsp; //设置每3s自动切换滑过效果<BR>&nbsp; setInterval(ishow_slide,3000);<BR>&nbsp; /<BR>&nbsp; ishow_on(index) 聚焦显示函数(索引)<BR>&nbsp; */<BR>&nbsp; function ishow_on(index){<BR>&nbsp;&nbsp;&nbsp; if(isNaN(index.valueOf())){ //判断是否含有参数,是则使用默认鼠标滑过事件,否则为自动切换<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; index=$(""+bar).find("a").index($(this));&nbsp;&nbsp; //取得当前鼠标已过的a标签索引index<BR>&nbsp;&nbsp;&nbsp; }else{<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; index=Math.floor(index); //自动切入传入索引值index<BR>&nbsp;&nbsp;&nbsp; }<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(""+bar).find("a").eq(index).addClass("on")&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //活动a标签添加聚焦样式on<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .parent().siblings().find("a").removeClass("on");&nbsp; //同层a标签取消聚焦样式on<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(""+imgId).find("a").eq(index).show()&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //与聚焦a标签同索引的图片显示<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .siblings().hide();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //与聚焦a标签同层图片隐藏<BR>&nbsp;&nbsp;&nbsp;<BR>&nbsp; }<BR>&nbsp; function ishow_slide(){<BR>&nbsp;&nbsp;&nbsp;&nbsp; var i=0;<BR>&nbsp;&nbsp;var $img_on=$(""+bar).find("li").children(".on");<BR>&nbsp;&nbsp;var index=$(""+bar).find("a").index($img_on);<BR>&nbsp;&nbsp;index=Math.floor(index);<BR>&nbsp;&nbsp;if(index==3){&nbsp; //判断是否最后一张图片,是则重置下一张为第一张图片<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; i=0;<BR>&nbsp;&nbsp;}else{<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; i=index+1;<BR>&nbsp;&nbsp;}<BR>&nbsp;&nbsp;ishow_on(i); //调用聚焦显示函数<BR>&nbsp; }</DIV>
<DIV>})<BR>&lt;/script&gt;<BR>&lt;/head&gt;<BR>&lt;body&gt;<BR>&lt;div id="ishow"&gt;<BR>&nbsp;&nbsp; &lt;div id="ishow_bar"&gt;<BR>&nbsp;&nbsp; &lt;ul&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="http://moxiaohe.com/quot;#"" class="on"&gt;1&lt;/a&gt;&lt;/li&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="http://moxiaohe.com/quot;#""&gt;2&lt;/a&gt;&lt;/li&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="http://moxiaohe.com/quot;#""&gt;3&lt;/a&gt;&lt;/li&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="http://moxiaohe.com/quot;#""&gt;4&lt;/a&gt;&lt;/li&gt;<BR>&nbsp;&nbsp; &lt;/ul&gt;<BR>&nbsp;&nbsp; &lt;/div&gt;<BR>&nbsp;&nbsp; &lt;div id="ishow_img"&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="http://moxiaohe.com/quot;#"" class="ishow_img1"&gt;&lt;img src="1.jpg" /&gt;&lt;/a&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="http://moxiaohe.com/quot;#"" class="ishow_img2"&gt;&lt;img src="2.jpg" /&gt;&lt;/a&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="http://moxiaohe.com/quot;#"" class="ishow_img3"&gt;&lt;img src="3.jpg" /&gt;&lt;/a&gt;<BR>&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="http://moxiaohe.com/quot;#"" class="ishow_img4"&gt;&lt;img src="4.jpg" /&gt;&lt;/a&gt;<BR>&nbsp;&nbsp; &lt;/div&gt;<BR>&lt;/div&gt;<BR>&lt;/body&gt;<BR>&lt;/html&gt;</DIV>
评论 ( 0 )
最新评论
暂无评论
赶紧努力消灭 0 回复