contoh pelaksanaan js kesan imej karusel yang menyokong kemahiran switching_javascript gelongsor telefon mudah alih

Contoh dalam artikel ini menerangkan kaedah menggunakan js untuk melaksanakan kesan imej karusel yang menyokong suis gelongsor pada telefon mudah alih. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Kesan operasi adalah seperti berikut:

Klik di sini untuk kod contoh lengkapMuat turun dari tapak ini.

Contoh penggunaan:

<script type="text/javascript" src="../src/zepto.js"></script>
<script type="text/javascript" src="../src/carousel-image.js"></script>
<script>
 $('.carousel-image').CarouselImage({
  num :$('.carousel-num')
});
</script>

atau requirejs:

<div class="carousel-image">
<div>
 <a>
  <img src="http://www.yoursiteweb.com/images/1430073193462.jpg"/>
 </a>
 <a>
  <img src="http://www.yoursiteweb.com/images/1430073252953.png"/>
 </a>
 <a>
  <img src="http://www.yoursiteweb.com/images/1430073111420.jpg"/>
 </a>
</div>
<div class="carousel-num">
</div>
</div>
<script type="text/javascript" src="../src/zepto.js"></script>
<script type="text/javascript" src="../src/require.js"></script>
<script>
requirejs.config({
  //By default load any module IDs from js/lib
  baseUrl: '../src',
  paths: {
   $: 'zepto'
  }
});
require(['carousel-image',"$"], function(CarouselImage,$) {
  var cs = new CarouselImage();
  cs.init({
   target:$('.carousel-image'),
   num:$('.carousel-num')
  });
});
</script>

Sifat API, kaedah dan panggil balik:

sasaran:
Menunjukkan bahawa elemen dalam bekas ini akan mencetuskan acara Ia sepatutnya mempunyai bekas anak untuk memudahkan pengoptimuman animasi

nombor:
Niat asal adalah untuk memaparkan nombor indeks semasa, tetapi kini nombor itu disembunyikan oleh gaya Jika anda ingin memaparkan gaya nombor, anda boleh menukar fail gaya sendiri

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.