html点击小图切换大图轮播,跑马灯式轮播图js、小缩略图点击切换显示大图方法javascript...

//点击图片列表弹出大图弹层以及缩略图点击显示对应大图

//本方法需要用到superslide.js插件以及$.resizeImageS()，superslide好找，resizeImages()方法请打开http://www.seozhijia.net/javascript/130.html

//需要引用jquery.superSlide.js插件

function photosSlide(options){

var defaults = {

$slider:null, //最外层的元素

thumbsViewCount:0, // 可视缩略图数量

beforeRender:null, //渲染前需执行的函数

afterRender:null, //渲染后需执行的函数

photosIndex:0 //图片下标

};

var options = $.extend({}, defaults, options || {});

if(typeof options.$slider !=='object'){

alert("请写入正确的元素名")

}

var interTime = 3000; //轮播秒数

var thumbsDuration = 200; //小图列表移动的速度，200毫秒移完

var middleThumbImgIndex = Math.ceil(options.thumbsViewCount / 2); //-------------------------缩略图中心数,(总数/2 向上取整)

var $productImgSlider = options.$slider;

var $thumbImgs = $productImgSlider.find('.slide-menu .thumbs img');

//var $thumbImgContainer = $productImgSlider.find('.slide-menu .thumbs a')||$productImgSlider.find('.slide-menu .thumbs p');

var $thumbImgContainer = $thumbImgs.parent();

var thumbImgWidth = $thumbImgContainer.width();

var thumbImgHeight = $thumbImgContainer.height();

var $detailImgs = $productImgSlider.find('.slide-content img');

var $thumbsUl = $productImgSlider.find('.slide-menu .thumbs ul');

var thumbsItemWidth = $thumbsUl.find('li').outerWidth(true); //outerWidth 可以把padding，margin的宽度也一起拿到

var thumbsTotalCount = $thumbsUl.find('li').length;

$thumbsUl.width(thumbsItemWidth * thumbsTotalCount); // 给缩略图容器设置宽度

if($.isFunction(options.beforeRender)){

options.beforeRender();

}

var prevIndex='';

$productImgSlider.slide({

effect: 'left',

trigger: 'click',

mainCell: '.slide-content ul',

titCell: '.slide-menu .thumbs li',

interTime: interTime,

pnLoop:false,

defaultIndex: options.photosIndex, //图片下标索引

autoPage: false,

autoPlay: false,

startFun: function (index) {

//大图缩放

$detailImgs.each(function(i){

var $self=$(this);

var $imgParent=$self.parent();

$self.ResizeImages(true, $imgParent.width(), $imgParent.height(), 'cover');

})

//大图捡漏

var detailTimer=setTimeout(function(){

$detailImgs.each(function(i){

var $self=$(this);

if(!$self.hasClass("resized")){

var $imgParent=$self.parent();

$self.ResizeImages(true, $imgParent.width(), $imgParent.height(), 'cover');

}

})

if(detailTimer){

clearTimeout(detailTimer);

}

},1000);

//小图缩放

$thumbImgs.each(function(i){

var $self=$(this);

var $imgParent=$self.parent();

$self.ResizeImages(true, $imgParent.width(), $imgParent.height(), 'cover');

})

//小图捡漏

var thumbTimer=setTimeout(function(){

$thumbImgs.each(function(i){

var $self=$(this);

if(!$self.hasClass("resized")){

var $imgParent=$self.parent();

$self.ResizeImages(true, $imgParent.width(), $imgParent.height(), 'cover');

}

})

if(thumbTimer){

clearTimeout(thumbTimer);

}

},1000);

// 小图位置移动//缩略图跑马灯

if ($thumbsUl.find('li').length > options.thumbsViewCount) {//现有的图片数量大于当前要显示的图册小图数量，才执行以下移动操作

if(index > prevIndex && (index+1)>middleThumbImgIndex && (index+1)<=(thumbsTotalCount-middleThumbImgIndex)){//从左往右走

$thumbsUl.animate({ left:(middleThumbImgIndex-index-1)*thumbsItemWidth }, thumbsDuration);

}else if(indexmiddleThumbImgIndex && (index+1)<=(thumbsTotalCount-middleThumbImgIndex)){//从右往左走

$thumbsUl.animate({ left:-(index+1-middleThumbImgIndex)*thumbsItemWidth}, thumbsDuration);

}else if((index+1) <= middleThumbImgIndex){//前(可视数量中间数)个

$thumbsUl.animate({ left: 0 }, thumbsDuration);

}else if((index+1) > (thumbsTotalCount-middleThumbImgIndex)){//后(可视数量中间数)个

$thumbsUl.animate({ left: -thumbsItemWidth * (thumbsTotalCount - options.thumbsViewCount) }, thumbsDuration);

}

}

prevIndex=index;

}

});

if($.isFunction(options.afterRender)){

options.afterRender();

}

}