JS asli melaksanakan pemalam karusel imej gaya karusel

Saya sendiri telah menulis tiga karusel imej, satu dilaksanakan dengan JS asli yang ringkas tanpa sebarang kesan animasi, dan satu lagi dilaksanakan dengan JQuery dan bertukar antara fade-in dan fade-out. Sekarang saya ingin membuat yang lebih sejuk dan meletakkannya di blog atau laman web peribadi saya supaya saya boleh mempamerkan hasil kerja saya. Saya menyemak imbas laman web MOOC dan menemui kursus pemalam jquery karusel, yang agak menarik, jadi saya berfikir untuk merangkumnya dengan JS asli. Hanya apabila saya mula melakukannya, saya menyedari bahawa ia tidak semudah yang saya fikirkan. . . Tanpa berlengah lagi, mari jelaskan proses pelaksanaannya.

2. Kesan

Sebab pelayan saya belum selesai. Tiada demonstrasi dalam talian (ORZ...), jadi saya hanya boleh meletakkan rendering.

Anda masih boleh melihat kesan anggaran daripada gambar, jadi saya tidak akan memberitahu lebih lanjut. Jika anda ingin melihat kesan kod sebenar, anda dialu-alukan untuk memuat turun kod di github saya Jangan lupa untuk memberi bintang kepada projek github saya ^_^

3 🎜>

struktur html

<div class="carrousel-main" data-setting=&#39;{"width":1000,"height":400,
 "carrouselWidth":750,
 "carrouselHeight":400,
 "scale":0.9,
 "verticalAlign":"middle"}&#39;>
 <div class="carrousel-btn carrousel-btn-pre"></div>
 <ul class="carrousel-list">
  <li class="carrousel-item">
  <a href="#"><img  src="img/JS asli melaksanakan pemalam karusel imej gaya karusel" alt="JS asli melaksanakan pemalam karusel imej gaya karusel" ></a>
  </li>
  <li class="carrousel-item">
  <a href="#"><img  src="img/2.jpg" alt="JS asli melaksanakan pemalam karusel imej gaya karusel" ></a>
  </li>
  <li class="carrousel-item">
  <a href="#"><img  src="img/3.jpg" alt="JS asli melaksanakan pemalam karusel imej gaya karusel" ></a>
  </li>
  <li class="carrousel-item">
  <a href="#"><img  src="img/4.jpg" alt="JS asli melaksanakan pemalam karusel imej gaya karusel" ></a>
  </li>
  <li class="carrousel-item">
  <a href="#"><img  src="img/5.jpg" alt="JS asli melaksanakan pemalam karusel imej gaya karusel" ></a>
 </ul>
 <div class="carrousel-btn carrousel-btn-next"></div>
 </div>

Struktur ini adalah sama dengan struktur kod html karusel umum Perbezaannya ialah div karusel utama mempunyai atribut penetapan data di atasnya Ini Antara ciri-ciri adalah beberapa parameter kesan karusel. Maksud khusus parameter akan diterangkan kemudian.

Saya tidak akan menyiarkan kod untuk bahagian css Perkara yang paling penting ialah memberi perhatian kepada kedudukan mutlak elemen Seperti yang anda boleh lihat dari pemaparan, kedudukan dan saiz setiap gambar berbeza, jadi ini dikawal melalui js , jadi kedudukan mutlak diperlukan. Berikut memberi tumpuan kepada proses pelaksanaan js.

Proses pelaksanaan JS

Mari kita bincangkan tentang beberapa langkah utama JS Selepas melengkapkan langkah-langkah ini, tidak akan ada kesukaran.

①Parameter lalai

Memandangkan ia adalah pemalam pakej, pasti akan terdapat beberapa nilai lalai parameter yang perlu dikonfigurasikan. Dalam pemalam ini, parameter utama adalah seperti berikut:

lebar:1000, //Lebar kawasan slaid
tinggi:400, //Ketinggian kawasan slaid
carrouselWidth:700, //Slaid pertama Lebar bingkai
carrouselHeight:400, //Ketinggian bingkai pertama slaid
skala:0.9,//Rekodkan perkadaran perkadaran paparan, contohnya, berapa lebih kecil lebar dan tinggi bagi gambar kedua dibandingkan dengan gambar pertama
autoPlay:true,//Sama ada untuk memainkan secara automatik
timeSpan:3000,//Auto main selang masa
verticalAlign:'middle' //Penjajaran gambar, di sana. ialah tiga cara: topmiddlebottom, lalai ialah tengah

②Objek enkapsulasi

Oleh kerana tapak web mungkin menggunakan pemalam karusel yang sama di beberapa tempat , enkapsulasi adalah kritikal. Selepas mentakrifkan objek ini, jika anda mentakrifkan kaedah permulaan untuk objek, anda boleh mencipta berbilang objek Anda hanya perlu lulus dalam DOM kelas yang sama untuk semua kelas. Jadi, kaedah permulaan saya adalah seperti berikut:

Carousel.init=function(carrousels){
 var _this=this;
 //将nodeList转换为数组
 var cals= toArray(carrousels); <br> /*因为原生JS获取所有的类，得到的是一个nodeList，是一个类数组,如果想要使用数组的方法则需要转化为真正的数组。这里toArray为转化方法。*/
 cals.forEach(function(item,index,array){
 new _this(item);
 });
 }

Dalam kes ini, apabila saya berada dalam window.onload, saya memanggil Carrousel.init(document.querySelectorAll('.carrousel-main') ); seperti ini Anda boleh membuat berbilang karusel!

③Memulakan parameter kedudukan bingkai pertama

Oleh kerana parameter yang berkaitan bagi semua bingkai selepas bingkai pertama merujuk kepada bingkai pertama Ia adalah ditakrifkan oleh bingkai, jadi adalah penting untuk menentukan bingkai pertama dengan baik.

setValue:function(){
this.carrousel.style.width=this.Settings.width+'px';
this.carrousel.style.height=this.Settings.height+'px';
 /*左右按钮设置,这里要让左右按钮平均地瓜分轮播区域宽减去第一帧宽度之后的区域,z-index要比除第一帧外所有图片都高，而图片刚好左右分放置，因此z-index的值就是图片数量的一半。*/
 var btnW=(this.Settings.width-this.Settings.carrouselWidth)/2;
 this.preBtn.style.width=btnW+'px';
 this.preBtn.style.height=this.Settings.height+'px';
 this.preBtn.style.zIndex=Math.ceil(this.carrouselItems.length/2);
 
 this.nextBtn.style.width=btnW+'px';
 this.nextBtn.style.height=this.Settings.height+'px';
 this.nextBtn.style.zIndex=Math.ceil(this.carrouselItems.length/2);
 //第一帧相关设置
 this.carrouselFir.style.left=btnW+'px';
 this.carrouselFir.style.top=this.setCarrouselAlign(this.Settings.carrouselHeight)+'px';
 this.carrouselFir.style.width=this.Settings.carrouselWidth+'px';
 this.carrouselFir.style.height=this.Settings.carrouselHeight+'px';
 this.carrouselFir.style.zIndex=Math.floor(this.carrouselItems.length/2);
},

Di sini, apabila ia berkaitan dengan objek baharu, pergi ke nod dom untuk mendapatkan parameter tetapan data, dan kemudian kemas kini konfigurasi parameter lalai. Terdapat sesuatu yang perlu diperhatikan di sini. Mendapatkan parameter DOM tidak boleh mengemas kini parameter lalai secara langsung dengan menetapkan nilai, kerana apabila pengguna mengkonfigurasi parameter, semua parameter mungkin tidak dikonfigurasikan sekali. Jika nilai diberikan secara langsung dan pengguna tidak mengkonfigurasi semua parameter, parameter akan hilang. Di sini saya menulis kaedah sambungan objek yang serupa dengan kaedah $.extend dalam JQuery untuk mengemas kini parameter. Saya tidak akan menyenaraikannya secara khusus, tetapi mereka yang berminat boleh memuat turunnya.

④Tetapan kedudukan gambar lain

Gambar di sini sebenarnya membahagikan gambar kecuali yang pertama sama rata ke kiri dan kanan Dua, dan kedudukan gambar di sebelah kiri adalah berbeza daripada di sebelah kanan, jadi mereka perlu dikonfigurasikan secara berasingan:

//设置右边图片的位置关系
var rightIndex=level;
rightSlice.forEach(function(item,index,array){
 rightIndex--;
 var i=index;
 rw=rw*carrouselSelf.Settings.scale;//右边的图片是按照scale比例逐渐变小的
 rh=rh*carrouselSelf.Settings.scale;
 
 item.style.zIndex=rightIndex;//越往右边z-index的值越小，可以用图片数量的一般逐渐递减
 item.style.width=rw+'px';
 item.style.height=rh+'px';
 item.style.opacity=1/(++i);//越往右边透明度越小<br>  //这里的gap计算方法为：轮播区域减去第一帧宽度，除2，再除左边或者右边的图片张数
 item.style.left=(constOffset+(++index)*gap-rw)+&#39;px&#39;;//left的值实际上就是第一帧的left+第一帧的宽度+item的间距减去item的宽度
 item.style.top=carrouselSelf.setCarrouselAlign(rh)+&#39;px&#39;;
});

Kaedah tetapan di sebelah kiri adalah serupa dan lebih mudah, jadi saya tidak akan pergi ke dalam butiran.

⑤ Laraskan kedudukan dan saiz semua gambar semasa putaran

Langkah ini sangat kritikal Klik butang di sebelah kanan untuk memutar gambar seterusnya ke kiri Klik butang di sebelah kiri untuk berputar ke kanan. Pada masa ini, kita hanya perlu melihat semua gambar sebagai cincin, klik sekali, tukar kedudukan sekali dan selesaikan putaran. Khususnya, apabila berputar ke kiri, jadikan parameter gambar kedua sama dengan gambar pertama, gambar ketiga sama dengan gambar kedua... dan gambar terakhir sama dengan gambar pertama. Apabila berputar ke kanan, jadikan parameter gambar pertama sama dengan gambar kedua, parameter gambar kedua sama dengan gambar ketiga... dan parameter gambar terakhir sama dengan gambar pertama.

这里就说说左旋转吧

if(dir=='left'){
 toArray(this.carrouselItems).forEach(function(item,index,array){
 var pre;
 if(index==0){//判断是否为第一张
  pre=_this.carrouselLat;//让第一张的pre等于最后一张
  var width=pre.offsetWidth; //获取相应参数
  var height=pre.offsetHeight;
  var zIndex=pre.style.zIndex;
  var opa=pre.style.opacity;
  var top=pre.style.top;
  var left=pre.style.left;
 }else{
  var width = tempWidth;
  var height = tempHeight;
  var zIndex = tempZIndex;
  var opa = tempOpacity;
  var top = tempTop;
  var left = tempLeft;
 }
  //这里需要注意，因为第二张图片是参照第一张的，而这样改变的时候，第一张是首先被改变的，因此必须先把第一张的相关参数临时保存起来。
 tempWidth = item.offsetWidth;
 tempHeight = item.offsetHeight;
 tempZIndex = item.style.zIndex;
 tempOpacity = item.style.opacity;
 tempTop = item.style.top;
 tempLeft = item.style.left;
 
 item.style.width=width+'px';
 item.style.height=height+'px';
 item.style.zIndex=zIndex;
 item.style.opacity=opa;
 item.style.top=top;
  // item.style.left=left;
  animate(item,'left',left,function(){//自定义的原生js动画函数
  _this.rotateFlag=true;
  });
 });
}

这里的旋转，如果不使用一些动画过度，会显得很生硬。但是原生JS并没有动画函数，这里我是自己写了一个模仿的动画函数。其原理就是获取dom原来的样式值，与新传入的值比较。用一些方法定义一个速度。我这里的速度就是用其差值除18.然定义一个计时器，参考了一下jquery源码里面的时间间隔为每13毫秒执行一次。然后才原来的样式值每次加上speed后等于传入的值的时候清楚计时器即可。具体可以看这里。

好啦，关键的地方都差不多啦，如果明白这些过程应该就很容易了！

四、总结思考

总结：

个人感觉这还是一个比较好理解的插件。如果能结合JQuery来做就相当简单了。但是用原生来写的话，还是有一些不那么流畅的感觉。应该是自定义动画比不上JQuery封装好的动画吧。

还有，这个插件因为图片需要平均分到左右两边，于是对于偶数数量的图片来说，这里用的方法是克隆第一张，然后加到最后，形成一个奇数。

思考：

如果说有bug的话，那就是我定义了一个rotateFlag的标志去判断当前能否旋转，就是预防快速点击的时候跟不上。我在按下的时候把rotateFlag设置为false，然后在动画结束后再把rotateFlag设置为true，但是好像作用并不明显，希望有关大神可以指教一下，大家共同进步。

更多编程相关知识，请访问：编程入门！！