作者:youstar | 来源:互联网 | 2021-09-24 01:06
本文实例介绍了js焦点图片层叠轮播切换滚动效果,分享给大家供大家参考,具体内容如下
效果图:
功能描述:
- 自定义图片尺寸;
- 每隔一段时间自动滚动图片;
- 每次动画执行的时候改变图片的位置,宽高以及其它属性也要跟随着变化;
- 鼠标移上图片,显示当前图片的详细信息;
- 点击按钮向前向后滚动;
详细代码:
html代码:
<
>
-
主播昵称
-
主播昵称
-
主播昵称
-
主播昵称
-
主播昵称
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 &#63; 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
精彩专题分享:jQuery图片轮播 Javascript图片轮播 Bootstrap图片轮播
以上就是本文的全部内容,希望对大家的学习有所帮助。