这篇文章主要为大家详细介绍了原生js实现图片层叠轮播切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例介绍了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 精彩专题分享：jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助。
以上就是原生js实现图片层叠轮播切换效果的详细内容，更多请关注0133技术站其它相关文章！
