1. 플래시 캐 러셀
설명에 관계없이 구현은 비교적 간단하고 효과가 더 좋습니다.
2. 슬라이딩 캐 러셀
다음 HTML 코드는 예입니다 (왼쪽 스 와이프)
<div style = "오버플로 : 숨겨진; 너비 : 266px;"> <ul> <li> <li> <li> </li> <li> </li> <li> </li> </ul> </div.
플러그인 소스 코드 : 왼쪽 및 업 회전 실현, 수동 스위칭도 왼쪽 및 UP 전환 (주요 소스 코드의 수동 스위칭)
var all = $ panel.find ( '> li'), rempall = new array (); remall [0] = all.eq (0); // 대상 노드 앞에있는 모든 노드를 remall에 저장하고 애니메이션이 끝나면이 노드는 컨테이너 뒷면에 (var i = 1; i <len; i ++) {evs (i). '없음'}); rempall [i] = all.eq (i);} ... $ panel.animate.animate ({ 'marginleft': -options.width+'px'}, options.duration, function () {for (var i = 0; i <remall.length; i ++) {$ panel.append ($ [i]). 마지막} $ panel.css에 노드를 표시합니다 ({marginleft : 0});})슬라이딩 캐 러셀을 구현하는 두 가지 주요 방법이 있습니다
1) 부모 요소 마진 왼쪽을 전환하고 부모 컨테이너 끝에 첫 번째 자식 요소를 지속적으로 추가하십시오.
간단한 구현
var $ pante = $ ( 'example'); var scrolltimer = setInterval (function () {scrollNews ($ panel);}, 3000); 함수 $ scrollNews () {$ panel.animate ({ 'marginleft': '-266px'}, 500, function () {marginlefts : 0 }). find ( '> li : first'). Appendto ($ panel)};이 접근법의 한 가지 문제는 이전 IES에 호환성 문제가있을 수 있다는 것입니다.
2) 축적 방법에서 부모 요소 마진 왼쪽 설정
그러나 마진 왼쪽이 최소값으로 설정되면 (마지막 요소로 슬라이드) 첫 번째 자식 요소의 위치를 마지막 자식 요소의 뒷면으로 설정하십시오. 마지막 요소가 첫 번째 요소로 스크롤되면 부모 요소 마진 왼쪽이 0으로 설정되고 첫 번째 자식 요소의 위치가 반환됩니다. 간단한 코드 예제를 제시하십시오
var $ panel = $ ( '. example'), index = 0; var scrolltimer = setInterval (function () {scrollNews ($ panel);}, 3000); function scrollnews () {if (++ index> = 2) {$ panel.css ({ 'paddingleft': 266+'px'}) $ panpin.find ( ' / first'). '위치': '절대', '왼쪽': 266*index + 'px'}); } $ PANITE.ANIMAME ({ 'marginleft': -266*index+'px'}, 500, function () {if (++ index> 3) {$ panel.css ({marginleft : 0});} if (index> = 3) {index = 0; $ panel.css ({marginleft : 0, '); $ pante.find ( '> li : first'). css ({ 'position': 'static', 'left': 'auto'})};보다 복잡한 스크롤 플러그인은 수평 및 수직 스크롤 (4 방향)을 지원해야하며 수동으로 초점을 전환 할 수 있으며 위아래로 올라갈 수 있습니다. 내가 쓴 전체 플러그인 소스 코드를 첨부하십시오
플러그인 소스 코드 jquery.nfdscroll.js : 수평 및 수직 스크롤 (4 방향)을 지원합니다. 수동 스위칭은 스위칭 방향으로 스크롤됩니다.
/** * @Author 'Chen Hua' * @Date '2016-5-10' * @description 슬라이딩 캐러질 플러그인, 수평 및 수직 슬라이딩 캐 러셀 * * @example html : <div> <!-스크롤 내용 ul-> <ul> <li> <a href = "xxx"대상 = "_ blank"> href = "xxx"target = "_ blank"> </a> </li> <li> <a href = "xxx"target = "_ blank"> </a> </li> <li> <a href = "xxx"target = "_ blank"> </a> </li> <!- 초점 목록-<li> <li> <li> <li> <li> <li> <li> <li> </li> <li> </li> <li> </li> </li> </ol> <!-이전 및 다음, 옵션, 선택 사항-> <div> <a href = "javaScript : void (0);"> </a> <a href = "javaScript : void (0);"> </a> </div> js : $ (예제). startIndex : 0, 너비 : '266', 높이 : '216', 간격 : 2000, 선택 : '서클', prevtext : ', nextText :' ', deriction :'left ', callback : function (index, $ currentNode) {console.log (index)}}); * @param startIndex {number} 기본적으로 스크롤 요소 수에서 스크롤, 선택적 (0-n, 0은 첫 번째 것을 의미합니다. 기본값은 0) * @param width {number} 스크롤 요소 너비, 옵션이 0이면 너비가 설정되지 않음) * @param {숫자} 옵션이없는 경우 (0 평면도) {number} 간격 시간, 단위 밀리 초, 값이 음수 일 때, 자동 스크롤이 수행되지 않으면 * @param 시간 {number} 애니메이션 시간 동안 * @param selected {string} 작은 아이콘 (초점 목록) 현재 클래스 * @param deriction {string} 스크롤 스크롤, 왼쪽/오른쪽 및 하단 * @param callbach {function {function} 슬라이딩 애니메이션, 매개 변수 (색인, $ currentNode), 색인 : 회전식 후 표시된 노드의 인덱스; currentNode : 현재 회전 목마 * @param prevtext {string} 이후에 표시된 노드의 jQuery 객체는 이전 버튼의 텍스트는 "이전" * @param nextText {string} 다음 버튼의 텍스트입니다. 기본값은 "next" */ jquery.fn.extend ({nfdscroll : intustept : 0) {var defaultopt :, 0, // 스크롤 요소 너비, 선택 사항 (폭이 0이면 폭이 설정되어 있음) 높이 : 0, // 스크롤 요소 높이, 선택 사항 (높이가 높이가 설정되지 않음) 간격 : // 간격 시간 밀리 초 시간 시간 : 400, // 애니메이션 시간 선택 : // scall switching small wisting class extle : ', NextteT :' deriction : // Scroll Direction Callback : function (index, $ currentNode) {// 새 노드로 스크롤 직후 트리거, CurrentNode는 현재 표시된 노드}}}}}}}}, $ this = $ this.find ( '> ul'), // 스크롤 컨테이너 = $ panellist ( '> li') $ this.Find ( '> ol> li'), // 컨테이너 옵션 선택 = jQuery.extend (defaultopt, 옵션), animatefn, // scroll animation max = $ panel.find ( "> li"). 길이, // 초점을 스크롤 할 노드의 수, // 현재 표시된 노드 nfdscrolltimeer = 0, // // inanimate = 0, // // 애니메이션 과정에서 ISWAITE = FALLE, // 실행되지 않은 대기 애니메이션 대기 인덱스가 있습니까? if ($ panellist.length <= 1) {return} // 다음 위치는 다음 위치로 전환되었습니다 startscroll (inanimation) {iswaiting = toindex; animatefn (toindex), 옵션. ClearInterval (nfdscrolltimer) // 왼쪽에서 오른쪽으로 스크롤하십시오. }} if (toIndex! = focusIndex) {inanimation = true; if (toindex> = max) {// 마지막 그림이 계속 될 때 $ pante.css ({ 'paddingft': px '}). '절대', '왼쪽': 옵션*toindex + 'px'}; 'px'}); else} else {tind = toindex}; 'px'}, function () {focusIndex = tind; 0) {// $ PANIE.CSS ( 'Marginleft': -Options.width*FocusIndex + 'PX', 'PaddingLeft': 0}; inanimation = dowaitting ()}} // 기본 스크롤 메소드 (toindex == undecind) {toindex =}; FOCUSINDEX) {inanimation = true; 현재 마지막 회전 목마 var tind = 0이면 ({ 'paddingtop': 옵션. height + 'px'}) $ panellist.eq (0). }); else = 0; toIndex; if (toindex> = max) {$ panel.css ({margintop : 0, 'paddingtop': 0}); 'margintop. })}} 함수 bindevent () {// 바인딩 이벤트 $ this.on ( 'mouseover', function () {stepscroll ();}). on ( 'mouseout', function () {stattsCroll ();}). }). on ( 'click', '.nfdscroll-next', function () {stepscroll (); startsCroll (focusIndex + 1);})) $ selectList.on ( 'MouseOver', function () {stopscroll (); if (! $ (this). ' + 옵션)) {); function init () {$ this.css ({position : 'replative', Overflow : 'Hidden'}); $ panel.css ( 'report :'elative '}) focusindex = 옵션. Options.Deriction = 'right') {// 스타일 초기화. 실제로 플러그인에서 스타일을 만들어서는 안됩니다. 옵션;} var length = $ pant.find ( '> li'). css (csso) 옵션. 옵션. STOPSCROLL, 'StartSCroll': StartSCroll}});완전한 예
<! doctype html> <html> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> 회전식 테스트 예 </title> <style type = "text/css"> body, ul, ol {margin : 0; 패딩 : 0;} ul, ol {list-style : none;} .li1 {back 왼쪽 패딩 : 80px; 너비 : 186px; 높이 : 20px; 상단 : 186px; 왼쪽 : 0px; 배경 : #fff; 커서 : 포인터; } ol li {float : 왼쪽; 너비 : 10px; 높이 : 10px; 여백 : 5px; 배경 : #ff0; Border-Radius : 10px; } ol li.circle {배경 : #f00; . <li> <a href = "xxx"target = "_ blank"> </a> </li> </ul> <!-포커스 목록, 옵션-> <ol> <li> </li> <li> <li> <li> <li> </li> <li> </li> </ol> <!-이전 및 옵션-> <a div> href = "javaScript : void (0);"> </a> <a href = "javaScript : void (0);"> </a> </div> </div> <script type = "text/javaScript"src = "common/jquery.js"> </script> <script type/javascript " src = "common/jquery.nfdscroll.js"> </script> <script type = "text/javaScript"> $ ( '. example'). nfdscroll ({startIndex : 0, width : '266', 높이 : '216', interval : -1, // 2000, selected : 'previal' deriction : 'left', 콜백 : 함수 (색인, $ currentNode) {console.log (index)}}); </script> </body> </html>달성 된 효과
OL, nfdscroll-prev 등의 스타일을 수동으로 조정하십시오.
위 회전 목마의 간단한 구현 방법은 내가 공유하는 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.