【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 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 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+mysql保存和输出文件
2006/10/09 PHP
PHP下escape解码函数的实现方法
2010/08/08 PHP
Web程序工作原理详解
2014/12/25 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
中国在我心中演讲稿
2014/09/13 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
社区活动总结范文
2015/05/07 职场文书
大学运动会通讯稿
2015/07/18 职场文书
银行求职信怎么写
2019/06/20 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL