[JS+CSS3] Sample code to implement slideshow effect with preview

1. Early preparation

1.1 Case Analysis

Applicable scenario: singleton layout
1.2 Methodology

V view HTML+CSS+Debug
C js implements control flow
D data optimization extension

2. Code

Structure

<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><!-- 特效区结束 -->

Copy after login

Style (CSS omitted)

Script function development

>>Content output
Template transformation, output slideshow & control button, picture position adjustment

>>Switch control
Switch slides .main_i_active Switch control buttons .ctrl_i_active

0. Modify VIEW ->Template (keyword replacement) and add Template id
Picture area

{{h2}}}

{{h3}}}

Button area

The following is the key point of JS script writing~~

<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>

Copy after login

Renderings… = =Don’t complain about these pictures again~~~

Encountered a problem:

1. Add top:50% directly to the picture; there will be a bug and it will not work. The reason may be that the height is not fixed~~ Just give a fixed height

But the problem comes again. 2. After the height is fixed, the button group cannot adapt to the width... and will be squeezed into the second row...

The above [JS+CSS3] sample code to implement the slideshow effect with preview is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.

Related labels：

css3 js slideshow preview

source：php.cn

Previous article：Detailed explanation of jQuery.deferred object usage_jquery Next article：Detailed explanation of binary tree traversal in JS

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

[JS+CSS3] Sample code to implement slideshow effect with preview_javascript skills

{{h2}}}

{{h3}}}