1. Flash carousel
Regardless of the description, the implementation is relatively simple and the effect is better
2. Sliding carousel
The following html code is an example (swipe left)
<div style="overflow: hidden; width: 266px;"> <ul> <li></li> <li></li> <li></li> <li></li> </ul></div>
Plugin source code: realize left and up rotation, manual switching is also left and up switching (manual switching of key source code)
var all = $panel.find('>li'), prevAll = new Array();prevAll[0] = all.eq(0);//Save all nodes in front of the target node into prevAll, and after the animation ends, these nodes are added to the back of the container one by one in order for(var i = 1; i < len; i++){ all.eq(i).css({display: 'none'}); prevAll[i] = all.eq(i);}...$panel.animate({ 'marginLeft': -options.width + 'px' }, options.duration, function() { for(var i = 0; i < prevAll.length; i++){ $panel.append($(prevAll[i]).css({display: 'block'})); //Load all nodes before the current display node to the last} $panel.css({ marginLeft: 0 });})There are two main ways to implement sliding carousels
1) Switch the parent element margin-left and continuously add the first child element to the end of the parent container
Simple implementation
var $panel = $('example');var scrollTimer = setInterval(function() { scrollNews($panel); }, 3000);function $scrollNews(){ $panel.animate({ 'marginLeft': '-266px' }, 500, function() { $panel.css({ marginLeft: 0 }).find('>li:first').appendTo($panel); })}One problem with this approach is that there may be compatibility issues on old IEs.
2) Set the parent element margin-left in the accumulation method
However, when margin-left is set to the minimum (slide to the last element), set the position of the first child element to the back of the last child element. When the last element is scrolled to the first element, the parent element margin-left is set to 0 and the position of the first child element is returned. Give a simple code example
var $panel = $('.example'), index = 0;var scrollTimer = setInterval(function() { scrollNews($panel); }, 3000);function scrollNews(){ if(++index >= 2){ $panel.css({ 'paddingLeft': 266 + 'px' }) $panel.find('>li:first').css({ 'position': 'absolute', 'left': 266*index + 'px' }); } $panel.animate({ 'marginLeft': -266*index + 'px' }, 500, function() { if(++index > 3){ $panel.css({ marginLeft: 0 }); } if(index >= 3){ index = 0; $panel.css({ marginLeft: 0, 'paddingLeft': 0 }); $panel.find('>li:first').css({ 'position': 'static', 'left': 'auto' }); } })}More complex scrolling plug-ins need to support horizontal and vertical scrolling (four directions), can manually switch focus, and can turn up and down. Attach the complete plug-in source code I wrote
Plugin source code jquery.nfdscroll.js: supports horizontal and vertical scrolling (four directions). Manual switching will scroll with the switching direction.
/** * @author 'Chen Hua' * @date '2016-5-10' * @description Sliding carousel plug-in, supports horizontal and vertical sliding carousel* * @example html: <div> <!-- Scroll content ul --> <ul> <li><a href="xxx" target="_blank"></a></li> <li><a href="xxx" target="_blank"></a></li> <li><a href="xxx" target="_blank"></a></li> <li><a href="xxx" target="_blank"></a></li> </ul> <!-- Focus list, optional--> <ol> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> <!-- Previous and Next, optional--> <div> <a href="javascript:void(0);"></a> <a href="javascript:void(0);"></a> </div> </div> js: $('.example').nfdscroll({ startIndex:0, width:'266', height:'216', interval:2000, selected:'circle', prevText:'', nextText:'', deriction:'left', callback: function(index,$currentNode){ console.log(index) } }); * @param startIndex {Number} Scrolling from the number of scrolling elements by default, optional (0-n,0 means the first one, default is 0) * @param width {Number} Scrolling element width, optional (when the width is 0 means no width is set) * @param height {Number} Scrolling element height, optional (when the height is 0 means no height is set) * @param interval {Number} Interval time, unit milliseconds, when the value is negative, no automatic scrolling is performed* @param duration {Number} Animation duration* @param selected {String} Scroll toggle small icon (focus list) current class * @param deriction {String} Scrolling direction, supporting left/right and top/bottom * @param callback {Function} Callback triggered at the end of the sliding animation, parameters (index,$currentNode), index: The index of the node displayed after the carousel; currentNode: the jquery object of the node currently displayed after the carousel* @param prevText {String} The text of the previous button, default is "previous" * @param nextText {String} The text of the next button, default is "next" */ jQuery.fn.extend({nfdscroll: function(options) { var defaultOpt = { startIndex: 0, width: 0,//Scrolling element width, optional (when width is 0 means no width is set) height: 0,//Scrolling element height, optional (when height is 0 means no height is set) interval: 1000,//Interval time milliseconds duration: 400,//Animation duration selected:'selected',//Scroll switching small icon Current class prevText:'Previous', nextText:'Next', deriction:'left',//Scroll direction callback: function(index,$currentNode){//Trigger immediately after scrolling to a new node, currentNode is the jquery object of the currently displayed node} }, $this = this, $panel = $this.find('>ul'),//Scroll container $panelList = $panel.find('>li'), $selectList = $this.find('>ol>li'),//Select container options = jQuery.extend(defaultOpt,options), animateFn,//Scroll animation max = $panel.find(">li").length,//The number of nodes to be scrolled focusIndex = 0,//The index of the currently displayed node nfdscrollTimer = 0,//Timer inAnimation = false,//No other animations are responded to during the animation process isWaiting = false,//Is there any unexecuted waiting animation waiting Index;//The target index of the unexecuted waiting animation $('.nfdscroll-prev').text(options.prevText); $('.nfdscroll-next').text(options.nextText); //There is only one display, and no carousel is required if($panelList.length <= 1){ return; } //The current animation has not been completed but the focus has been switched to the next place. This function is used to perform processing to ensure that the currently displayed page is consistent with the target specified by the mouse function doWaiting(){ if(isWaiting){ startScroll(waittingIndex); } } //The carousel function startScroll(toIndex){ stopScroll(); if(inAnimation) { isWaiting = true; waitIndex = toIndex; return;//No other animations are responded to during the animation process}else{ isWaiting = false; } if(toIndex == undefined){ if(options.interval > 0){ nfdscrollTimer = setInterval(function(){ animateFn(toIndex); },options.interval); } //Skip to the specified index and time again}else{ animateFn(toIndex); if(options.interval > 0){ nfdscrollTimer = setInterval(function(){ animateFn(); },options.interval); } } } //Stop carousel function stopScroll(){ clearInterval(nfdscrollTimer); } //Scroll the animation left to right//Parameter toIndex: number, scroll to the specified index function leftRightAnimate(toIndex){ //Default scrolling method if(toIndex == undefined){ if(options.deriction == 'left'){ toIndex = focusIndex + 1; }else{ toIndex = focusIndex - 1; } } if(toIndex != focusIndex){ inAnimation = true; //Processing when it is currently the last carousel var tInd = 0; if(toIndex >= max){//When the last picture continues to scroll $panel.css({ 'paddingLeft': options.width + 'px' }) $panelList.eq(0).css({ 'position': 'absolute', 'left': options.width*toIndex + 'px' }); tInd = 0; }else if(toIndex < 0){//Only when the current picture is the first picture, then click on the previous picture // Processing when the current is the last carousel $panelList.eq(max - 1).css({ 'position': 'absolute', 'left': -options.width + 'px' }); tInd = max - 1; }else{ tInd = toIndex; } //First switch focus to $selectList.filter('.' + options.selected).removeClass(options.selected) .end().eq(tInd).addClass(options.selected); $panel.animate({ 'marginLeft': -options.width*toIndex + 'px' }, options.duration, function() { focusIndex = tInd; if(toIndex >= max){//$panel.css({ 'marginLeft': 0, 'paddingLeft': 0 }); $panelList.eq(0).css({ 'position': 'static', 'left': 'auto' }); }else if(toIndex < 0){//$panel.css({ 'marginLeft': -options.width*focusIndex + 'px', 'paddingLeft': 0 }); $panelList.eq(max - 1).css({ 'position': 'static', 'left': 'auto' }); } options.callback(focusIndex,$panelList.eq(focusIndex)); inAnimation = false; doWaitting(); }) } } //Scroll up and down animation function topBottomAnimate(toIndex){ //Default scrolling method if(toIndex == undefined){ if(options.deriction == 'top'){ toIndex = focusIndex + 1; }else{ toIndex = focusIndex - 1; } } if(toIndex != focusIndex){ inAnimation = true; //Processing when it is currently the last carousel var tInd = 0; if(toIndex >= max){ $panel.css({ 'paddingTop': options.height + 'px' }) $panelList.eq(0).css({ 'position': 'absolute', 'top': options.height*toIndex + 'px' }); tInd = 0; }else if(toIndex < 0){//Only when the current picture is the first picture, then click on the previous picture // Processing when the current is the last carousel $panelList.eq(max - 1).css({ 'position': 'absolute', 'top': -options.height + 'px' }); tInd = max - 1; }else{ tInd = toIndex; } //First switch focus to $selectList.filter('.' + options.selected).removeClass(options.selected) .end().eq(tInd).addClass(options.selected); $panel.animate({ 'marginTop': -options.height*toIndex + 'px' }, options.duration, function() { focusIndex = tInd; if(toIndex >= max){ $panel.css({ marginTop: 0, 'paddingTop': 0 }); $panelList.eq(0).css({ 'position': 'static', 'top': 'auto' }); }else if(toIndex < 0){// Only when the current image is the first image and then click on the previous image $panel.css({ 'marginTop': -options.height*focusIndex + 'px', 'paddingTop': 0 }); $panelList.eq(max - 1).css({ 'position': 'static', 'top': 'auto' }); } options.callback(focusIndex,$panelList.eq(focusIndex)); inAnimation = false; doWaitting(); }) } } function bindEvent(){ //Binding event $this.on('mouseover',function(){ stopScroll(); }).on('mouseout',function(){ startScroll(); }).on('click', '.nfdscroll-prev', function(){ stopScroll(); startScroll(focusIndex - 1); }).on('click', '.nfdscroll-next', function(){ stopScroll(); startScroll(focusIndex + 1); }) $selectList.on('mouseover',function(){ stopScroll(); if(!$(this).is('.' + options.selected)){ startScroll($(this).index()); } }); } function init(){ $this.css({ position: 'relative', overflow: 'hidden' }); $panel.css({ position: 'relative' }) focusIndex = options.startIndex;//Scroll from startIndex by default $selectList.eq(focusIndex).addClass(options.selected);//Switch focus first if(options.deriction == 'left' || options.deriction == 'right'){ //Initialize the style, in fact, the style should not be made in the plug-in. The user should ensure that there is no problem with the style var cssO = { width: options.width, 'float': 'left' } $this.css({ width: options.width });//Only the tube width is needed if(options.height){ cssO.height = options.height; } var length = $panel.find('>li').css(cssO).length; $panel.css({ width: options.width * length + 'px', 'marginLeft': -options.width*focusIndex + 'px' }); animateFn = leftRightAnimate; }else if(options.deriction == 'top' || options.deriction == 'bottom'){ var cssO = { height: options.height } $this.css({ height: options.height });//Just just need the pipe height if(options.width){ cssO.width = options.width; } var length = $panel.find('>li').css(cssO).length; $panel.css({ height: options.height * length + 'px', 'marginTop': -options.height*focusIndex + 'px' }); animateFn = topBottomAnimate; }else{ alert('Plugin only supports scrolling in four directions: left/right/top/bottom'); return; } startScroll(); } bindEvent(); init(); return { 'stopScroll': stopScroll, 'startScroll': startScroll }}});A complete example
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Carousel test example</title> <style type="text/css"> body,ul,ol{margin: 0; padding: 0;} ul,ol{list-style: none;} .li1{background-color: #000;} .li2{background-color: #333;} .li3{background-color: #666;} .li4{background-color: #999;} .example{margin-left: 300px;} .example ol { position: absolute; padding-left: 80px; width: 186px; height: 20px; top: 186px; left: 0px; background: #fff; cursor: pointer; } ol li{ float: left; width: 10px; height: 10px; margin: 5px; background: #ff0; border-radius: 10px; } ol li.circle{ background: #f00; } </style></head><body> <div> <!-- Scroll content ul --> <ul> <li><a href="xxx" target="_blank"></a></li> <li><a href="xxx" target="_blank"></a></li> <li><a href="xxx" target="_blank"></a></li> <li><a href="xxx" target="_blank"></a></li> </ul> <!-- Focus list, optional --> <ol> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> <!-- Previous and next, optional --> <div> <a href="javascript:void(0);"></a> <a href="javascript:void(0);"></a> </div></div> <script type="text/javascript" src="common/jquery.js"></script> <script type="text/javascript" src="common/jquery.nfdscroll.js"></script> <script type="text/javascript"> $('.example').nfdscroll({ startIndex:0, width:'266', height:'216', interval:-1,//2000, selected:'circle', prevText:'Previous', nextText:'Next', deriction:'left', callback: function(index,$currentNode){ console.log(index) } }); </script></body></html>Effects achieved
Manually adjust the styles of ol, nfdscroll-prev, etc. in it
The simple implementation method of the above carousel is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.