hwSlider-content 슬라이딩 전환 효과 (1)
- 黄舟원래의
- 2017-03-24 10:40:532356검색
콘텐츠 슬라이딩 전환이 널리 사용되며 일반적인 예로는 슬라이드 초점 이미지, 갤러리 전환 등이 있습니다. 웹 프론트엔드 기술이 널리 적용됨에 따라 콘텐츠 슬라이딩 전환 효과는 웹 페이지에서 중요한 위치를 차지합니다. 따라서 이 웹사이트의 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="images/s1.jpg" alt="1"></a></li> <li><a href="#"><img src="images/s2.jpg" 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)를 참고해주세요!