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

2019-11-20 10:38:02

字体：大中小

来源：转载

供稿：网友

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

效果图：

功能描述：

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

详细代码:
　　html代码:

<!DOCTYPE html><!-- saved from url=(0062)http://x1.xiuimg.com/style/xiu/woxiu/v1/tpl/topic/xiuxuan.html --><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title><style type="text/css"> *{margin:0px; padding:0px;font-family:"Microsoft YaHei"} ol,ul{list-style:none;} cite,em,i{font-style:normal}  * html .clearfix { height: 1%; } .clearfix { display: block; } .myclearfix:after { clear:both; visibility:hidden;} .myclearfix { display: block; _display:inline-block; overflow:hidden;}  #largerImages{position:relative;width:1000px;margin:0 auto;height:520px;overflow:hidden;} #largerImages li{box-shadow:1px 1px 12px rgba(200, 200, 200, 1);width:368px;height:368px; position:absolute;top:10px;overflow:hidden;color:#fff;} #largerImages li .cover{background-color:#333;opacity:0.5;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);height:100%;width:100%;display:block;position:absolute;top:0px;} #largerImages img{border:0px;width:100%;height:100%;} #largerImages .previous{left:13%;} #largerImages .next{left:53%;} #largerImages .previous,#largerImages .next{cursor:pointer; position:absolute;z-index:100; top:25%;height:60px;line-height:60px;width:30px;color:#fff;text-align:center;} #largerImages .previous span,#largerImages .next span{position:absolute;top:0px;left:0px;height:100%;width:100%;display:block;background-color:#000;opacity:0.4;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);} #largerImages .previous em,#largerImages .next em{height:100%;width:100%;display:block;position:absolute;top:0px;left:0px;font-size:26px; font-family: "宋体";} #largerImages li span,#largerImages li em{position:absolute;left:0px;width:100%;height:30px;line-height:30px; bottom:0px;text-align:center;display:block;color:#fff;} #largerImages li span{background-color:#000;opacity:0.5;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);font-size:12px;}</style></head><body><ul id = "largerImages"> <p class="previous"><span> </span><em><</em></p> <p class="next"><span> </span><em>></em></p> <li><i class="cover"> </i>  <a href="#"><img src="http://xiu.xiuimg.com/upload/xiu/9/90/qq-srntbvlhcw_b_56.com_160106133546.jpg"></a>  <p class="tab_name"><span> </span><em>主播昵称</em></p> </li> <li><i class="cover"> </i>  <a href="#"><img src="http://xiu.xiuimg.com/upload/xiu/96/58/dc15170219625_b_56.com_151201150445.jpg"></a>  <p class="tab_name"><span> </span><em>主播昵称</em></p> </li> <li><i class="cover"> </i>  <a href="#"><img src="http://xiu.xiuimg.com/upload/xiu/9/90/qq-srntbvlhcw_b_56.com_160106133546.jpg"></a>  <p class="tab_name"><span> </span><em>主播昵称</em></p> </li> <li><i class="cover"> </i>  <a href="#"><img src="http://xiu.xiuimg.com/upload/xiu/96/58/dc15170219625_b_56.com_151201150445.jpg"></a>  <p class="tab_name"><span> </span><em>主播昵称</em></p> </li> <li><i class="cover"> </i>  <a href="#"><img src="http://xiu.xiuimg.com/upload/xiu/9/90/qq-srntbvlhcw_b_56.com_160106133546.jpg"></a>  <p class="tab_name"><span> </span><em>主播昵称</em></p> </li></ul><script type="text/javascript" src="../../lib/seajs/sea.js"></script><script type="text/javascript" src="../../lib/base/1.0.x/base.js"></script><script type="text/javascript"> seajs.use(['lib/jquery/1.11.x/index.js','_example/rotateBox/index.js'],function($,carousel) {  carousel.init({   wapper: $('#largerImages'),   //所有图片以此来按比例定义宽高   imgWidth: 450,   imgHeight: 300,   spacing: {    left: 60, //每张图片左边距离相差多少    top: 30, //每张图片顶部距离相差多少    width: 60, //每张图片宽度相差多少    height: 60 //每张图片高度相差多少   }  }); });</script></body></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 < t._middle ) {     t._grids.eq(i).css({      zIndex: i,      top: t._spacing.top * front,      left: t._spacing.left * i,      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;     //重新获取选择器     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],      },200,      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]     },200,     function(){      $(this).appendTo(t._wapper);     });    }   });   //向后翻页   $('.next').bind('click',function() {    if ( !t._initData && t._arr.left.length != 0) {     t._initData = true;     //重新获取选择器     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]        },200,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]     },200,     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;});

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

上一篇：javascript自动切换焦点控制效果完整实例

下一篇：Javascript实现的SHA-256加密算法完整实例