hwSlider-コンテンツのスライド切り替え効果(1)

コンテンツのスライド切り替えには幅広い用途があり、一般的なものには、スライド フォーカス画像、ギャラリー切り替えなどが含まれます。 WEBフロントエンド技術の普及に伴い、Webページにおいてコンテンツのスライド切り替え効果が重要な位置を占めるようになりました。そこで、当サイトのHellowebaでは、フロントエンド向けのコンテンツスライド切り替え効果のわかりやすい開発チュートリアルを特別に用意しました。エンド愛好家。



デモのダウンロード ソース コードを表示します


このチュートリアルは 3 つの部分に分かれています: 1. jQuery を使用して基本的なコンテンツのスライド スイッチング効果を開発する、2. モバイル タッチ対応コンテンツのスライド スイッチング効果をサポートする、3. コンテンツのカプセル化スライド切り替えエフェクトのjQueryプラグイン。この記事では前編を説明し、次の 2 つの部分は後続の記事で公開しますので、ご期待ください。

この記事では、次のようなコンテンツのスライド切り替えの基本的な効果を達成するための例を組み合わせます:

左右矢印切り替え

無限シームレススクロール

ドットボタン切り替え

アニメーション効果

自動切り替え

HTML

最初の準備 HTML 構造。スライダー コンテンツを含むスライディング領域全体が #hwslider でラップされます。スライダーはコンテンツを整理するために ulli を使用します。スライダー コンテンツには、画像やテキストなどの任意の HTML コンテンツを使用できます。 #dots はドット切り替えナビゲーションであり、スライダーの数に対応する複数の小さなドットで構成され、通常はスライディング エリアの下に配置されます。 .arr は左右 2 つの方向キーで構成されます。

[code=html]
<p id="hwslider">
	<ul>
		<li class="active"><a href="#"><img src="/static/imghwm/default1.png"  data-src="images/s1.jpg"  class="lazy"   alt="1"></a></li>
		<li><a href="#"><img src="/static/imghwm/default1.png"  data-src="images/s2.jpg"  class="lazy"   alt="2"></a></li>
		<li>Helloweba</li>
	</ul>
	<p id="dots">
		<span data-index="1" class="active"></span>
		<span data-index="2"></span>
		<span data-index="3"></span>
	</p>
	<a href="javascript:;" id="prev" class="arr"><</a>
	<a href="javascript:;" id="next" class="arr">></a>
</p>

CSS

CSS を使用して、スライディング領域のコンポーネントのレイアウトを完了します。#hwslider は、位置: 相対、幅、および高さを設定する必要があります。次に、スライダー #hwslider ul li は、デフォルトで位置:絶対を設定します。 , .activeスライダーのみが表示され、サイズを超えた部分は非表示になります。ドット ナビゲーション #dots と矢印ナビゲーション .arr は両方とも、position:Absolute を設定する必要があります。矢印ナビゲーションはデフォルトでは表示されず、マウスがスライダー領域にスライドした場合にのみ表示されます。もう 1 つ注意すべき点は、#dots と .arr の z-index が 2 に設定されていることです。つまり、両方ともスライダーに表示される必要があります。さまざまなニーズに合わせて CSS スタイルを変更できます。次のコードを参照してください。

[code=css]
#hwslider{width: 600px;height: 320px;margin:40px auto; position: relative; overflow: hidden;}
#hwslider ul{width: 600px; height: 320px; position: absolute; z-index: 1}
#hwslider ul li{display:none;position:absolute; left:0; top:0; width: 600px;height: 320px; overflow: hidden;}
#hwslider ul li.active{display: block;}
#dots{position: absolute; bottom:20px; left:270px; width: 60px; height: 12px; z-index: 2;}
#dots span{float: left; width:12px;height: 12px; border: 1px solid #fff; border-radius: 50%; background: #333; margin-right: 8px; cursor: pointer;}
#dots span.active{background: orangered}
.arr{display:none;position: absolute; top: 140px; z-index: 2;width: 40px; height: 40px; line-height: 38px; text-align: center;; font-size: 36px; background: rgba(0,0,0,.3); color: #fff; text-decoration: none}
.arr:hover{background: rgba(0,0,0,.7); text-decoration: none;}
#hwslider:hover .arr{display: block; text-decoration: none;color: #fff}
#prev{left: 20px}
#next{right: 20px}

jQuery

jQuery を使用して、スライド切り替えのさまざまな効果を実現します。 まず、Baidu が提供する jQuery ライブラリと hwslider.js を紹介します。 CDN。

[code=html]
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/hwslider.js"></script>

次に、hwslider.js で変数パラメーターを事前定義します。

[code=js]
$(function(){
	var slider = $("#hwslider");
	var dots = $("#dots span"),
		prev = $("#prev"),next = $("#next");
	var sliderInder = slider.children('ul')
	var hwsliderLi = sliderInder.children('li');
	var hwsliderSize = hwsliderLi.length;  //滑块的总个数
	var index = 1; //初始显示第一个滑块
	var speed = 400; //滑动速度
	var interval = 3000; //间隔时间
	var autoPlay = false; //是否支持自动滑动
	var clickable = true; //是否已经点击了滑块在做滑动动画

});

上記では、さまざまな必須変数を定義しています。その中で、スライダーのスライド プロセスには時間がかかるため、クリック スライダー アニメーションを制限するために clickable が使用されます。 complete で矢印をクリックし続けると、通常の状況でクリックが制限されていない場合、スライド アニメーションが完了する前に次のスライド アニメーションが実行され、ページがスタックする可能性があります。
次に、移動アニメーション関数 moveTo() を書きましょう。 2 つのパラメータを受け入れます。index はスライドするターゲット スライダー、dir は次と前を含むスライド方向です。スライド アニメーションの実装に使用する原理は、現在のスライダーが左または右に移動する距離がスライダーの幅と同じであるということです。スライドすると、現在のスライダーは左または右に移動します。ビューポートの左側または右側から次のスライダーが入ります。 jQuery の animate() メソッドを使用してアニメーション効果を実現し、2 つのスライダーの移動速度を一定にし、シームレスなスクロール効果を実現します。また、スライドが完了すると、時間に合わせてドットの切り替えスタイルが変化します。

[code=js]
	var moveTo = function(index,dir){ 
		if(clickable){
			clickable = false;

			//位移距离
			var offset = slider.width();
			if(dir == 'prev'){
				offset = -1*offset;
			}

			//当前滑块动画
			sliderInder.children('.active').stop().animate({
				left: -offset},
				speed,
				 function() {
				 	$(this).removeClass('active');
			});
			//下一个滑块动画
			hwsliderLi.eq(index-1).css('left', offset + 'px').addClass('active').stop().animate({
				left: 0}, 
				speed,
				function(){
					clickable = true;
			});

			dots.removeClass('active');
			dots.eq(index-1).addClass('active');

		}else{
			return false;
		}
	}

矢印がクリックされたときに、現在のスライダーが最初のスライダーであるか最後のスライダーであるかを判断し、ワイヤレス スクロール効果を実現するためにインデックスを再定義してから、moveTo を呼び出します。 (それぞれ。) スライドアニメーション効果を実現する関数。

[code=js]
	next.on('click', function(event) {
		event.preventDefault();
		if(clickable){
			if(index >= hwsliderSize){
				index = 1;
			}else{
				index += 1;
			}
			moveTo(index,'next');
		}
	});

	prev.on('click', function(event) {
		event.preventDefault();
		if(clickable){
			if(index == 1){
				index = hwsliderSize;
			}else{
				index -= 1;
			}

			moveTo(index,'prev');
		}
		
	});

次に、ドットナビゲーションのクリックイベントをバインドし、小さなドットがクリックされたときに、現在クリックされているドットのシリアル番号、つまりどのドットがどのスライダーに対応しているかを取得し、moveTo()を呼び出します。をクリックして切り替えアニメーションを完了します。

[code=js]
	dots.on('click',  function(event) {
		event.preventDefault();
		
		if(clickable){
			var dotIndex = $(this).data('index');
			if(dotIndex > index){
				dir = 'next';
			}else{
				dir = 'prev';
			}
			if(dotIndex != index){
				index = dotIndex;
				moveTo(index, dir);
			}
		}
	});

自動切り替え。最初にタイマーを定義する必要があります。setInterval は一定時間ごとに play() を実行します。play() は実行されるたびにインデックス パラメーターを変更し、moveTo を呼び出して切り替え効果を実現します。最後に、マウスがスライダーを上にスライドするとタイマーはクリアされ、マウスがスライダーから離れるとタイマーは再び自動的に切り替わります。

[code=js]
	if(autoPlay){
		var timer;
		var play = function(){
			index++;
			if(index > hwsliderSize){
				index = 1;
			}
			moveTo(index, 'next');
		}
		timer = setInterval(play, interval); //设置定时器

		//鼠标滑上时暂停
		slider.hover(function() {
			timer = clearInterval(timer);
		}, function() {
			timer = setInterval(play, interval);
		});
	};

最後に、コードを整理すると、基本的なスライド切り替え効果が表示され、ソース コードをダウンロードしてテストすることもできます。

上記は、hwSlider-content スライド切り替え効果 (1) の内容です。さらに関連するコンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。

関連記事:

HTML5のスライディングエリア選択要素を理解するための例 Slider要素

hwSliderコンテンツのスライド切り替え効果(2): レスポンシブタッチスライド

詳細な紹介WeChat アプレット スライダー コンポーネントへ