原生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图片轮播

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

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
You might like
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
python局部赋值的规则
2013/03/07 Python
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
Python中关于使用模块的基础知识
2015/05/24 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
Python中函数参数匹配模型详解
2019/06/09 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
python编写微信公众号首图思路详解
2019/12/13 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
美国时尚女装在线:Missguided
2016/12/03 全球购物
会计专业毕业生求职信分享
2014/01/03 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
2014年母亲节寄语
2014/05/07 职场文书
西湖英语导游词
2015/02/06 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
Java使用jmeter进行压力测试
2021/07/09 Java/Android