ネイティブ JS はカルーセル スタイルの画像カルーセル プラグインを実装します

私は 3 つの画像カルーセルを自分で作成しました。1 つはアニメーション効果のない単純なネイティブ JS で実装され、もう 1 つは JQuery で実装され、フェードインとフェードアウトを切り替えます。今度は、もっとカッコいいものを作って、ブログや個人のウェブサイトに載せて、自分の作品を紹介したいと思っています。 MOOC の Web サイトを閲覧して、カルーセル jquery プラグインのコースを見つけました。これはちょっとクールだったので、ネイティブ JS でカプセル化することを考えました。やり始めて初めて、それが思ったほど簡単ではないことに気づきました。 。 。さっそく、実装プロセスを説明しましょう。

2. 効果

サーバーがまだ完成していないため。オンラインデモがないので(ORZ...)、レンダリングしか載せられません。

おおよその効果は写真からも確認できるので、これ以上は言いません。実際のコードの効果を確認したい場合は、私の github プロジェクトにスターを付けることを忘れずに、コードをダウンロードしてください。^_^

3. 🎜>

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="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"   alt="ネイティブ JS はカルーセル スタイルの画像カルーセル プラグインを実装します" ></a>
  </li>
  <li class="carrousel-item">
  <a href="#"><img  src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"   alt="ネイティブ JS はカルーセル スタイルの画像カルーセル プラグインを実装します" ></a>
  </li>
  <li class="carrousel-item">
  <a href="#"><img  src="/static/imghwm/default1.png"  data-src="img/3.jpg"  class="lazy"   alt="ネイティブ JS はカルーセル スタイルの画像カルーセル プラグインを実装します" ></a>
  </li>
  <li class="carrousel-item">
  <a href="#"><img  src="/static/imghwm/default1.png"  data-src="img/4.jpg"  class="lazy"   alt="ネイティブ JS はカルーセル スタイルの画像カルーセル プラグインを実装します" ></a>
  </li>
  <li class="carrousel-item">
  <a href="#"><img  src="/static/imghwm/default1.png"  data-src="img/5.jpg"  class="lazy"   alt="ネイティブ JS はカルーセル スタイルの画像カルーセル プラグインを実装します" ></a>
 </ul>
 <div class="carrousel-btn carrousel-btn-next"></div>
 </div>

この構造は、一般的なカルーセルの HTML コード構造と同じです。わずかな違いは、メインのカルーセル div にデータがあることです。このプロパティには、カルーセル効果のいくつかのパラメータがあります。パラメータの具体的な意味については後述する。

CSS 部分のコードは掲載しません。レンダリングから分かるように、最も重要なことは要素の絶対位置に注意を払うことです。異なるため、これらは js を通じて制御されるため、絶対位置指定が必要です。以下では、js の実装プロセスに焦点を当てます。

JS 実装プロセス

JS のいくつかの重要な手順について説明します。これらの手順を完了すると、難しいことは何もなくなります。

①デフォルトパラメータ

パッケージプラグインなので、必ず設定が必要なパラメータのデフォルト値がいくつかあります。設定されています。このプラグインの主なパラメータは次のとおりです:

width:1000, //スライド エリアの幅
height:400, //スライド エリアの高さ
carrouselWidth:700, //最初のスライド フレーム幅
carrouselHeight:400, //スライドの最初のフレームの高さ
スケール:0.9,// 表示比率の関係を記録します。たとえば、スライドの幅と高さがどれだけ小さいかを記録します。 2 番目の画像は最初の画像と比較されます。
autoPlay:true,//自動再生するかどうか
timeSpan:3000,//自動再生時間間隔
verticalAlign:'middle' //画像の配置、あります。方法は 3 つあります: topmiddlebottom、デフォルトは middle です

②カプセル化オブジェクト

Web サイトが複数の場所で同じカルーセル プラグインを使用する可能性があるため、カプセル化が重要です。このオブジェクトを定義した後、オブジェクトの初期化メソッドを定義すると、すべてのクラスに同じクラスの DOM を渡すだけで複数のオブジェクトを作成できます。したがって、私の初期化メソッドは次のとおりです。

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);
 });
 }

この場合、window.onload にいるときに、Carrousel.init(document.querySelectorAll('.carrousel-main')) を呼び出します。 ; このように複数のカルーセルを作成できます。

③最初のフレームの位置パラメータを初期化します

最初のフレーム以降のすべてのフレームの関連パラメータは最初のフレームを参照するためですフレームによって定義されるため、最初のフレームを適切に定義することが重要です。

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);
},

ここで、新しいオブジェクトに関しては、dom ノードに移動してデータ設定パラメータを取得し、デフォルトのパラメータ設定を更新します。ここで注意すべき点があります。ユーザーがパラメータを設定するときに、すべてのパラメータが一度に設定されるわけではないため、dom パラメータを取得しても、値を割り当ててデフォルト パラメータを直接更新することはできません。値が直接割り当てられ、ユーザーがすべてのパラメータを設定しない場合、パラメータは失われます。ここでは、パラメーターを更新するために、JQuery の $.extend メソッドに似たオブジェクト拡張メソッドを作成しました。具体的には挙げませんが、興味のある方はダウンロードしてみてください。

④その他の画像位置設定

ここの画像は実際には1枚目以外の画像を左右均等に分割しています。左側の画像の位置は右側の画像の位置と異なるため、個別に設定する必要があります:

//设置右边图片的位置关系
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;;
});

左側の設定方法は同様で簡単なので省略します。詳細に。

⑤ 回転中にすべての画像の位置とサイズを調整します

この手順は、画像を回転させるために非常に重要です。次の写真は左にあります。左のボタンをクリックすると右に回転します。現時点では、すべての写真をリングとして表示し、1 回クリックし、1 回位置を変更して回転を完了するだけです。具体的には、左に回転する場合、2 番目のピクチャのパラメータを最初のピクチャと同じにし、3 番目のピクチャを 2 番目のピクチャと同じにし、...最後のピクチャを最初のピクチャと等しくします。右に回転する場合、最初のピクチャのパラメータは 2 番目のピクチャと等しく、2 番目のピクチャのパラメータは 3 番目のピクチャと等しくなります...そして最後のピクチャのパラメータは最初のピクチャと等しくなります。

这里就说说左旋转吧

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，但是好像作用并不明显，希望有关大神可以指教一下，大家共同进步。

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