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

前端之家收集整理的这篇文章主要介绍了原生js实现图片层叠轮播切换效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例介绍了js焦点图片层叠轮播切换滚动效果分享给大家供大家参考,具体内容如下

效果图:

功能描述:

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

详细代码:

  HTML代码:

<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<ul id = "largerImages">
<p class="prevIoUs"><


<p class="next">>

  • 主播昵称

  • 主播昵称

  • 主播昵称

  • 主播昵称

  • 主播昵称

  • <script type="text/javascript" src="../../lib/seajs/sea.js">
    <script type="text/javascript" src="../../lib/base/1.0.x/base.js">
    <script type="text/javascript">
    seajs.use(['lib/jquery/1.11.x/index.js','_example/rotate
    Box/index.js'],function($,carousel) {
    carousel.init({
    wapper: $('#largerImages'),//所有图片以此来按比例定义宽高
    imgWidth: 450,imgHeight: 300,spacing: {
    left: 60,//每张图片左边距离相差多少
    top: 30,//每张图片顶部距离相差多少
    width: 60,//每张图片宽度相差多少
    height: 60 //每张图片高度相差多少
    }
    });
    });

     

    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 < t._middle ) {
    
     t._grids.eq(i).css({
      zIndex: i,top: t._spacing.top * front,height: t._gridsHeight - t._spacing.height * front,width: t._gridsWidth - t._spacing.width * front
     });
    
     front--;
    
    } else {
    
     last --;
    
     t._grids.eq(last).css({
      zIndex: i,top: t._spacing.top * avtive,left: t._spacing.left * last + t._spacing.width * avtive,height: t._gridsHeight - t._spacing.height * avtive,width: t._gridsWidth - t._spacing.width * avtive
     });
    
     avtive --;
    };

    });
    },//翻页动画
    _reposition: function() {
    var t = this;

    //把各属性值传到数组里面
    t._grids.each( function(i,img) {
    t._arr.left.push(t._grids.eq(i).position().left);
    t._arr.top.push(t._grids.eq(i).position().top);
    t._arr.width.push(t._grids.eq(i).width());
    t._arr.height.push(t._grids.eq(i).height());
    t._arr.zIndex.push(t._grids.eq(i).css('z-index'));
    });

    //向前翻页
    $('.prevIoUs').bind('click',function() {
    if ( !t._initData && t._arr.left.length != 0) {

     t._initData = true;
    
     //重新<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>选择器
     var grids = t._wapper.find('li'); 
    
     for (var i = 1; i < grids.length ; i ++) {
    
      grids.eq(i).animate({
       zIndex: t._arr.zIndex[i - 1],left: t._arr.left[i - 1],top: t._arr.top[i - 1],width: t._arr.width[i - 1],height: t._arr.height[i - 1],},function() {
       t._initData = false;
       grids.find('i').addClass('cover');
       grids.eq(t._middle + 1).find('i').removeClass('cover');
      });
     };
    
     grids.eq(0).animate({
      left: t._arr.left[ grids.length - 1],top: t._arr.top[ grids.length - 1],width: t._arr.width[ grids.length - 1],height: t._arr.height[ grids.length - 1],zIndex: t._arr.zIndex[ grids.length - 1]
     },function(){
      $(this).appendTo(t._wapper);
     });
    
    }

    });
    //向后翻页
    $('.next').bind('click',function() {
    if ( !t._initData && t._arr.left.length != 0) {

     t._initData = true;
    
     //重新<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>选择器
     var grids = t._wapper.find('li'); 
    
     for (var i = 0; i < grids.length - 1; i ++) {
      grids.eq(i).animate({
       left: t._arr.left[i + 1],top: t._arr.top[i + 1],width: t._arr.width[i + 1],height: t._arr.height[i + 1],zIndex: t._arr.zIndex[i + 1]
        },function() {
        t._initData = false;
       });
     };
     grids.eq(grids.length - 1).animate({
      left: t._arr.left[0],top: t._arr.top[0],width: t._arr.width[0],height: t._arr.height[0],zIndex: t._arr.zIndex[0]
     },function(){
      $(this).prependTo(t._wapper);
      grids.find('i').addClass('cover');
      grids.eq(t._middle - 1).find('i').removeClass('cover');
     });
    
    }

    });
    },//鼠标进入图片效果
    _mouseEnter: function(grids) {
    grids.each(function(i){
    $(this).mouseenter(function() {
    $(this).find('.tab_name').animate({
    bottom:0,opacity: 'show'
    },200);
    });
    $(this).mouseleave(function() {
    $(this).find('.tab_name').animate({
    bottom:-50,opacity: 'hide'
    },200);
    });
    });
    },};

    return carousel;
    });

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

    原文链接:https://www.f2er.com/js/50233.html

    猜你在找的JavaScript相关文章