首页
所有分类
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 相关文章推荐
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
AngularJS语法详解
Jan 23 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
JS实现键值对遍历json数组功能示例
May 30 Javascript
JavaScript实现缓动动画
Nov 25 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
Set接口(1) axios(1) Storage(1) Vue(10) vuex(1) OutputStream(1) 本地化存储(1) HashSet集合(1) InputStream(1) persistedstate(1)
You might like
Php获取金书网的书名的实现代码
2010/06/11 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
Python实现的多线程端口扫描工具分享
2015/01/21 Python
Python调用命令行进度条的方法
2015/05/05 Python
python动态网页批量爬取
2016/02/14 Python
Python中标准模块importlib详解
2017/04/16 Python
Python实现句子翻译功能
2017/11/14 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
Python flask框架端口失效解决方案
2020/06/04 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
英国外籍人士的在线超市：British Corner Shop
2019/06/03 全球购物
电子商务网站的创业计划书
2014/01/05 职场文书
大学军训感言200字
2014/02/26 职场文书
幼儿教师培训感言
2014/03/08 职场文书
教师网络培训感言
2014/03/09 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL