[JS+CSS3] Contoh kod untuk melaksanakan kesan tayangan slaid dengan kemahiran pratonton_javascript

1. Persediaan awal

1.1 Analisis Kes

Senario yang berkenaan: susun atur tunggal
1.2 Metodologi

V lihat HTML+CSS+Nyahpepijat
C js melaksanakan aliran kawalan
Sambungan pengoptimuman data D

2. Kod

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

Gaya (CSS ditinggalkan)

Pembangunan fungsi skrip

>>Keluaran kandungan
Transformasi templat, tayangan slaid output & butang kawalan, pelarasan kedudukan gambar

>>Tukar kawalan
Tukar slaid .main_i_active Tukar butang kawalan .ctrl_i_active

0. Ubah suai VIEW ->Templat (penggantian kata kunci) dan tambah id Templat
Kawasan gambar
d2aa6266df5d79f8f445710cf5ad50a0
c1a436a314ed609750bd7c7d319db4da{{h2}}}2e9b454fa8428549ca2e64dfac4625cd
684271ed9684bde649abda8831d4d355{{h3}}}39528cedfa926ea0c01e69ef5b2ea9b0
6219b0260aec3f8668d6043f7c9aaff4
Kawasan butang
d9f8e7f456cfd49af954b14ee165595d
79aeb02ca9a16ea547452a753960e8a237b6fdb8845d10496fc96b42065182905db79b134e9f6b82c0b36e0489ee08ed

Berikut ialah perkara utama penulisan skrip 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>

Rendering… = =Jangan merungut tentang gambar ini lagi~~~

Menghadapi masalah:

1. Tambahkan bahagian atas:50% terus ke gambar; akan ada pepijat dan ia tidak akan berfungsi

Tetapi masalah datang lagi 2. Selepas ketinggian ditetapkan, kumpulan butang tidak boleh menyesuaikan dengan lebar... dan akan dihimpit ke baris kedua...

Kod contoh [JS+CSS3] di atas untuk melaksanakan kesan tayangan slaid dengan pratonton adalah semua kandungan yang dikongsi oleh editor saya harap ia boleh memberi rujukan kepada anda, dan saya harap anda akan menyokong Script Home.