[JS+CSS3] Beispielcode zum Implementieren des Diashow-Effekts mit Vorschau_Javascript-Kenntnissen

1. Frühe Vorbereitung

1.1 Fallanalyse

Anwendbares Szenario: Singleton-Layout
1.2 Methodik

V-Ansicht HTML+CSS+Debug
C js implementiert den Kontrollfluss
D Datenoptimierungserweiterung

2. Code

Struktur

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

Stil (CSS weggelassen)

Entwicklung von Skriptfunktionen

>>Inhaltsausgabe
Vorlagentransformation, Ausgabe-Diashow und Steuertaste, Anpassung der Bildposition

>>Schaltersteuerung
Folien wechseln .main_i_active Steuerschaltflächen wechseln .ctrl_i_active

0. Ändern Sie ANSICHT ->Vorlage (Schlüsselwortersetzung) und fügen Sie die Vorlagen-ID hinzu
Bildbereich
d2aa6266df5d79f8f445710cf5ad50a0
c1a436a314ed609750bd7c7d319db4da{{h2}}}2e9b454fa8428549ca2e64dfac4625cd
684271ed9684bde649abda8831d4d355{{h3}}}39528cedfa926ea0c01e69ef5b2ea9b0
6219b0260aec3f8668d6043f7c9aaff4
Schaltflächenbereich
d9f8e7f456cfd49af954b14ee165595d
79aeb02ca9a16ea547452a753960e8a2e68c4d757fd7fa83faa4341e2f5f1ff15db79b134e9f6b82c0b36e0489ee08ed

Das Folgende ist der Schlüsselpunkt beim Schreiben von JS-Skripten~~

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

Renderings… = =Beschweren Sie sich nicht noch einmal über diese Bilder~~~

Es ist ein Problem aufgetreten:

1. Fügen Sie top:50% direkt zum Bild hinzu; es wird ein Fehler auftreten und es wird nicht funktionieren. Der Grund dafür kann sein, dass die Höhe nicht festgelegt ist. Geben Sie einfach eine feste Höhe an

Aber das Problem tritt erneut auf. 2. Nachdem die Höhe festgelegt wurde, kann sich die Tastengruppe nicht an die Breite anpassen... und wird in die zweite Reihe gequetscht...

Der obige [JS+CSS3]-Beispielcode zum Implementieren des Diashow-Effekts mit Vorschau ist der gesamte vom Editor geteilte Inhalt. Ich hoffe, er kann Ihnen eine Referenz geben und ich hoffe, dass Sie Script Home unterstützen.