슬라이더는 일렬로 배열된 이미지를 가로로 스크롤합니다. 이미지의 크기는 동일해야 합니다. 이미지 스크롤은 자동으로 발생하거나 앞으로 및 뒤로 버튼을 사용하여 발생합니다. 결국 어떤 일이 일어날지에 대한 예는 아래 예에서 볼 수 있습니다.
이 슬라이더는 설치가 매우 쉽습니다. 평소와 마찬가지로 원하는 결과를 얻으려면 스크립트와 코드를 구현하기 위해 여러 단계를 거쳐야 합니다.
HTML 코드슬라이더 자체를 표시하려는 위치에 향후 슬라이더의 HTML 코드를 추가해야 합니다.
- sl_ctr은 슬라이더의 모든 요소를 포함하는 슬라이더의 기본 컨테이너입니다.
- sldr은 이미지가 포함된 컨테이너입니다. 그 안에는 4개의 이미지가 있습니다. 원하는 만큼 이미지를 게시할 수 있습니다.
- prv_b - 슬라이드를 뒤로 이동하는 버튼입니다.
- nxt_b - 슬라이드를 앞으로 이동하는 버튼입니다.
Sl_ctr( 위치: 상대; 너비:450px; 높이:300px; 오버플로: 숨김; ) .sldr( 위치: 상대; 너비:10000px; 높이:300px; ) .sldr img( float:left; ) .prv_b, .nxt_b( 위치:절대; 디스플레이:블록; 높이:35px; .prv_b:hover, .nxt_b:hover(불투명도:.6;) .prv_b( 왼쪽:10px; url(images/prv.png) 반복 없음; ) (오른쪽:10px; 배경:url(images/nxt.png) 반복 없음; )
- sl_ctr - 슬라이더의 크기를 컨테이너로 설정합니다(이 경우 너비 450픽셀, 높이 300픽셀). Overflow:hidden 매개변수도 이 컨테이너의 경계를 벗어나는 모든 항목을 자르도록 설정됩니다. 우리의 경우 한 줄에 위치한 이미지입니다.
- sldr - 사진이 포함된 컨테이너의 너비를 10,000픽셀로 설정하여 사진 수에 관계없이 모든 사진을 넣을 수 있습니다. 높이도 기본 컨테이너와 마찬가지로 300픽셀로 설정됩니다.
- sldr img - 왼쪽에 있는 모든 사진을 눌러 한 줄로 나열합니다.
- .prv_b, .nxt_b - 제어 버튼의 일반 스타일을 설정한 다음 각각 개별적으로 설정합니다.
음, 애니메이션을 수행하고 슬라이더를 제어하는 스크립트 자체입니다. 지침을 사용하여 편리한 방법으로 연결할 수도 있습니다.
$(function() ( var sldr = $(".sldr"), sldrContent = sldr.html(), SlideWidth = $(".sl_ctr").outerWidth(), SlideCount = $(".sldr img"). 길이, prv_b = $(".prv_b"), nxt_b = $(".nxt_b"), sldrInterval = 3300, animateTime = 1000, 코스 = 1, margin = - SlideWidth $(".sldr img:last"). clone().prependTo(".sldr");$(".sldr img").eq(1).clone().appendTo(".sldr");$(".sldr").css("margin -left",-slideWidth);function nxt_bSlide())(interval=window.setInterval(animate,sldrInterval))function animate())(if(margin==-slideCount*slideWidth-slideWidth)(sldr.css((" marginLeft" :-slideWidth));margin=-slideWidth*2)else if(margin==0&&course==-1)(sldr.css(("marginLeft":-slideWidth*slideCount));margin=-slideWidth*slideCount +slideWidth )else(margin=margin-slideWidth*(코스))sldr.animate(("marginLeft":margin),animateTime))function sldrStop())(window.clearInterval(간격))prv_b.click(function() )(if( sldr.is(":animated"))(return false)varcourse2=course;course=-1;animate();course=course2));nxt_b.click(function())(if(sldr .is(": 애니메이션"))(false 반환)varcourse2=course;course=1;animate();course=course2));sldr.add(nxt_b).add(prv_b).hover(function()) (sldrStop()), nxt_bSlide);nxt_bSlide()));
그럼, 스크립트의 기본 설정을 살펴보겠습니다.
- var sldr = $(".sldr") - 이미지용 컨테이너에서 변수를 설정합니다. 클래스 이름을 변경하는 경우 HTML, CSS 및 스크립트 모두에서 일치하도록 매우 주의 깊게 변경하십시오.
- SlideWidth = $(".sl_ctr").outerWidth() - 슬라이더의 너비를 결정합니다.
- SlideCount = $(".sldr img").length - 슬라이드 수, 즉 코드에 추가한 그림 수를 결정합니다.
- prv_b = $(".prv_b") - 슬라이드를 제어하기 위한 뒤로 버튼이 있는 블록을 정의합니다.
- prv_b = $(".nxt_b") - 슬라이드를 제어하기 위한 앞으로 버튼이 있는 블록을 정의합니다.
- sldrInterval = 3300 - 하나의 이미지를 표시하는 데 걸리는 시간입니다. 3.3초
- animateTime = 1000 - 애니메이션 시간, 슬라이드 변경. 1초.
- 코스 = 1 - 슬라이드 이동 방향. 이 경우 이미지는 왼쪽으로 이동하여 오른쪽에 있는 이미지를 보여줍니다. 값을 -1로 설정하면 방향이 변경됩니다.
- 여백 = - SlideWidth;
- 초기 슬라이드 변위.
또한 슬라이더 위로 커서를 가져가면 애니메이션이 중지됩니다.
모든 작업이 올바르게 완료되고 구성되면 슬라이더가 이미 사이트에서 작동할 것입니다. 자료는 복잡하지 않으며 사이트의 특정 작업을 자신에게 맞게 사용자 정의할 수 있으며 이 슬라이더는 귀하와 귀하의 방문자를 기쁘게 할 것입니다.
하지만 지금은 JS의 기본 사항을 살펴보고 있으므로 기본 사항을 학습하기 위해 JavaScript 언어만을 사용하여 간단한 슬라이더를 만드는 방법을 설명하겠습니다. 자, 자료 분석을 시작하겠습니다!
어떤 유형의 슬라이더가 있으며 어디에 필요할 수 있습니까?최소한 일부 사진이 포함된 모든 웹 서비스에는 이미지를 보기 위한 편리한 갤러리를 만드는 것이 필요합니다. 온라인 상점, 포트폴리오 웹사이트, 뉴스 및 교육 서비스, 사진 보고서가 있는 회사 및 엔터테인먼트 시설 웹사이트 등이 될 수 있습니다.
그러나 이는 슬라이더의 표준 사용입니다. 이러한 기술은 판촉 상품, 서비스로 고객을 유치하거나 기업의 장점을 설명하는 데에도 사용됩니다.
대부분의 고객은 웹페이지에 "회전식 슬라이드" 유형의 갤러리를 구현해 달라고 요청합니다. 이는 사용자가 슬라이드를 앞뒤로 전환할 수 있는 기능을 통해 큰 크기의 이미지를 볼 수 있는 편리한 도구입니다. 이 경우 일반적으로 사진 자체는 특정 시간이 지나면 자동으로 전환됩니다. 이 메커니즘은 사진 표시가 원형으로 반복되기 때문에 캐러셀(carousel)이라고 불렸습니다.
오늘은 원하신다면 인터넷에서 사진 세트를 보기 위한 가장 독특하고 매력적인 플러그인을 찾으실 수 있습니다.
독립적인 활동자, 이제 우리만의 슬라이더를 만들어 보겠습니다. 튜토리얼의 이 시점에서는 순수 JavaScript를 사용하여 구현하는 것이 좋습니다. 이렇게 하면 원 안의 사진이 자동으로 전환됩니다.
아래에 내 신청서에 대한 코드를 첨부했습니다. 코딩하면서 여러분을 위해 댓글을 남겼습니다.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | /*미래 슬라이더의 기초인 프레임의 모양을 설명합니다. */ #slides( position:relative; height: 415px; width: 100%; padding: 0px; list-style-type: none; box-shadow: 0 0 7px #010 , 0 0 10px blue, 0 0 15px #010, 0 0 35px #010; ) /* 사진 표시 편집*/ img ( width: auto; height: 390px; padding: 13px; ) /* 목록 항목의 내용이 상위 요소의 중앙에 표시된다는 것을 나타냅니다. 이 경우 ul 요소의 중앙 - 슬라이드의 기초 */ li ( text-align: center; ) /* 슬라이드 자체의 모양을 설명합니다 */ .slide( position:absolute; opacity: 0 ; 위쪽: 0px; 왼쪽: 0px; 너비: 100%; -moz-transition: 불투명도 1.5s; 표시되고 전경으로 이동합니다. : 1; Z-색인: 4; |
자동 이미지 전환기 /*프레임 모양 설명, 향후 슬라이더의 기초 */ #slides( position:relative; height: 415px; width: 100%; padding: 0px; list-style-type: none; box- Shadow: 0 0 7px #010, 0 0 10px blue, 0 0 15px #010, 0 0 35px #010; ) /* 이미지 표시 편집*/ img ( width: auto; height: 390px; padding: 13px; ) /* 콘텐츠 목록 항목이 상위 요소의 중앙에 표시됨을 나타냅니다. 이 경우 ul 요소의 중앙 - 슬라이드의 기초 */ li ( text-align: center; ) /* 슬라이드 자체의 모양을 설명합니다 */ .slide( position:absolute; opacity: 0 ; 위쪽: 0px; 왼쪽: 0px; 너비: 100%; -moz-transition: 불투명도 1.5s; 표시되고 전경으로 이동합니다. : 1; Z-색인: 4;
CSS와 HTML 코드에 문제가 없었기를 바랍니다. 하지만 대본 작업을 분해하는 것이 필요하다고 생각합니다. 이제 쓰여진 내용을 해독해 보겠습니다.
따라서 먼저 querySelectorAll 메서드를 사용하여 MySlider 변수에 지정된 범위 내의 모든 요소 목록을 할당합니다. 이 항목을 나타냅니다.
document.querySelectorAll("#슬라이드 .슬라이드")
따라서 MySlider는 네 가지 요소의 컬렉션을 저장합니다.
다음으로 currentPicture 변수를 0으로 설정하여 표시를 시작할 이미지를 지정합니다. 그런 다음 슬라이드 변경이 2.7초 내에 발생하고 nextSlide 처리 함수를 호출해야 함을 나타냅니다.
기능 자체로 넘어 갑시다.
처음에는 현재 목록 요소에 대해 클래스 설명을 변경합니다. "슬라이드 표시"를 "슬라이드"로 다시 씁니다. 결과적으로 이미지가 보이지 않게 됩니다.
이제 화면에 표시될 새 컬렉션 요소를 정의합니다. 이를 위해 현재 위치를 +1로 설정합니다. 사용 가능한 슬라이드 수를 기준으로 나머지(%)를 나누는 방법도 사용한다는 사실을 눈치채셨을 것입니다. 새로운 서클에서 쇼를 시작하려면 귀를 이용한 이 트릭이 필요합니다. 이것이 문자 그대로의 모습입니다.
1. 뛰어난 jQuery 슬라이드쇼jQuery 기술을 사용한 크고 화려한 슬라이드쇼.
2. jQuery 플러그인 “Scale Carousel”jQuery를 사용하여 확장 가능한 슬라이드쇼. 자신에게 가장 적합한 슬라이드쇼 크기를 설정할 수 있습니다.
3. jQuery 플러그인 “slideJS”텍스트 설명이 포함된 이미지 슬라이더입니다.
4. 플러그인 “JSliderNews” 5. CSS3 jQuery 슬라이더탐색 화살표 위로 마우스를 가져가면 다음 슬라이드의 원형 축소판이 나타납니다.
6. 멋진 jQuery "프레젠테이션 주기" 슬라이더이미지 로딩 표시기가 있는 jQuery 슬라이더. 자동 슬라이드 변경 기능이 제공됩니다.
7. jQuery 플러그인 “시차 슬라이더”체적 배경 효과가 있는 슬라이더입니다. 이 슬라이더의 하이라이트는 배경의 움직임입니다. 이 배경은 여러 레이어로 구성되어 있으며 각 레이어는 서로 다른 속도로 스크롤됩니다. 결과는 체적 효과의 모방입니다. 그것은 매우 아름다워 보입니다. 직접 볼 수 있습니다. Opera, Google Chrome, IE 등의 브라우저에서는 효과가 더욱 원활하게 표시됩니다.
8. 신선하고 가벼운 jQuery 슬라이더 “bxSlider 3.0”데모 페이지의 "예제" 섹션에서 이 플러그인의 가능한 모든 용도에 대한 링크를 찾을 수 있습니다.
9. jQuery 이미지 슬라이더, “slideJS” 플러그인세련된 jQuery 슬라이더로 프로젝트를 꾸밀 수 있습니다.
10. jQuery 슬라이드쇼 플러그인 “Easy Slides” v1.1슬라이드쇼 생성을 위한 사용하기 쉬운 jQuery 플러그인입니다.
11. jQuery 슬라이딩 플러그인다양한 버전의 경량 jQuery 플러그인. 자동 슬라이드 변경 기능이 제공됩니다.
12. 자동 슬라이드 변경 기능이 있는 jQuery CSS 갤러리방문자가 특정 시간 내에 "앞으로" 또는 "뒤로" 화살표를 클릭하지 않으면 갤러리가 자동으로 스크롤되기 시작합니다.
13. jQuery 슬라이더 “Nivo Slider”유효한 코드가 포함된 매우 전문적이고 고품질이며 가벼운 플러그인입니다. 다양한 슬라이드 전환 효과를 사용할 수 있습니다.
14. jQuery 슬라이더 “MobilySlider”신선한 슬라이더. 다양한 이미지 변경 효과를 제공하는 jQuery 슬라이더입니다.
15. jQuery 플러그인 “Slider²”자동 슬라이드 체인저가 있는 경량 슬라이더.
16. 새로운 자바스크립트 슬라이더자동 이미지 변경 기능이 있는 슬라이더.
자동 슬라이드 변경으로 슬라이드 쇼를 구현하기 위한 플러그인입니다. 이미지 썸네일을 사용하여 디스플레이를 제어할 수 있습니다.
NivoSlider 플러그인을 사용하는 jQuery CSS 이미지 슬라이더.
19. jQuery 슬라이더 “jShowOff”콘텐츠 회전을 위한 플러그인입니다. 사용 가능한 세 가지 옵션: 탐색 없음(슬라이드 쇼 형식 자동 변경 포함), 버튼 형태 탐색 있음, 이미지 축소판 형태 탐색 있음.
20. 셔터 효과 포트폴리오 플러그인사진작가의 포트폴리오를 디자인하기 위한 새로운 jQuery 플러그인입니다. 갤러리에는 이미지를 바꾸는 흥미로운 효과가 있습니다. 렌즈 셔터 작동과 유사한 효과로 사진이 서로 이어집니다.
21. 경량 자바스크립트 CSS 슬라이더 “TinySlider 2”자바스크립트와 CSS를 사용하여 이미지 슬라이더를 구현합니다.
22. 멋진 슬라이더 “Tinycircleslider”세련된 원형 슬라이더. 이미지 사이의 전환은 원주 주위의 빨간색 원 형태로 슬라이더를 드래그하여 수행됩니다. 디자인에 둥근 요소를 사용하면 웹사이트에 완벽하게 들어맞을 것입니다.
23. jQuery를 사용한 이미지 슬라이더경량 슬라이더 "슬라이더 키트". 슬라이더는 수직 및 수평 등 다양한 디자인으로 제공됩니다. "앞으로" 및 "뒤로" 버튼 사용, 마우스 휠 사용, 슬라이드에서 마우스 클릭 사용 등 다양한 유형의 이미지 간 탐색도 구현됩니다.
24. 미니어처 갤러리 "슬라이더 키트"갤러리 "슬라이더 키트". 축소판 스크롤은 수직 및 수평으로 모두 수행됩니다. 이미지 간 전환은 마우스 휠, 마우스 클릭 또는 썸네일 위에 커서를 올리면 수행됩니다.
25. jQuery 콘텐츠 슬라이더 “슬라이더 키트”jQuery를 사용한 수직 및 수평 콘텐츠 슬라이더.
26. jQuery 슬라이드쇼 “슬라이더 키트”자동 슬라이드 변경 기능이 있는 슬라이드쇼.
27. 경량 전문 자바스크립트 CSS3 슬라이더2011년에 만들어진 깔끔한 jQuery 및 CSS3 슬라이더입니다.
축소판이 포함된 jQuery 슬라이드쇼.
29. 간단한 jQuery 슬라이드쇼탐색 버튼이 있는 슬라이드쇼.
30. 멋진 jQuery "Skitter" 슬라이드쇼멋진 슬라이드쇼를 만들기 위한 jQuery Skitter 플러그인. 플러그인은 이미지 변경 시 22가지(!) 유형의 다양한 애니메이션 효과를 지원합니다. 두 가지 슬라이드 탐색 옵션(슬라이드 번호 사용 및 축소판 사용)으로 작업할 수 있습니다. 매우 높은 품질의 발견인 데모를 꼭 시청하세요. 사용된 기술: CSS, HTML, jQuery, PHP.
31. 슬라이드쇼 “어색함”기능적인 슬라이드 쇼. 슬라이드는 간단한 이미지, 캡션이 있는 이미지, 도구 설명이 있는 이미지, 비디오 형식일 수 있습니다. 키보드의 화살표, 슬라이드 번호 링크, 왼쪽/오른쪽 키를 사용하여 탐색할 수 있습니다. 슬라이드 쇼는 축소판이 있는 버전과 없는 버전으로 제공됩니다. 모든 옵션을 보려면 데모 페이지 상단에 있는 데모 #1 - 데모 #6 링크를 따르십시오.
부채를 연상시키는 매우 독창적인 이미지 슬라이더 디자인입니다. 애니메이션 슬라이드 전환. 이미지 간 탐색은 화살표를 사용하여 수행됩니다. 상단에 있는 재생/일시 정지 버튼을 사용하여 켜고 끌 수 있는 자동 변속 기능도 있습니다.
애니메이션 jQuery 슬라이더. 브라우저 창의 크기가 조정되면 배경 이미지의 크기가 자동으로 조정됩니다. 각 이미지에 대해 설명이 포함된 블록이 나타납니다.
34. jQuery와 CSS3를 사용한 “Flux Slider” 슬라이더새로운 jQuery 슬라이더. 슬라이드를 변경할 때 여러 가지 멋진 애니메이션 효과가 제공됩니다.
35. jQuery 플러그인 “jSwitch”애니메이션 jQuery 갤러리.
자동 슬라이드 변경 기능을 갖춘 간편한 jQuery 슬라이드쇼입니다.
37. 플러그인 "SlideDeck 1.2.2"의 새 버전전문 콘텐츠 슬라이더. 자동 슬라이드 변경 옵션과 마우스 휠을 사용하여 슬라이드 사이를 이동하는 옵션이 있습니다.
38. jQuery 슬라이더 “Sudo 슬라이더”jQuery를 사용한 경량 이미지 슬라이더. 다양한 구현 옵션이 있습니다: 이미지의 수평 및 수직 변경, 슬라이드 번호에 대한 링크 유무, 이미지 캡션 유무, 다양한 이미지 변경 효과. 자동 슬라이드 전환 기능이 있습니다. 모든 구현 예제에 대한 링크는 데모 페이지에서 찾을 수 있습니다.
39. jQuery CSS3 슬라이드쇼섬네일이 포함된 슬라이드쇼는 자동 슬라이드 변경 모드를 지원합니다.
40. jQuery 슬라이더 “플럭스 슬라이더”다양한 이미지 변경 효과가 있는 슬라이더입니다.
41. 간단한 jQuery 슬라이더jQuery를 사용한 세련된 이미지 슬라이더.
이 기사는 웹 페이지용 이미지 스크롤 슬라이더를 만드는 방법에 대해 설명하기 위해 작성되었다는 점부터 시작하겠습니다. 이 기사는 본질적으로 교육적이지 않으며 고려 대상이 어떻게 구현될 수 있는지 보여주는 예일 뿐입니다. 이 기사에 제공된 코드를 유사한 개발을 위한 템플릿으로 사용할 수 있습니다. 내가 작성한 내용의 본질을 충분히 자세하고 접근 가능한 방식으로 독자에게 전달할 수 있기를 바랍니다.
그리고 지금은 얼마 전까지만 해도 한 사이트에 슬라이더를 설치해야 했지만 인터넷에서 기성 스크립트를 검색한 후에 유용한 것을 찾지 못했습니다. 일부는 필요에 따라 작동하지 않았고 다른 일부는 콘솔에 오류 없이 전혀 시작되지 않았습니다. 슬라이더에 jQuery 플러그인을 사용하는 것은 나에게는 너무 흥미롭지 않은 것 같았습니다. 왜냐하면... 이렇게 하면 문제가 해결되지만 이 메커니즘이 어떻게 작동하는지 전혀 이해할 수 없으며 하나의 슬라이더에만 플러그인을 사용하는 것은 그리 최적이 아닙니다. 또한 비뚤어진 스크립트를 이해하고 싶지 않았기 때문에 슬라이더에 대한 스크립트를 직접 작성하기로 결정했으며 필요에 따라 표시했습니다.
먼저 슬라이더 자체의 논리를 결정한 다음 구현을 진행해야 합니다. 이 단계에서는 이 메커니즘이 없으면 우리가 사용하는 방식으로 정확하게 작동하는 코드를 작성할 수 없기 때문에 이 메커니즘의 작동을 명확하게 이해하는 것이 매우 중요합니다. 원하다.
우리의 주요 객체는 뷰포트입니다. 즉, 사진이 어떻게 회전하는지 볼 수 있는 블록입니다. 그 안에는 슬라이드 래퍼가 있습니다. 이것은 한 줄에 정렬된 모든 이미지를 포함하는 블록이 될 것입니다. 뷰포트 자체 내부의 위치입니다. 
다음으로, 뷰포트 내부 측면, 수직 중앙에는 뒤로 및 앞으로 버튼이 있습니다. 클릭하면 뷰포트를 기준으로 슬라이드 래퍼의 위치도 변경되어 사진을 스크롤하는 효과가 발생합니다. 마지막으로 마지막 개체는 뷰포트 하단에 있는 탐색 버튼입니다. 
버튼을 클릭하면 이 버튼의 일련 번호를 확인하고 다시 슬라이드래퍼를 이동하여 필요한 슬라이드로 이동합니다. 이동은 CSS 변환 속성을 변경하여 이루어지며 그 값은 다음과 같습니다. 지속적으로 계산됨).
위에서 언급한 내용 이후에 이 모든 것이 어떻게 작동하는지에 대한 논리가 명확해야 한다고 생각합니다. 하지만 여전히 어딘가에서 오해가 발생하면 아래 코드에서 모든 것이 더 명확해질 것이므로 약간의 인내심이 필요합니다.
이제 글을 써보자! 우선, 인덱스 파일을 열고 거기에 필요한 마크업을 작성해 보겠습니다.
보시다시피, 복잡한 것은 없습니다. 슬라이더용 블록은 슬라이더가 배치될 블록 역할을 하며, 그 내부에는 슬라이드래퍼가 있는 뷰포트 자체가 있으며, 여기에는 중첩된 목록도 있습니다. li는 슬라이드이고 img는 슬라이드 안에 있는 그림입니다. 모든 사진의 크기가 동일하거나 최소한 비율이 같아야 한다는 사실에 주의하십시오. 그렇지 않으면 슬라이더가 비뚤어져 보일 것입니다. 크기는 이미지의 비율에 직접적으로 의존합니다.
이제 우리는 이 모든 것을 스타일화해야 합니다. 일반적으로 스타일은 특별히 언급되지 않지만 앞으로도 오해가 없도록 이 점에 주의를 기울이기로 결정했습니다.
본문( 여백: 0; 패딩: 0; ) #block-for-slider( 너비: 800px; 여백: 0 자동; margin-top: 100px; ) #viewport( 너비: 100%; 디스플레이: 테이블; 위치: 상대; 오버플로: 숨김; -webkit-user-select: 없음; -o-user-select: 없음; 너비: 100% * 4; : 1s; -전환 타이밍 기능: 용이성 출력; -o-전환 타이밍 기능: 용이성 출력: 용이성 출력 ) #slidewrapper ul, #slidewrapper li ( 여백 : 0; 패딩: 0; ) #slidewrapper li ( 너비: calc(100%/4); 목록 스타일: 없음; 디스플레이: 인라인; 부동: 왼쪽; ) .slide-img ( 너비: 100%; )
block-for-slider부터 시작하겠습니다. 이것은 다시 페이지의 블록으로 슬라이더에 할당할 것입니다. 높이는 너비와 이미지 비율에 따라 달라집니다. 뷰포트가 슬라이더 블록의 전체 너비를 차지하면 슬라이드 자체의 너비가 동일하므로 슬라이드 내부의 이미지는 너비에 따라 높이가 변경됩니다(비율은 유지됨). 이 요소를 내 페이지 중앙에 수평으로 배치하고 위에서부터 100px 들여쓰기하여 예제에서 위치를 더 편리하게 만들었습니다.
이미 언급한 바와 같이 뷰포트 요소는 슬라이더 블록의 전체 너비를 차지하며, Overflow:hidden 속성을 가지고 있어 뷰포트 너머로 확장되는 이미지 피드를 숨길 수 있습니다. 
다음 CSS 속성은 user-select:none 입니다. 이를 통해 버튼을 여러 번 클릭할 때 개별 슬라이더 요소의 파란색 강조 표시를 제거할 수 있습니다.
슬라이드래퍼로 넘어가면 왜 절대 위치가 아닌 상대적 위치입니까? 모든 것이 매우 간단합니다. 왜냐하면... 두 번째 옵션을 선택하면 뷰포트 오버플로:숨김 속성을 사용하면 아무 것도 나타나지 않습니다. 뷰포트 자체는 슬라이드래퍼의 높이에 맞춰 조정되지 않으므로 height:0 이 됩니다. 너비가 왜 중요하며 너비를 설정하는 이유는 무엇입니까? 요점은 슬라이드의 너비가 뷰포트의 100%와 같고 슬라이드를 정렬하려면 슬라이드가 서 있을 위치가 필요하므로 슬라이드 래퍼의 너비는 뷰포트 너비의 100%와 같아야 한다는 것입니다. 슬라이드 수를 곱합니다(제 경우에는 4). 전환 및 전환 타이밍 기능의 경우 여기서 1s는 슬라이드 래퍼의 위치 변경이 1초 이내에 발생한다는 의미이며 이를 관찰할 것이며,이지 인 아웃은 처음에는 천천히 시작되는 애니메이션 유형입니다. 그런 다음 중간까지 속도를 높인 다음 다시 속도를 줄입니다. 여기에서 재량에 따라 값을 설정할 수 있습니다.
다음 속성 블록은 슬라이드래퍼와 해당 하위 항목의 패딩이 0이 되도록 설정합니다. 여기에는 주석이 필요하지 않습니다.
다음으로 슬라이드의 스타일을 지정합니다. 슬라이드의 너비는 뷰포트의 너비와 같아야 하지만... 너비가 뷰포트 너비에 슬라이드 수를 곱한 것과 동일한 슬라이드랩퍼에 있는 경우 뷰포트 너비를 다시 얻으려면 슬라이드랩퍼 너비의 100%를 슬라이드 수로 나누어야 합니다(제 경우에는 다시 4)까지. 그런 다음 display:inline을 사용하여 이를 인라인 요소로 바꾸고 float:left 속성을 추가하여 부동 소수점을 왼쪽으로 설정합니다. list-style:none 정보 li 에서 기본 마커를 제거하는 데 사용한다고 말할 수 있습니다. 대부분의 경우 이는 일종의 표준입니다.
Slide-img를 사용하면 모든 것이 간단합니다. 이미지는 슬라이드의 전체 너비를 차지하고, 슬라이드는 높이에 맞게 조정되고, Slidewrapper는 슬라이드 높이에 맞게 조정되고, 뷰포트 높이는 차례로 높이 값을 사용합니다. Slidewrapper 이므로 슬라이더의 높이는 이미지의 비율과 슬라이더에 대해 제공된 블록의 크기에 따라 달라집니다. 위에서 이미 설명한 내용입니다.
이 시점에서 스타일을 파악했다고 생각합니다. 일단 버튼이 없는 간단한 슬라이드 쇼를 만들고 제대로 작동하는지 확인한 후 추가하고 스타일을 지정하겠습니다.
슬라이더 코드가 포함된 js 파일을 엽니다. jQuery를 연결하는 것을 잊지 마세요. 우리는 이 프레임워크를 사용하여 글을 쓸 것입니다. 그런데 이 글을 쓰는 시점에는 jQuery 버전 3.1.0을 사용하고 있습니다. 스크립트 자체가 포함된 파일은 body 태그 맨 끝에 포함되어야 합니다. 먼저 초기화해야 하는 DOM 요소를 다루겠습니다.
지금은 몇 가지 변수를 선언해야 합니다. 하나는 뷰포트의 특정 시점에 표시되는 슬라이드 번호를 저장하고, 저는 이를 SlideNow 라고 불렀고, 두 번째 변수는 동일한 슬라이드의 번호를 저장합니다. 이것은 슬라이드카운트 입니다.
var SlideNow = 1; var SlideCount = $("#slidewrapper").children().length);
SlideNow 변수는 초기값 1로 설정되어야 합니다. 페이지가 로드되면 마크업에 따라 뷰포트에 첫 번째 슬라이드가 표시됩니다.
SlideCount에서 우리는 슬라이드래퍼의 하위 요소 수를 배치할 것이며 여기서는 모든 것이 논리적입니다.
다음으로 슬라이드를 오른쪽에서 왼쪽으로 전환하는 기능을 만들어야 합니다. 이를 선언해 보겠습니다.
함수 nextSlide() ( )
나중에 설명할 코드의 메인 블록에서 이를 호출할 것입니다. 하지만 지금은 함수가 수행해야 할 작업을 알려드리겠습니다.
function nextSlide() ( if (slideNow == SlideCount || -$("#viewport").width() * (slideNow); $("#slidewrapper").css(( "transform": "translate(" + translateWidth + "px, 0)", "-webkit- 변환": "translate(" +translateWidth + "px, 0)", "-ms-transform": "translate(" +translateWidth + "px, 0)", )); SlideNow++; ) )
먼저, 현재 피드의 마지막 슬라이드에 있는지 확인합니다. 이를 위해 $("#slidewrapper").children().length를 사용하여 모든 슬라이드의 번호를 가져와서 슬라이드 번호로 확인합니다. 동일한 경우 표시를 시작해야 함을 의미합니다. 1 슬라이드에서 피드를 다시 가져옵니다. 즉, 슬라이드래퍼의 CSS 변환 속성을 translate(0, 0) 으로 변경하여 첫 번째 슬라이드가 시야에 들어오도록 원래 위치로 이동한다는 의미입니다. 또한 잊지 마세요. 적절한 크로스 브라우저 표시를 위한 –webkit 및 –ms 정보(.css 속성 참조 참조) 그런 다음, 슬라이드 번호 1이 화면에 있음을 알리기 위해 SlideNow 변수의 값을 업데이트하는 것을 잊지 마십시오: SlideNow = 1;
동일한 조건에는 우리가 보는 슬라이드 수가 슬라이드 수 내에 있는지 확인하는 것이 포함되지만, 이것이 충족되지 않으면 다시 첫 번째 슬라이드로 돌아갑니다.
첫 번째 조건이 충족되지 않으면 현재 마지막 슬라이드나 존재하지 않는 슬라이드에 있지 않다는 의미입니다. 즉, 다음 슬라이드로 전환해야 함을 의미합니다. 슬라이드 래퍼를 왼쪽으로 이동하여 이를 수행합니다. 뷰포트 너비와 동일한 값만큼 이동은 친숙한 변환 속성을 통해 다시 발생하며 그 값은 "translate(" + TranslateWidth + "px, 0)" 과 같습니다. 여기서translateWidth는 우리가 이동하는 거리입니다. 슬라이드 래퍼가 이동되었습니다. 그런데 코드 시작 부분에 이 변수를 선언해 보겠습니다.
var 번역폭 = 0;
다음 슬라이드로 이동한 후, 우리의 SlideNow에게 다음 슬라이드가 표시된다고 알려 줍시다. SlideNow++;
이 시점에서 일부 독자는 다음과 같이 궁금해할 수 있습니다. 항상 슬라이드 너비를 확보하기 위해 $("#viewport").width()를 SlideWidth와 같은 일부 변수로 대체하지 않은 이유는 무엇입니까? 대답은 매우 간단합니다. 사이트가 적응형이라면 그에 따라 슬라이더에 할당된 블록도 적응형입니다. 이를 기반으로 페이지를 다시 로드하지 않고 창 너비의 크기를 조정할 때(예: 전화기를 켜는 경우) 이해할 수 있습니다. 측면) 뷰포트의 너비가 변경되고 이에 따라 한 슬라이드의 너비도 변경됩니다. 이 경우 슬라이드래퍼는 원래 너비 값으로 이동됩니다. 즉, 이미지가 뷰포트에 부분적으로 표시되거나 전혀 표시되지 않음을 의미합니다. 함수에 SlideWidth 대신 $("#viewport").width()를 작성하면 슬라이드를 전환할 때마다 뷰포트의 너비를 계산하도록 하여 화면 너비가 급격하게 변할 때 뷰포트의 너비가 우리에게 필요한 슬라이드.
그러나 함수를 작성했으므로 이제 특정 시간 간격 후에 함수를 호출해야 합니다. 간격을 변수에 저장하여 이를 변경하려면 코드에서 값 하나만 변경하면 됩니다.
var SlideInterval = 2000;
js 단위의 시간은 밀리초 단위로 표시됩니다.
이제 다음 구성을 작성해 보겠습니다.
$(document).ready(function () ( setInterval(nextSlide, SlideInterval); ));
여기에서는 모든 것이 이보다 더 간단할 수 없습니다. $(document).ready(function () ()) 구성을 통해 문서가 완전히 로드된 후에 다음 작업을 수행해야 한다고 말합니다. 다음으로 내장된 setInterval 함수를 사용하여 SlideInterval과 동일한 간격으로 nextSlide 함수를 호출하기만 하면 됩니다.
위에서 수행한 모든 단계를 수행한 후에는 슬라이더가 완벽하게 회전해야 하지만 문제가 발생하면 문제는 jQuery 버전에 있거나 파일의 잘못된 연결에 있을 수 있습니다. 코드 어딘가에서 오류가 발생했을 수도 있다는 점을 배제할 필요도 없으므로 모든 것을 다시 확인하라고 조언할 수 있습니다. 
그동안 커서를 가리키면 스크롤을 멈추는 기능을 슬라이더에 추가해 보겠습니다. 이렇게 하려면 기본 코드 블록($(document).ready( 내부)에 다음을 작성해야 합니다. 함수 () ()) 구조:
$("#viewport").hover(function())(clearInterval(switchInterval); ),function() ( switchInterval = setInterval(nextSlide, SlideInterval); ));
이 코드 분석을 시작하려면 switchInterval이 무엇인지 알아야 합니다. 첫째, 이것은 nextSlide 함수에 대한 주기적인 호출을 저장하는 변수입니다. 간단히 말하면 다음 코드 줄이 있습니다. setInterval(nextSlide, SlideInterval); , 다음과 같이 바뀌었습니다. switchInterval = setInterval(nextSlide, SlideInterval); . 이러한 조작 후에 우리의 주요 코드 블록은 다음과 같은 형식을 취했습니다.
$(document).ready(function () ( var switchInterval = setInterval(nextSlide, SlideInterval); $("#viewport").hover(function())(clearInterval(switchInterval); ),function() ( switchInterval = setInterval (nextSlide, SlideInterval);
여기서는 "호버 시"를 의미하는 hover 이벤트를 사용합니다. 이 이벤트를 사용하면 커서를 일부 개체(이 경우 뷰포트) 위로 가져가는 순간을 추적할 수 있습니다.
마우스를 올린 후 괄호 안에 표시한 간격(이것은 switchInterval 입니다)을 지운 다음 쉼표로 구분하여 커서를 뒤로 이동할 때 수행할 작업을 씁니다. 이 블록에서 다시 switchInterval을 주기적으로 할당합니다. nextSlide 함수를 호출합니다.
이제 테스트하면 슬라이더가 호버에 어떻게 반응하여 슬라이드 전환을 중지하는지 확인할 수 있습니다.
이제 슬라이더에 버튼을 추가할 차례입니다. 앞으로 및 뒤로 버튼부터 시작해 보겠습니다.
우선, 그것들을 표시해 봅시다:
처음에는 이 마크업이 이해하기 어려울 수 있습니다. 편의를 위해 prev-next-btns 클래스를 사용하여 이 두 버튼을 하나의 div에 래핑했다고 바로 말씀드리겠습니다. 이렇게 할 필요는 없습니다. 결과는 그렇지 않습니다. 이제 스타일을 추가하면 모든 것이 잘 될 것입니다.
#prev-btn, #next-btn ( 위치: 절대; 너비: 50px; 높이: 50px; 배경색: #fff; 테두리 반경: 50%; 상단: 계산(50% - 25px); ) #prev- btn:hover, #next-btn:hover ( 커서: 포인터; ) #prev-btn ( 왼쪽: 20px; ) #next-btn ( 오른쪽: 20px; )
먼저 position:absolute를 사용하여 버튼의 위치를 지정하여 뷰포트 내에서 버튼의 위치를 자유롭게 제어합니다. 그런 다음 버튼의 크기를 지정하고 border-radius를 사용하여 버튼이 원으로 변하도록 모서리를 둥글게 만듭니다. 색상은 흰색, 즉 #fff 이고 뷰포트 상단 가장자리로부터의 오프셋은 이 뷰포트 높이의 절반에서 버튼 자체 높이의 절반(제 경우에는 25px)을 뺀 값과 같습니다. 중앙에 수직으로 배치하십시오. 다음으로, 버튼 위로 마우스를 가져가면 커서가 포인터로 변경되도록 지정하고, 마지막으로 버튼이 가장자리에서 20px 떨어져야 우리에게 적합한 방식으로 볼 수 있도록 버튼에 개별적으로 알릴 것입니다. .
다시 말하지만, 원하는 방식으로 페이지 요소의 스타일을 지정할 수 있습니다. 저는 단지 제가 사용하기로 결정한 스타일의 예를 제시할 뿐입니다.
스타일을 지정한 후 슬라이더는 다음과 같아야 합니다. 
다음으로 js 파일로 돌아가서 버튼 작동을 설명합니다. 자, 함수를 하나 더 추가해 보겠습니다. 그러면 이전 슬라이드가 표시됩니다.
function prevSlide() ( if (slideNow == 1 || 변환": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); ( "transform": "translate(" +translateWidth + "px, 0)", "-webkit-transform": "translate(" +translateWidth + "px, 0)", "-ms-transform": "translate( " +translateWidth + "px, 0)", )); SlideNow--; ) )
prevSlide라고 하며 prev-btn을 클릭할 때만 호출됩니다. 먼저 우리는 첫 번째 슬라이드에 있는지 여부를 확인합니다. 여기서는 또한 SlideNow가 슬라이드의 실제 범위를 벗어났는지 확인하고, 조건 중 하나라도 참이면 마지막 슬라이드로 이동하여 슬라이드 래퍼를 이동합니다. 우리에게 필요한 가치에. (한 슬라이드의 너비) * (슬라이드 수 - 1) 공식을 사용하여 이 값을 계산합니다. 이 모든 것을 빼기 기호로 사용합니다. 이를 왼쪽으로 이동하면 이제 뷰포트에 마지막 슬라이드가 표시됩니다. 이 블록의 끝에서 이제 마지막 슬라이드가 뷰에 있음을 SlideNow 변수에 알려야 합니다.
첫 번째 슬라이드가 아닌 경우 뒤로 1로 이동해야 합니다. 이를 위해 Slidewrapper 의 변환 속성을 다시 변경합니다. 공식은 다음과 같습니다: (한 슬라이드의 너비) * (현재 슬라이드의 번호 - 2), 이 모든 것을 마이너스 기호로 사용합니다. 그런데 왜 -1이 아닌 -2가 슬라이드 1개만 뒤로 이동해야 합니까? 사실은 예를 들어 두 번째 슬라이드에 있는 경우 슬라이드래퍼의 변환:번역(x,0) 속성의 x 변수가 이미 한 슬라이드의 너비와 동일하다는 것입니다. 현재 슬라이드 번호에서 1을 빼려면 슬라이드랩퍼가 이미 이동된 하나를 다시 얻으므로 동일한 뷰포트 너비를 0으로 이동해야 합니다. 즉, SlideNow - 2를 의미합니다.
이제 기본 코드 블록에 다음 줄을 추가하기만 하면 됩니다.
$("#next-btn").click(function() ( nextSlide(); ));
$("#prev-btn").click(function() ( prevSlide(); ));
여기서는 버튼이 클릭되었는지 여부를 간단히 추적하고 이 경우 필요한 기능을 호출하며 모든 것이 간단하고 논리적입니다.
이제 슬라이드 탐색 버튼을 추가하고 다시 마크업으로 돌아가겠습니다.
보시다시피, 중첩된 목록이 뷰포트 내부에 나타납니다. 식별자 nav-btns 를 지정하겠습니다. 그 안에는 탐색 버튼이 있으며, 이 목록에 Slide-nav-btn 클래스를 할당하겠습니다. 그러나 다음으로 마무리할 수 있습니다. 마크업, 스타일로 넘어가겠습니다.
버튼이 있는 nav-btns 블록에 position:absolute 속성을 지정하여 뷰포트 높이가 늘어나지 않도록 합니다. Slidewrapper에는 position:relative 속성이 있습니다. text-align:center를 사용하여 뷰포트를 기준으로 버튼을 수평으로 중앙에 배치하기 위해 너비를 100%로 설정한 다음 하단 속성을 사용하여 블록이 멀리 떨어져 있어야 함을 알립니다. 하단 가장자리에서 20px입니다.
버튼을 사용하여 슬라이드와 동일한 작업을 수행하지만 이제는 표시:인라인 블록을 제공합니다. display:inline을 사용하면 너비와 높이에 반응하지 않습니다. 절대 위치 블록에 있습니다. 색상을 흰색으로 만들고 이미 알고 있는 테두리 반경을 사용하여 원 모양을 만들어 보겠습니다. 그 위로 마우스를 가져가면 일반적인 디스플레이에 대한 커서 모양이 변경됩니다.
이제 jQuery 부분을 살펴보겠습니다.
먼저 클릭한 버튼의 인덱스를 저장할 navBtnId 변수를 선언해 보겠습니다.
var navBtnId = 0;
$(".slide-nav-btn").click(function() ( navBtnId = $(this).index(); if (navBtnId + 1 != SlideNow) (translateWidth = -$("#viewport"). width() * (navBtnId); $("#slidewrapper").css(( "transform": "translate(" +translateWidth + "px, 0)", "-webkit-transform": "translate(" +translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); SlideNow = navBtnId + 1 ));
여기에서 슬라이드 nav-btn을 클릭하면 먼저 클릭한 버튼의 인덱스, 즉 일련 번호를 navBtnId 변수에 할당하는 함수를 호출합니다. 카운트다운이 0부터 시작하기 때문입니다. 두 번째 버튼을 클릭하면 navBtnId 값 1에 기록됩니다. 다음으로, 카운트다운이 0이 아닌 1부터 시작된 것처럼 숫자를 얻기 위해 버튼의 일련 번호에 1을 추가하는 확인을 수행합니다. 이 숫자를 현재 슬라이드의 숫자와 비교하여 일치하면 원하는 슬라이드가 이미 뷰포트에 있으므로 어떤 작업도 수행하지 않습니다.
필요한 슬라이드가 뷰포트 시야에 없으면 슬라이드 래퍼를 왼쪽으로 이동해야 하는 거리를 계산한 다음 변환할 CSS 변환 속성 값을 변경합니다(동일한 거리(픽셀 단위, 0) ). 우리는 이미 이 작업을 두 번 이상 수행했으므로 질문할 필요가 없습니다. 마지막으로 현재 슬라이드의 값을 다시 SlideNow 변수에 저장합니다. 이 값은 클릭한 버튼의 인덱스에 1을 추가하여 계산할 수 있습니다.
그게 전부입니다. 실제로 뭔가 명확하지 않은 경우 자료에 작성된 모든 코드가 제공되는 jsfiddle에 대한 링크를 남겨 두겠습니다.
관심을 가져주셔서 감사합니다!
태그: 태그 추가
얼마 전부터 jQuery를 배우기 시작했습니다. 이것이 JavaScript로 스크립트를 개발하고 생성하는 데 가장 널리 사용되는 라이브러리의 이름이라는 것은 모두가 알고 있다고 생각합니다. 그것의 도움으로 훌륭하고 대화형 웹사이트 요소를 만드는 것은 매우 쉽습니다.
이 기사에서는 jQuery를 사용하여 간단한 범용 슬라이더를 만드는 방법을 설명하고 싶습니다. 실제로 인터넷에는 기성 슬라이더가 매우 많이 있으며 때로는 매우 유혹적이고 기능적이지만 처음부터 만들 것입니다.
그렇다면 jQuery 슬라이더(저는 HWSlider라고 불렀습니다)의 어떤 기능을 주목할 수 있습니까?
- 사용 용이성과 디자인 - 부가 기능 없이 간단한 스크립트를 만들고 싶었기 때문에 CSS3 애니메이션을 사용하지 않았고 코드가 매우 다양하고 이해하기 쉬웠습니다.
- 슬라이드에 이미지와 HTML 코드를 모두 삽입하는 기능.
- 슬라이드를 순서대로(앞으로 - 뒤로) 스크롤하고 각 슬라이드를 선택하는 기능(1,2,3,4...)
- 자동으로 생성된 링크(이전 - 다음, 슬라이드 번호 포함) 필요한 수의 div를 삽입하기만 하면 나머지는 모두 자동으로 계산됩니다. 글쎄, 슬라이드 수는 무제한이라는 것을 알 수 있습니다.
스크립트는 IE, Opera, Firefox, Safari, Chrome(슬라이더가 CSS3를 사용하지 않기 때문에) 등 모든 최신 브라우저와 호환됩니다.
HTML 마크업부터 시작해 보겠습니다. HTML 페이지나 템플릿을 필요한 위치에 삽입해야 합니다.
슬라이드 1의 내용은 다음과 같습니다. 슬라이드 2의 내용은 다음과 같습니다. 슬라이드 3의 내용은 다음과 같습니다.
여기에서는 모든 것이 간단합니다. 보시다시피 새 div를 만들어 원하는 만큼 슬라이드를 삽입할 수 있습니다. 그 안에 그림이나 텍스트 블록과 같은 HTML 코드를 삽입할 수 있습니다. 모든 js 스크립트와 함께 jQuery 라이브러리 자체를 포함하는 것을 잊지 마세요. 방법을 모른다면 예를 살펴보세요.
#slider-wrap( /* 슬라이더 및 버튼에 대한 래퍼 */ width:660px; ) #slider( /* 슬라이더에 대한 래퍼 */ width:640px; height:360px; Overflow: Hidden; border:#eee solid 10px; position:relative; ) .slide( /* 슬라이드 */ width:100%; height:100%; ) .sli-links( /* 슬라이드 변경 버튼 */ margin-top:10px; text-align:center;) .sli-links . control-slide( 여백:2px; 디스플레이:inline-block; 너비:16px; 높이:16px; 오버플로:hidden; text-indent:-9999px; 배경:url(radioBg.png) 가운데 하단 no- 반복;) .sli -links .control-slide:hover( 커서: 포인터; 배경 위치: 중앙 중앙;) .sli-links .control-slide.active( 배경 위치: 중앙 상단;) #prewbutton, #nextbutton ( /* "다음" 및 "이전" 링크 */ 디스플레이:블록; 너비:15px; 높이:100%; 위치:절대; 상단:0; 오버플로: 숨김; 텍스트 들여쓰기:-999px; 배경:url(arrowBg .png) 왼쪽 중앙 반복 없음; 불투명도: 없음 !important;) #prewbutton(왼쪽:10px;) #nextbutton( 오른쪽:10px; 배경:url(arrowBg.png) 오른쪽 중앙 반복 없음; ) #prew버튼:hover, #next버튼:hover(불투명도:1;)
좀 더 자세히 살펴보겠습니다. 먼저 메인 블록 식별자 "slider-wrap"에 원하는 너비를 지정합니다. 다른 모든 블록이 여기에 삽입되므로 높이를 지정할 필요가 없습니다. 내부 내용에 따라 달라집니다. 그런 다음 슬라이드가 위치할 컨테이너의 크기를 설정해야 합니다. #슬라이더 입니다. 예를 들어 10픽셀의 테두리는 물론 너비와 높이도 지정해 보겠습니다. 여기서 너비는 640px로, 오른쪽과 왼쪽에 10px 테두리를 추가하므로 부모 너비보다 작습니다. 슬라이드 자체(.slide)의 너비도 이 div의 너비에 따라 달라집니다.
마지막으로, 내부 슬라이드는 절대 위치 지정이므로 슬라이드 컨테이너에 대해 position:relative를 설정해야 합니다. 슬라이드 자체의 경우 너비와 높이만 CSS에서 설정됩니다. 나머지 속성은 jQuery 스크립트에서 설정됩니다.
Selector.sli-links는 필요한 슬라이드로 이동하기 위한 버튼이 포함된 블록입니다. 이러한 버튼은 숫자 유형의 간단한 요소로, 해당 parent.sli 링크와 함께 필요한 수량만큼 자동으로 삽입됩니다. 버튼의 경우 아름다운 모양을 설정합니다. 즉, 각 버튼을 정사각형으로 만들고 모두 중앙에 정렬합니다. 또한 Overflow: Hidden 및 text-indent:-9999px 덕분에 텍스트를 제거하고 배경 아이콘만 남깁니다. , 이 커서 요소에 마우스를 가져가면 변경됩니다. 편의상 스프라이트를 사용하여 이미지 수를 줄였습니다.
다음으로 활성 버튼을 디자인합니다. 배경의 위치만 변경하면 됩니다. 그런 다음 다음 및 이전 슬라이드로 이동하도록 링크를 다시 디자인하겠습니다. 버튼처럼 원하는 디자인을 지정할 수 있습니다. 이러한 링크는 #slider 내부에 자동으로 삽입됩니다. 하지만 눈에 띄게 만들기 위해 절대 위치와 최상위 레이어(z-index:3)를 지정하여 슬라이드 위에 표시되도록 했습니다. CSS를 사용하면 모든 것이 명확하고 간단하다고 생각합니다. 거의 모든 속성을 변경하여 필요한 방식으로 슬라이더를 디자인할 수 있습니다.
이제 시나리오 자체를 살펴보겠습니다.
Var hwSlideSpeed = 700; var hwTimeOut = 3000; var hwNeedLinks = true; $(document).ready(function(e) ( $(".slide").css(("position" : "absolute", "top":"0", "left": "0")).hide ().eq(0).show(); var SlideNum = 0; var SlideCount = $("#slider .slide").size() var animSlide = function(arrow)(clearTimeout(slideTime); $ (" .slide").eq(slideNum).fadeOut(hwSlideSpeed); if(arrow == "next")( if(slideNum == (slideCount-1))(slideNum=0;) else(slideNum++) ) else if( arrow == "prew") ( if(slideNum == 0)(slideNum=slideCount-1;) else(slideNum-=1) ) else( SlideNum = arrow; ) $(".slide").eq( SlideNum) .fadeIn(hwSlideSpeed, rotator); $(".control-slide.active").removeClass("active"); $(".control-slide").eq(slideNum).addClass("active") ; if(hwNeedLinks)( var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton").click(function())( animSlide("next"); )) $( " #prewbutton").click(function())( animSlide("prew"); )) ) var $adderSpan = ""; $(".slide").each(function(index) ( $adderSpan += "" + 인덱스 + ""; )); $("" + $adderSpan +"").appendTo("#slider-wrap");
$(".control-slide:first").addClass("활성");
$(".control-slide").click(function())( var goToNum = parsFloat($(this).text()); animSlide(goToNum); ));
jQuery 슬라이더의 주요 논리는 animSlide 함수입니다. 하나의 매개변수를 사용합니다. 문자열 "next" 또는 "prew"를 전달하면 조건문이 작동하고 각각 다음 또는 이전 슬라이드가 표시됩니다. 숫자를 값으로 보내면 이 숫자가 활성 슬라이드가 되어 표시됩니다.
따라서 이 함수는 현재 div를 숨기고 새 div를 계산하여 표시합니다.
활성 슬라이드를 표시하는 .fadeIn() 메서드에는 두 번째 인수가 제공됩니다. 이것이 소위 콜백 함수이다. 슬라이드가 완전히 나타나면 실행됩니다. 이 경우 이는 슬라이드의 자동 스크롤을 보장하기 위해 수행됩니다. 아래에 정의된 rotator 함수는 animSlide 함수를 다시 호출하여 원하는 시간 간격으로 다음 슬라이드로 이동합니다. 지속적인 스크롤을 보장하는 클로저를 얻게 됩니다.
모든 것이 잘 작동하지만 사용자가 커서를 슬라이더로 이동하거나 버튼을 누르면 자동화를 중지해야 합니다. 이를 위해 일시정지 변수가 생성됩니다. 값이 양수(true)이면 자동 전환이 발생하지 않습니다. .hover() 메소드를 사용하여 다음을 지정합니다. 실행 중인 경우 타이머를 지우고(clearTimeout(slideTime)), 일시정지 = true로 설정합니다. 그리고 커서를 이동한 후 일시 정지를 해제하고 rotator() 클로저를 실행합니다.
또한 페이지에 새 요소를 만들고 올바른 위치에 배치해야 합니다. 각 슬라이드(클래스 .slide가 있는 div)에 대해 Each() 루프를 사용하여 내부에 숫자(슬라이드 번호)가 있는 범위 요소를 생성합니다. 이 숫자는 애니메이션 기능에서 이 숫자가 있는 슬라이드로 이동하는데 사용됩니다. 필요한 클래스를 사용하여 div의 모든 항목을 래핑하면 결국 다음과 같은 마크업을 얻게 됩니다.
0 1 2 3
HTML 코드가 아닌 스크립트 내부에 마크업을 생성하는 이유는 무엇일까요? 예를 들어, 사용자가 스크립트를 비활성화한 경우 작동하지 않는 요소는 표시되지 않으며 이로 인해 혼란을 겪지 않습니다. 게다가 코드도 단순화되어 SEO에 좋습니다.
결과적으로 슬라이더 레이아웃은 다음과 같습니다(이미지를 슬라이드로 사용하고 그 중 5개를 설치했습니다).
0
1
2
3
아래에서는 데모 페이지에서 jQuery 슬라이더가 어떻게 작동하는지 확인하고 필요한 모든 소스를 다운로드할 수 있습니다.
마지막으로 이 슬라이더와 Drupal의 통합에 대한 몇 가지 사항입니다. 이 코드를 page.tpl.php와 같은 템플릿 파일에 추가하고 스크립트를 별도의 js 파일로 테마에 첨부할 수 있습니다. Drupal의 Jquery는 기본적으로 활성화되어 있지만 호환 모드()에서 실행됩니다. 개선에는 두 가지 옵션이 있습니다. 또는 모든 js 코드를 래핑합니다.
(function ($) ( // 모든 코드... ))(jQuery);
또는 스크립트 전체의 $ 기호를 jQuery로 바꾸세요. 이와 같이:
JQuery(문서).ready(function(e) ( jQuery(".slide").css(("position" : "absolute", "top":"0", "left": "0")).hide ().eq(0).show(); var SlideNum = 0; var SlideCount = jQuery("#slider .slide").size(); var animSlide = function(arrow)( // 등.
이 예에서는 이미 첫 번째 방법을 구현했습니다.
읽어주셔서 감사합니다! 댓글을 남겨주세요. 다시 오세요. RSS를 구독하여 블로그 업데이트를 먼저 받아볼 수도 있습니다!
추가: 그게 전부는 아닙니다. 읽다. 거기서 우리는 이 스크립트에 새로운 기능을 추가할 것입니다.
