编程 Javascript

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

Posted in Javascript onFebruary 02, 2016

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

效果图：

原生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;
});

精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

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

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

- Author -

带上饼干

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

无缝滚动js代码通俗易懂(自写)

Jun 19 Javascript

JavaScript获取路径设计源码

May 22 Javascript

jQuery实现鼠标划过展示大图的方法

Mar 09 Javascript

Javascript中使用parseInt函数需要注意的问题

Apr 02 Javascript

js简单工厂模式用法实例

Jun 30 Javascript

js图片跟随鼠标移动代码

Nov 26 Javascript

js阻止冒泡和默认事件（默认行为）详解

Oct 20 Javascript

让微信小程序支持ES6中Promise特性的方法详解

Jun 13 Javascript

详解使用vue实现tab 切换操作

Jul 03 Javascript

JS实现移动端整屏滑动的实例代码

Nov 10 Javascript

基于vue.js中事件修饰符.self的用法(详解)

Feb 23 Javascript

JavaScript装箱及拆箱boxing及unBoxing用法解析

Jun 15 Javascript

Javascript实现的SHA-256加密算法完整实例

Feb 02 #Javascript

JavaScript实现的SHA-1加密算法完整实例

Feb 02 #Javascript

javascript实现瀑布流加载图片原理

Feb 02 #Javascript

基于JQuery实现图片轮播效果(焦点图)

Feb 02 #Javascript

Hammer.js+轮播原理实现简洁的滑屏功能

Feb 02 #Javascript

JavaScript实现的MD5算法完整实例

Feb 02 #Javascript

javascript禁止超链接跳转的方法

Feb 02 #Javascript