[JS+CSS3] Exemple de code pour implémenter l'effet de diaporama avec les compétences preview_javascript

1. Préparation précoce

1.1 Analyse de cas

Scénario applicable : disposition singleton
1.2 Méthodologie

V vue HTML+CSS+Débogage
C js implémente le flux de contrôle
Extension d'optimisation des données D

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

Style (CSS omis)

Développement de fonctions de script

>>Sortie de contenu
Transformation du modèle, diaporama de sortie et bouton de contrôle, réglage de la position de l'image

>>Commande de commutation
Changer de diapositives .main_i_active Changer de boutons de commande .ctrl_i_active

0. Modifiez VIEW ->Modèle (remplacement de mot clé) et ajoutez l'identifiant du modèle
Zone photo
d2aa6266df5d79f8f445710cf5ad50a0
c1a436a314ed609750bd7c7d319db4da{{h2}}}2e9b454fa8428549ca2e64dfac4625cd
684271ed9684bde649abda8831d4d355{{h3}}}39528cedfa926ea0c01e69ef5b2ea9b0
6219b0260aec3f8668d6043f7c9aaff4
Zone des boutons
d9f8e7f456cfd49af954b14ee165595d
79aeb02ca9a16ea547452a753960e8a27689a8c3f5d48ca9c8a97c3ebeebdf375db79b134e9f6b82c0b36e0489ee08ed

Ce qui suit est le point clé de l'écriture de script 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>

Rendu… = =Ne vous plaignez plus de ces photos~~~

J'ai rencontré un problème :

1. Ajoutez top:50% directement à l'image ; il y aura un bug et cela ne fonctionnera pas. La raison peut être que la hauteur n'est pas fixe~~ Donnez simplement une hauteur fixe

.

Mais le problème revient. 2. Une fois la hauteur fixée, le groupe de boutons ne peut pas s'adapter à la largeur... et sera coincé dans la deuxième rangée...

L'exemple de code [JS+CSS3] ci-dessus pour implémenter l'effet de diaporama avec aperçu est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous prendrez en charge Script Home.