【JS+CSS3】实现带预览图幻灯片效果的示例代码


Posted in Javascript onMarch 17, 2016

一、前期准备

1.1 案例分析

适用场景:单例布局
1.2 方法论

V视图 HTML+CSS+调试
C js实现控制流程
D数据 优化扩展

二、代码

结构

<div class="slider"><!-- 特效区 -->
  <div class="main"><!-- 主视图区 -->
    <div class="main_i">
      <div class="caption">
        <h2>h2 caption</h2>
        <h2>h3 caption</h2>
      </div>
    <img src="images/{{index}}.jpg" alt="">
    </div>
  </div><!-- 主视图区结束 -->
  <div class="ctrl"><!-- 控制区 -->
    <a href="javascript:;"><img src="images/{{index}}.jpg" alt="">
    </a>
  </div><!-- 控制区结束 -->
</div><!-- 特效区结束 -->

样式(CSS略)

脚本功能开发

>>内容输出
Template改造 输出幻灯片&控制按钮 图片位置调整

>>切换控制
切换幻灯片 .main_i_active 切换控制按钮 .ctrl_i_active

0、修改VIEW ->Template(关键字替换),增加Template id
图片区
<div class="main" id="template_main">
<h2>{{h2}}}</h2>
<h3>{{h3}}}</h3>
<img src="images/{{index}}.jpg">
按钮区
<div class="ctrl" id="template_ctrl">
<a class="ctrl_i" id="ctrl_{{index}}" href="javascript:switchSlider({{index}});"><img src="images/{{index}}.jpg" alt="图片预览"></a>

下面是重点 JS脚本的编写~~

<script type="text/javascript">

  // 1、数据定义(实际生产环境,应由后台给出)
  var data = [
    {img:1,h2:"我是标题二,小标题",h3:"我是标题三,大标题"},
    {img:2,h2:"我是标题二,小标题",h3:"我是标题三,大标题"},
    {img:3,h2:"我是标题二,小标题",h3:"我是标题三,大标题"},
    {img:4,h2:"我是标题二,小标题",h3:"我是标题三,大标题"},
    {img:5,h2:"我是标题二,小标题",h3:"我是标题三,大标题"},
    {img:6,h2:"我是标题二,小标题",h3:"我是标题三,大标题"},
    {img:7,h2:"我是标题二,小标题",h3:"我是标题三,大标题"},
  ];

  // 2、通用函数
  var g = function(id){
    if( id.substr(0,1) =="." ){
      return document.getElementsByClassName( id.substr(1) );
    }
    return document.getElementById(id);
  }

  // 3、添加幻灯片的操作(所有幻灯片&对应的按钮)
  function addSliders(){
    // 3.1 获取模版
    var tpl_main = g("template_main").innerHTML
      .replace(/^\s*/,'')
      .replace(/\s*$/,'');

    var tpl_ctrl = g("template_ctrl").innerHTML
      .replace(/^\s*/,'')
      .replace(/\s*$/,'');

    // 3.2 定义最终输出HTML的变量
    var out_main = [];
    var out_ctrl = [];

    // 3.3 遍历所有数据,构建最终输出的HTML
    for( i in data ){
      var _html_main = tpl_main
        .replace(/{{index}}/g,data[i].img)
        .replace(/{{h2}}/g,data[i].h2)
        .replace(/{{h3}}/g,data[i].h3)
        .replace(/{{css}}/g,['','main_i_right'][i%2]);

      var _html_ctrl = tpl_ctrl
        .replace(/{{index}}/g,data[i].img);
      
      out_main.push(_html_main);
      out_ctrl.push(_html_ctrl);
    }

    // 3.4 把HTML回写到对应的DOM里面
    g("template_main").innerHTML = out_main.join('');
    g("template_ctrl").innerHTML = out_ctrl.join('');
    
    // 7、增加#main_background
    g('template_main').innerHTML += tpl_main
      .replace(/{{index}}/g,'{{index}}')
      .replace(/{{h2}}/g,data[i].h2)
      .replace(/{{h3}}/g,data[i].h3);

    g('main_{{index}}').id = 'main_background';
  }

  // 5、幻灯片切换
  function switchSliders(n){
    // 5.1 获得要展现的幻灯片&控制按钮 DOM
    var main = g("main_"+n);
    var ctrl = g("ctrl_"+n);

    // 5.2 获得所有的幻灯片&控制按钮
    var clear_main = g('.main_i');
    var clear_ctrl = g('.ctrl_i');

    // 5.3 清除他们的active样式
    for(var i=0;i<clear_ctrl.length;i++){
      clear_main[i].className = clear_main[i].className.replace('main_i_active','');
      clear_ctrl[i].className = clear_ctrl[i].className.replace('ctrl_i_active','');
    }

    // 5.4为当前控制按钮和幻灯片附加样式  
    g("main_"+n).className += ' main_i_active';
    g("ctrl_"+n).className += ' ctrl_i_active';
    // 7.2切换时 复制上一张幻灯片到main_background中
    setTimeout(function(){
      g('main_background').innerHTML = main.innerHTML;
    },1000);
    
  }

  // 6、动态调整图片的margin-top 使其垂直居中
  function movePictures(){
    var pictures = g('.picture');
    for(i=0;i<pictures.length;i++){
      pictures[i].style.marginTop = -(pictures[i].clientHeight/3) + 'px';
    }
  }

  // 4、定义何时处理幻灯片输出
  window.onload = function(){
    addSliders();
    switchSliders(1);
    setTimeout(function(){
      movePictures();
    },100)
  }
</script>

效果图 … = =莫吐槽又是这几张图~~~ 

【JS+CSS3】实现带预览图幻灯片效果的示例代码 

遇到问题:

1、 给图片直接加top:50%;会有BUG,没作用,原因可能是没给height固定高度~~给了固定高度就好了

但问题又来了,2、给固定高度后,按钮组不能自适应宽度 … 会被挤到第二排去  ……

以上这篇【JS+CSS3】实现带预览图幻灯片效果的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
javascript表单事件处理方法详解
May 15 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
javascript 继承学习心得总结
Mar 17 #Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 #Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 #Javascript
jquery基础知识第一讲之认识jquery
Mar 17 #Javascript
Angularjs 滚动加载更多数据
Mar 17 #Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 #Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 #Javascript
You might like
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
python实现UDP协议下的文件传输
2020/03/20 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
市场营销专业毕业生求职信
2014/07/21 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
导游词之江南周庄
2019/12/06 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
Vue如何清空对象
2022/03/03 Vue.js