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代码
发表评论