首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
JavaScript日历实现代码
Sep 12 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
javascript检测两个数组是否相似
May 19 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
利用jQuery.Validate异步验证用户名是否存在（推荐）
Dec 09 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
JavaScript中的 new 命令
May 22 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
Jan 07 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
IDEA(2) android studio(3) 嵌套(1) Sqlite(2) OpenLayer(1) Spring Boot(5) 多线程(6) 移动开发(2) 安卓(1) 多维数组(1)
You might like
收集的php编写大型网站问题集
2007/03/06 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
PHP最常用的正则表达式
2017/02/13 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
JavaScript高级程序设计（第3版）学习笔记8 js函数（中）
2012/10/11 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
Bootstrap每天必学之轮播（Carousel）插件
2016/04/25 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
阿里健康官方海外旗舰店：阿里健康国际自营
2017/11/24 全球购物
俄罗斯药房连锁店：ASNA
2020/06/20 全球购物
String是最基本的数据类型吗？
2013/06/13 面试题
成功的酒店创业计划书
2013/12/27 职场文书
酒店个人求职信范文
2014/01/25 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
退休教师欢送会主持词
2014/03/31 职场文书