本文实例介绍了js焦点图片层叠轮播切换滚动效果，分享给大家供大家参考，具体内容如下

效果图：

功能描述：

自定义图片尺寸；

每隔一段时间自动滚动图片；

每次动画执行的时候改变图片的位置，宽高以及其它属性也要跟随着变化；

鼠标移上图片，显示当前图片的详细信息；

点击按钮向前向后滚动；

详细代码:

html代码:

*{margin:0px; padding:0px;font-family:"Microsoft YaHei"}

ol,ul{list-style:none;}

cite,em,i{font-style:normal}

* html .clearfix { height: 1%; }

.clearfix { display: block; }

.myclearfix:after { clear:both; visibility:hidden;}

.myclearfix { display: block; _display:inline-block; overflow:hidden;}

#largerImages{position:relative;width:1000px;margin:0 auto;height:520px;overflow:hidden;}

#largerImages li{box-shadow:1px 1px 12px rgba(200, 200, 200, 1);width:368px;height:368px; position:absolute;top:10px;overflow:hidden;color:#fff;}

#largerImages li .cover{background-color:#333;opacity:0.5;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);height:100%;width:100%;display:block;position:absolute;top:0px;}

#largerImages img{border:0px;width:100%;height:100%;}

#largerImages .previous{left:13%;}

#largerImages .next{left:53%;}

#largerImages .previous,#largerImages .next{cursor:pointer; position:absolute;z-index:100; top:25%;height:60px;line-height:60px;width:30px;color:#fff;text-align:center;}

#largerImages .previous span,#largerImages .next span{position:absolute;top:0px;left:0px;height:100%;width:100%;display:block;background-color:#000;opacity:0.4;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);}

#largerImages .previous em,#largerImages .next em{height:100%;width:100%;display:block;position:absolute;top:0px;left:0px;font-size:26px; font-family: "宋体";}

#largerImages li span,#largerImages li em{position:absolute;left:0px;width:100%;height:30px;line-height:30px; bottom:0px;text-align:center;display:block;color:#fff;}

#largerImages li span{background-color:#000;opacity:0.5;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);font-size:12px;}

<

>

 

主播昵称

 

主播昵称

 

主播昵称

 

主播昵称

 

主播昵称

seajs.use(['lib/jquery/1.11.x/index.js','_example/rotateBox/index.js'],function($,carousel) {

carousel.init({

wapper: $('#largerImages'),

//所有图片以此来按比例定义宽高

imgWidth: 450,

imgHeight: 300,

spacing: {

left: 60, //每张图片左边距离相差多少

top: 30, //每张图片顶部距离相差多少

width: 60, //每张图片宽度相差多少

height: 60 //每张图片高度相差多少

}

});

});

js 代码:

define(function(require, exports, module) {

'use strict';

var $ = require('lib/jquery/1.11.x/index.js');

var carousel = {

_initData:false, //判断动画是否执行完毕

init: function(options) {

var t = this;

t._wapper = options.wapper;

t._grids = t._wapper.find('li');

t._gridsWidth = options.imgWidth;

t._gridsHeight = options.imgHeight;

t._spacing = options.spacing;

//取居中图片

t._middle = t._grids.length % 2 == 0 ? t._grids.length / 2 : parseInt(t._grids.length / 2);

//存放各图片参数

t._arr = {

left: [],

top: [],

zIndex: [],

width: [],

height: []

}

if ( !t._initData ) {

var interval;

interval = setInterval(function(){

$('.previous').click();

},10000);

}

t._largerImages();

t._reposition();

t._mouseEnter(t._grids) //鼠标移动上去显示主播昵称

},

//初始化定位：

_largerImages: function() {

var t = this;

var front = t._middle;

var avtive = t._middle;

var last = t._grids.length;

t._grids.each( function(i, img) {

if (i == t._middle) {

t._grids.eq(i).css({

zIndex: 99,

top: 0,

left: t._spacing.left * i,

height: t._gridsHeight,

width: t._gridsWidth

});

} else if ( i < t._middle ) {

t._grids.eq(i).css({

zIndex: i,

top: t._spacing.top * front,

left: t._spacing.left * i,

height: t._gridsHeight - t._spacing.height * front,

width: t._gridsWidth - t._spacing.width * front

});

front--;

} else {

last --;

t._grids.eq(last).css({

zIndex: i,

top: t._spacing.top * avtive,

left: t._spacing.left * last + t._spacing.width * avtive,

height: t._gridsHeight - t._spacing.height * avtive,

width: t._gridsWidth - t._spacing.width * avtive

});

avtive --;

};

});

},

//翻页动画

_reposition: function() {

var t = this;

//把各属性值传到数组里面

t._grids.each( function(i,img) {

t._arr.left.push(t._grids.eq(i).position().left);

t._arr.top.push(t._grids.eq(i).position().top);

t._arr.width.push(t._grids.eq(i).width());

t._arr.height.push(t._grids.eq(i).height());

t._arr.zIndex.push(t._grids.eq(i).css('z-index'));

});

//向前翻页

$('.previous').bind('click',function() {

if ( !t._initData && t._arr.left.length != 0) {

t._initData = true;

//重新获取选择器

var grids = t._wapper.find('li');

for (var i = 1; i < grids.length ; i ++) {

grids.eq(i).animate({

zIndex: t._arr.zIndex[i - 1],

left: t._arr.left[i - 1],

top: t._arr.top[i - 1],

width: t._arr.width[i - 1],

height: t._arr.height[i - 1],

},200,

function() {

t._initData = false;

grids.find('i').addClass('cover');

grids.eq(t._middle + 1).find('i').removeClass('cover');

});

};

grids.eq(0).animate({

left: t._arr.left[ grids.length - 1],

top: t._arr.top[ grids.length - 1],

width: t._arr.width[ grids.length - 1],

height: t._arr.height[ grids.length - 1],

zIndex: t._arr.zIndex[ grids.length - 1]

},200,

function(){

$(this).appendTo(t._wapper);

});

}

});

//向后翻页

$('.next').bind('click',function() {

if ( !t._initData && t._arr.left.length != 0) {

t._initData = true;

//重新获取选择器

var grids = t._wapper.find('li');

for (var i = 0; i < grids.length - 1; i ++) {

grids.eq(i).animate({

left: t._arr.left[i + 1],

top: t._arr.top[i + 1],

width: t._arr.width[i + 1],

height: t._arr.height[i + 1],

zIndex: t._arr.zIndex[i + 1]

},200,function() {

t._initData = false;

});

};

grids.eq(grids.length - 1).animate({

left: t._arr.left[0],

top: t._arr.top[0],

width: t._arr.width[0],

height: t._arr.height[0],

zIndex: t._arr.zIndex[0]

},200,

function(){

$(this).prependTo(t._wapper);

grids.find('i').addClass('cover');

grids.eq(t._middle - 1).find('i').removeClass('cover');

});

}

});

},

//鼠标进入图片效果

_mouseEnter: function(grids) {

grids.each(function(i){

$(this).mouseenter(function() {

$(this).find('.tab_name').animate({

bottom:0,opacity: 'show'

},200);

});

$(this).mouseleave(function() {

$(this).find('.tab_name').animate({

bottom:-50,opacity: 'hide'

},200);

});

});

},

};

return carousel;

});

以上就是本文的全部内容，希望对大家的学习有所帮助。