【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 相关文章推荐
淘宝搜索框效果实现分析
Mar 05 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
简单的Jquery全选功能
Nov 07 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
React Fragment介绍与使用详解
Nov 11 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
在线增减.htpasswd内的用户
2006/10/09 PHP
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
如何在python中执行另一个py文件
2020/04/30 Python
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
法律专业自我鉴定
2013/10/03 职场文书
自主招生自荐信指南
2014/02/04 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
教师个人自我评价范文
2014/04/13 职场文书
师范生见习总结范文
2015/06/23 职场文书
趣味运动会简讯
2015/07/20 职场文书
教师节感想
2015/08/11 职场文书
2016党员入党决心书
2015/09/22 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang