欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-11 17:29:47
...
本文实例介绍了js焦点图片层叠轮播切换滚动效果,分享给大家供大家参考,具体内容如下

效果图:

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

功能描述:

  •   自定义图片尺寸;
  •   每隔一段时间自动滚动图片;
  •   每次动画执行的时候改变图片的位置,宽高以及其它属性也要跟随着变化;
  •   鼠标移上图片,显示当前图片的详细信息;
  •   点击按钮向前向后滚动;

详细代码:
  html代码:



    >

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

    主播昵称

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

    主播昵称

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

    主播昵称

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

    主播昵称

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

    主播昵称

 

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 

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