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

콘텐츠 슬라이딩 전환이 널리 사용되며 일반적인 예로는 슬라이드 초점 이미지, 갤러리 전환 등이 있습니다. 웹 프론트엔드 기술이 널리 적용됨에 따라 콘텐츠 슬라이딩 전환 효과는 웹 페이지에서 중요한 위치를 차지합니다. 따라서 이 웹사이트의 Helloweba는 대다수를 위한 콘텐츠 슬라이딩 전환 효과에 대한 이해하기 쉬운 개발 튜토리얼을 특별히 준비했습니다. 프론트엔드 매니아들.



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


이 튜토리얼은 세 부분으로 구성됩니다. 1. jQuery를 사용하여 기본 콘텐츠 슬라이딩 전환 효과 개발, 2 . 모바일 터치 적응형 콘텐츠 슬라이딩 전환 효과를 지원합니다. 3. 콘텐츠 슬라이딩 전환 효과를 위한 jQuery 플러그인을 캡슐화합니다. 이번 글에서는 첫 번째 부분에 대해 설명하고 있으며, 다음 두 부분은 후속 글에서 공개될 예정이니 계속 지켜봐 주시기 바랍니다.

이 기사에서는 다음을 포함하여 콘텐츠 슬라이딩 전환의 기본 효과를 달성하기 위해 예제를 결합합니다.

왼쪽 및 오른쪽 화살표 전환

무한한 원활한 스크롤

도트 버튼 전환

애니메이션 효과

자동 전환

HTML

먼저 HTML 구조를 준비하고 전체 슬라이딩 영역을 #hwslider, 슬라이더 콘텐츠를 포함하여 슬라이더는 ul li를 사용하여 콘텐츠를 구성합니다. 슬라이더 콘텐츠는 그림, 텍스트 등과 같은 HTML 콘텐츠일 수 있습니다. #dots는 점 전환 탐색으로, 슬라이더 수에 해당하는 여러 개의 작은 점으로 구성되며 일반적으로 슬라이딩 영역 아래에 위치합니다. .arr은 두 개의 왼쪽 및 오른쪽 방향 키로 구성됩니다.

[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는 position :absolute를 설정합니다. 기본적으로 .active 슬라이더만 표시되고 크기를 초과하는 부분은 숨겨집니다. 도트 탐색 #dots 및 화살표 탐색 .arr 모두 위치: 절대를 설정해야 합니다. 화살표 탐색은 기본적으로 표시되지 않으며 마우스가 슬라이더 영역으로 슬라이드할 때만 표시됩니다. 주목해야 할 또 다른 점은 #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 CDN에서 제공하는 jQuery 라이브러리와 hwslider.js를 소개합니다.

[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은 슬라이더 슬라이딩 프로세스를 완료하는 데 시간이 걸리기 때문에 슬라이더 애니메이션의 클릭을 제한하는 데 사용됩니다. 화살표를 계속 클릭하면 일반적인 상황에서 클릭이 제한되지 않으면 슬라이딩할 때 다음 슬라이딩 애니메이션이 수행됩니다. 애니메이션이 완료되지 않아 페이지가 멈출 수 있습니다.
다음으로 이동 애니메이션 함수 moveTo()를 작성해 보겠습니다. 두 개의 매개변수를 허용합니다. index는 슬라이딩할 대상 슬라이더이고, dir은 다음과 이전을 포함한 슬라이딩 방향입니다. 슬라이딩 애니메이션을 구현하는 데 사용하는 원리는 현재 슬라이더가 왼쪽이나 오른쪽으로 이동하는 거리가 정확히 슬라이더의 너비와 같다는 것입니다. 슬라이딩할 때 현재 슬라이더는 왼쪽이나 오른쪽으로 이동합니다. 가시 영역의 다음 슬라이더는 왼쪽이나 오른쪽에서 뷰포트로 들어갑니다. 애니메이션 효과를 얻기 위해 jQuery의 animate() 메서드를 사용합니다. 두 슬라이더의 이동 속도는 일정하게 유지되어 원활한 스크롤 효과를 얻습니다. 또한 슬라이딩이 완료되면 도트 전환 스타일이 시간에 따라 변경됩니다.

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

먼저 타이머를 정의하고 특정 시간에 setInterval을 실행해야 합니다. Play()는 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);
			}
		}
	});

코드를 완성한 후에는 기본적인 슬라이딩 전환 효과를 볼 수 있으며, 소스 코드를 다운로드하여 테스트할 수도 있습니다.

위 내용은 hwSlider-content 슬라이딩 전환 효과(1) 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

-->