原生js实现图片层叠轮播切换效果_javascript技巧
程序员文章站
2022-04-11 17:29:47
...
本文实例介绍了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 ? 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
以上就是本文的全部内容,希望对大家的学习有所帮助。