原生js实现图片层叠轮播切换效果_javascript技巧

本文实例介绍了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 

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