当页面刷新是,效果如图1:
图片的第一张显示出来,没过几秒钟图片循环轮播,当鼠标在右边小图上移动的时候,鼠标所在的位置显示亮,其他小图就显示成灰色透明状态,大图也显示的是当前鼠标在的位置的小图的大图,如图2:
当鼠标移开位置的时候,图片的显示就跟图1的样式一样的,所以这个是一个不错的效果插件。
$(function(){
var markers = [];
function blockhight(boxCls, itemCls, sizeArr) {
var box = $(boxCls);
itemCls = itemCls || "a";
box.find(itemCls).each(function (i) {
var self = $(this);
var arr, w, h, marker;
if (typeof sizeArr !== "undefined") {
arr = sizeArr[i].split(",");
w = arr[0];
h = arr[1];
} else {
w = self.width() || self.find("img").attr("width");
h = self.height() || self.find("img").attr("height");
}
marker = $('<div style="cursor:pointer;top:0;left:0;position:absolute;' + w + 'px;height:' + h + 'px;filter:alpha(opacity=0);opacity: 0;background-color:#000;"></div>');
self.css({
"position": "relative"
});
self.append(marker);
self.mouseover(function () {
var i;
for (i = 0; i < markers.length; i++) {
markers[i].show().css({
"opacity": '0.2',
"filter": "alpha(opacity=20)"
});
}
marker.hide();
});
markers.push(marker);
});
box.mouseleave(function () {
var i;
for (i = 0; i < markers.length; i++) {
markers[i].css({
"opacity": '0',
"filter": "alpha(opacity=0)"
});
}
});
};
var controller=function(){
var initialize=0;
var IndexLi =$('.L_slider_wrap').find('.L_slider_nav li').size();
$('.L_slider_nav li').mouseover(function(){
var index = $('.L_slider_nav li').index($(this));
go(index);
});
if(true){
var _self =$('.L_slider_wrap').find('.L_slider_nav li');
var _selfelse = $('.L_slider_wrap').find('.L_slider_banner li');
loop();
}
_self.mouseenter(function() {
stop();
});
_self.mouseleave(function() {
stop();
loop();
})
_selfelse.mouseenter(function() {
stop();
});
_selfelse.mouseleave(function() {
stop();
loop();
})
function loop(){
startRun=setInterval(function(){
var currIndex = initialize + 1;
if (currIndex>=IndexLi) {
initialize= 0;
currIndex=0;
} else {
initialize = currIndex;
}
go(currIndex);
},2000);
}
function stop() {
clearInterval(startRun);
}
function go(page){
$('.L_slider_banner li').hide();
$('.L_slider_banner li').eq(page).show();
}
};
controller();
blockhight(".L_slider_nav", "a", ["140,110", "140,110", "140,110", "140,110"]);
});
分享文件代码下载网址:http://yunpan.cn/Qtc7QEAyeSTZb