HTML代码:
<div id=fadImgs class=flash_img> <ul class=img-box> <li> <a href="http://shop.faea.com.cn/goods.php?id=46" title="6000台企鹅F1"><img src="http://img.faea.com.cn/www/2013/0726/20130726061455940.jpg" alt="6000台企鹅F1" class="focus-img"/></a> </li> <li> <a href="http://bbs.faea.com.cn/thread-6063-1-1.html" title="打假"><img src="http://img.faea.com.cn/www/2013/0726/20130726101939893.png" alt="打假" class="focus-img"/></a> </li> <li> <a href="http://www.faea.com.cn/product/f2/" title="企鹅F2"><img src="http://www.faea.com.cn/statics/images/F2.jpg" alt="企鹅F2" class="focus-img"/></a> </li> <li> <a href="http://www.faea.com.cn/product/f1/" title="企鹅F1"><img src="http://img.faea.com.cn/www/2013/0725/20130725100014513.jpg" alt="企鹅F1" class="focus-img"/></a> </li> </ul> </div>
JQ插件代码:
(function($) { $.fn.slideImg = function(settings) { settings = jQuery.extend({ speed: "normal", timer: 1000 }, settings); return this.each(function() { $.fn.slideImg.scllor($(this), settings); }); }; $.fn.slideImg.scllor = function($this, settings) { var index = 0; var scllorer=$this.find(".img-box li"); var size=scllorer.size(); var slideH=scllorer.outerHeight(); var $selItem2=$("<div></div>",{"class":"transparent_class"}).appendTo($this); var $selItem=$("<div></div>",{ "class":"flash_item", html:function(){ var $selItemHTML=""; if(size==1){ return; }else if(size>1){ for(var i=0;i<size ;i++){ i==0?$selItemHTML+='<span class="on">'+(i+1)+'':$selItemHTML+='<span class="">'+(i+1)+'</span>'; } return $selItemHTML; } } }).appendTo($this); var li = $(".flash_item span"); var showBox = $(".img-box"); var intervalTime=null; li.hover(function() { var that=this; if (intervalTime) { clearInterval(intervalTime); } intervalTime = setTimeout(function() { index = li.index(that); ShowAD(index); }, 200); }, function() { clearInterval(intervalTime); interval(); }); showBox.hover(function() { if (intervalTime) { clearInterval(intervalTime); } }, function() { clearInterval(intervalTime); interval(); }); function interval(){ intervalTime = setInterval(function() { ShowAD(index); index++; if (index == size) { index = 0; } }, settings.timer); } interval(); var ShowAD = function(i) { showBox.animate({ "top": -i * slideH }, settings.speed); // showBox.children().eq(i).slideDown('normal'); // showBox.children().not(showBox.children().eq(i)).slideUp('normal'); $(".flash_item span").eq(i).addClass("on").siblings().removeClass("on"); }; }; })(jQuery);
启用插件JQ:
<script type=text/javascript> $(function(){$("#fadImgs").slideImg({speed: "normal",timer: 3000 });}); </script>
CSS样式:
.flash_img { POSITION: relative; WIDTH: 960px; HEIGHT: 640px; OVERFLOW: hidden; margin-left:auto; margin-right:auto } .flash_img .img-box { POSITION: absolute } .flash_img .img-box LI { PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px } .transparent_class { /*POSITION: absolute; FILTER: alpha(opacity=30); WIDTH: 100%; BOTTOM: -1px; BACKGROUND: #000; HEIGHT: 42px; LEFT: 0px; -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3*/ } .flash_item { POSITION: absolute; TEXT-ALIGN: center; BOTTOM: 40px; RIGHT: 40px } .flash_item SPAN { POSITION: relative; TEXT-ALIGN: center; LINE-HEIGHT: 15px; TEXT-INDENT: -9999px; MARGIN: 0px 0px 0px 8px; WIDTH: 15px; DISPLAY: block; BACKGROUND: #C1C1C1; FLOAT: left; HEIGHT: 15px; CURSOR: pointer } .flash_item SPAN.on { BACKGROUND: #ff9900; COLOR: #ffffff; FONT-WEIGHT: bold }
OK!大功告成!
声明:本文采用 BY-NC-SA 协议进行授权,如无注明均为原创,转载请注明转自 你好!刘
本文地址:企鹅手机网幻灯片JQ代码
本文地址:企鹅手机网幻灯片JQ代码
发表评论