首页
所有分类
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中字符串拼接需注意的问题
Jul 13 Javascript
JS数组去重与取重的示例代码
Jan 24 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
Sep 22 Javascript
JS获取时间的方法
Jan 21 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
jquery实现图片切换代码
Oct 13 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
Node绑定全局TraceID的实现方法
Nov 14 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
sched(1) 无限迭代(1) while(1) 监听(2) re模块(2) 事件调度器(1) 分词器(1) scss(1) watch(1) okenizer(1)
You might like
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
PHP设置进度条的方法
2015/07/08 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
任意位置显示html菜单
2007/02/01 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
JS中数组重排序方法
2016/11/11 Javascript
js倒计时显示实例
2016/12/11 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
Python中endswith()函数的基本使用
2015/04/07 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
python3操作注册表的方法（Url protocol）
2020/02/05 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
keras K.function获取某层的输出操作
2020/06/29 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
Perfumetrader荷兰：香水、化妆品和护肤品在线商店
2017/09/15 全球购物
工程预算与管理应届生求职信
2013/10/06 职场文书
给交警的表扬信
2014/01/12 职场文书
音乐教育感言
2014/03/05 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
临时用工协议书范本
2014/10/29 职场文书
大学生在校表现评语
2014/12/31 职场文书
面试感谢信范文
2015/01/22 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python