hwSlider-content 슬라이딩 전환 효과(2): 반응형 터치 슬라이딩

오늘은 콘텐츠 슬라이딩 전환 효과의 두 번째 부분을 계속해서 설명하겠습니다. 요즘 우리의 웹 개발은 모바일 장치에 적응해야 하며, 이는 우리의 웹 페이지가 휴대폰과 같은 모바일 장치에서도 접근 가능해야 함을 의미합니다. 따라서 첫 번째 부분의 기본 전환 효과를 강화하고 반응성과 터치 슬라이딩 효과를 추가했습니다.


데모 다운로드 소스코드 보기

이 글은 hwSlider-content 슬라이딩 전환 효과의 두 번째 부분입니다. 데모 DEMO는 첫 번째 부분의 내용을 기반으로 합니다. , 그러니까, 첫 번째 부분을 읽지 않으셨다면 다음을 참고하세요: hwSlider-content 슬라이딩 전환 효과(1)

반응형

반응형 디자인이란 무엇입니까? 여기 I I 그것을 설명하지 않을 것입니다. hwSlider에서는 CSS를 통해 슬라이더의 너비와 높이를 설정하고 너비를 백분율로 설정합니다.

[code=css]
#hwslider{width: 100%;height:auto;min-height: 120px;margin:40px auto; position: relative; overflow: hidden;}
#hwslider ul{width: 100%; height:100%; position: absolute; z-index: 1}
#hwslider ul li{display:none;position:absolute; left:0; top:0; width: 100%;height:100%; overflow: hidden;}
#hwslider ul li.active{display: block;}
#hwslider ul li img{max-width: 100%}
#dots{position: absolute; bottom:20px; left:200px; min-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}

다음으로 js 부분 시작 부분에 변수를 정의합니다. 초기화 resize() 함수에서 탐색 점과 탐색 화살표의 위치를 ​​계산하고 위치를 지정하며 브라우저 창을 조정합니다. size resize()는 다음과 같은 경우에도 호출됩니다.

rree

모바일 터치 스크린 슬라이딩

모바일 기기에서는 화면을 탭하고 제스처 슬라이딩을 사용하여 슬라이더를 전환할 수 있습니다. 이 효과를 얻으려면 핵심 터치 이벤트를 사용해야 합니다. 터치 이벤트를 처리하면 화면에서 미끄러지는 각 손가락을 추적할 수 있습니다.

다음은 네 가지 터치 이벤트입니다.

touchstart: 손가락이 화면에 놓일 때 트리거됩니다.

touchmove: 손가락이 화면에서 슬라이드될 때 트리거됩니다

touchend : 손가락이 화면에서 벗어날 때 트리거

touchcancel: 시스템이 터치 이벤트를 취소할 때 트리거됨

자, 이제 바인딩하고 들어야 합니다. 슬라이더의 터치 이벤트, 터치 시작 및 터치 끝에서 각각 화면 슬라이더의 손가락 위치를 얻은 다음 변위에 따라 왼쪽 또는 오른쪽으로 슬라이드할지 여부를 결정한 다음 moveTo()를 호출하여 슬라이딩 전환을 구현합니다.

[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 sliderWidth = 600; //滑块初始宽度
	var sliderHeight = 320; //滑块初始高度
	var index = 1; //初始显示第一个滑块
	var speed = 400; //滑动速度
	var interval = 3000; //间隔时间
	var dotShow = true; //是否显示可切换的导航圆点
	var autoPlay = false; //是否支持自动滑动
	var clickable = true; //是否已经点击了滑块在做滑动动画

	

	//初始化组件
	var resize = function(){
		var sWidth = slider.width();
		var dotWidth = hwsliderSize*20;
		var dotOffset = (sWidth-dotWidth)/2;

		var sHeight = sliderHeight/sliderWidth*sWidth;
		slider.css('height',sHeight); 
		$("#dots").css('left',dotOffset+'px'); //导航圆点位置

		var arrOffset = (sHeight-40)/2;
		$(".arr").css('top',arrOffset+'px'); //导航箭头位置
	}

	resize();

	$(window).resize(function(){
	  resize();
	});

});

이전 글의 기본 슬라이더 js 코드를 추가하여 반응형 터치 슬라이딩 콘텐츠 슬라이딩 효과를 구현하세요.
PC에서 드래그 및 슬라이딩을 구현하려면 슬라이더의 onmousedown, onmousemove 및 onmouseup 이벤트를 바인딩하여 마우스를 누른 상태에서 슬라이더를 드래그하여 슬라이딩 전환을 구현해야 합니다. 주요 코드는 여기에 게시되지 않습니다. . 소스코드를 다운로드하여 보실 수 있습니다.

위 내용은 hwSlider 콘텐츠 슬라이딩 전환 효과(2) : 반응형 터치 슬라이딩 콘텐츠에 대한 자세한 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고하시기 바랍니다. !

관련 기사:

예제는 HTML5 슬라이딩 영역 선택 요소를 이해하는 데 도움이 됩니다. Slider 요소

hwSlider-Content 슬라이딩 전환 효과(1)

WeChat 애플릿 슬라이더 구성요소 상세 소개