1。フラッシュカルーセル
説明に関係なく、実装は比較的単純で、効果はより良いです
2。スライドカルーセル
次のHTMLコードは例です（左スワイプ）
<div style = "overflow：hidden; width：266px;"> <ul> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </div>
プラグインソースコード：左の回転と上昇を実現し、手動の切り替えも左とアップの切り替え（キーソースコードの手動スイッチング）
var all = $ panel.find（ '> li'）、prevall = new array（）; prevall [0] = all.eq（0）; //ターゲットノードの前ですべてのノードをprevallに保存し、アニメーションが終了した後、これらのノードは（var i = 1; i+eq（i+eq（eq（i+eq））のために（var i = 1; i <len; i+eqs）のために1つずつ追加されます。 'なし'}）; 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]）。現在の表示ノードは最後のノード} $ panel.css（{marginleft：0}）;}）スライドカルーセルを実装する主な方法は2つあります
1）親要素のマージン左を切り替えて、親コンテナの端に最初の子要素を継続的に追加します
簡単な実装
var $ panel = $（ 'example'）; var scrolltimer = setInterval（function（）{scrollnews（$ pane）、3000）; function $ scrollnews（）{{'marginleft'： '-266px'}、500、function（）{$ paner.css（{magrineft：0 0 {$ panel.css（） }）。（ '> li：first'）。このアプローチの問題の1つは、古いIESに互換性の問題がある可能性があることです。
2）蓄積方法に親要素のマージン左を設定する
ただし、マージン左が最小値に設定されている場合（最後の要素にスライド）、最初の子要素の位置を最後の子要素の背面に設定します。最後の要素が最初の要素にスクロールされると、親要素のマージン左が0に設定され、最初の子要素の位置が返されます。簡単なコード例を示します
var $ panel = $（ '。例'）、index = 0; var scrolltimer = setinterval（function（）{scrollnews（$ panel）、}、3000）; function scrollnews（）{if（++ index> = 2）{$ panel.css（{'paddingleft'：266+'px'} $ paned（e "> 「位置」：「絶対」、「左」：266*index + 'px'}）; } $ panel.animate（{'marginleft'：-266*index+'px'}、500、function（）{if（++ index> 3）{$ panel.css（{marginleft：0}）;} if（index> = 3）{index = 0; $ panel.csss（$ left：0 $ panel.find（ '> li：first'）。css（{'position'： 'static'、 'left'： 'auto'}）};より複雑なスクロールプラグインは、水平および垂直スクロール（4つの方向）をサポートする必要があり、手動でフォーカスを切り替えることができ、上下することができます。私が書いた完全なプラグインソースコードを添付します
プラグインソースコードjquery.nfdscroll.js：水平および垂直スクロール（4つの方向）をサポートします。手動スイッチングは、スイッチング方向でスクロールします。
/** * @author 'Chen Hua' * @date '2016-5-10' * @descriptionスライディングカルーセルプラグインは、水平および垂直のスライドカルーセル * * @example html：<div> <！ - scroll content ul--> <ul> <li> <a href = "xxx" _ </< href = "xxx"ターゲット= "_ blank"> </a> </li> <li> <a href = "xxx"ターゲット= "_ blank"> </a> </li> <li> <a href = "xxx"ターゲット= "_ flank"> </a> </li> </ul> <li> </li> <li> </li> <li> </li> </ol> <！ - 前と次のオプション - > <div> <a href = "javascript：void（0）;"> </a> <a href = "javascript：void（0）;"> </a> </div> </div> js： startIndex：0、width： '266'、height： '216'、interval：2000、selected： 'circle'、prevtext： ''、nexttext： ''、deriction： 'left'、callback（index、$ currentNode）{console.log（index）}}}）; * @param startIndex {number}デフォルトでスクロール要素の数からスクロールするデフォルトでは、オプション（0-n、0は最初のものを意味します）間隔時間、ユニットミリ秒、値が負の場合、自動スクロールが実行されない * @param Duration {number}アニメーション持続時間 * @param selected {string}スクロールトグル小さなアイコン（フォーカスリスト）現在のクラス * @param Deded {String}スクロール方向、左/右/右/下の @右/右のコールバックのトライをサポートします。パラメーター（インデックス、$ currentNode）、インデックス：カルーセル後に表示されるノードのインデックス。 currentNode：カルーセルの後に現在表示されているノードのjQueryオブジェクト * @param prevtext {string}前のボタンのテキスト、デフォルトは「前」です。 0、スクロール要素幅、オプション（幅が0の場合0は幅が設定されていない）高さ：0、//スクロール要素の高さ、オプション（高さは高さが設定されていないことを意味する）間隔：//間隔時間ミリ秒の期間：400、//アニメーション期間選択： '選択デリクト： '左'、//スクロール方向コールバック：function（index、$ currentNode）{//新しいノードにスクロールした直後にトリガー、currentNodeは現在表示されているノードのjQueryオブジェクトです}}、$ panel = this.find（ '> ul'）、//スクロールコンテラー$パネル=パネル= $パネル$ this.find（ '> ol> li'）、// select container options = jquery.extend（defaultopt、options）、animatefn、//スクロールアニメーションmax = $ panel.find（ "> li"）。 false、//アニメーションプロセス中に他のアニメーションは= falseに応答しません（$ panellist.length <= 1）{return ;/ StartScroll（toindex）{iSwaiting = toindex; Animatefn（indingex）、interval）// relest else {to interval> 0）; ClearInterval（nfdscrolltimer）; }} if（toindex！= focusindex）{inanimation = true; 'Absolute'、 'left'：width*toindex + 'px'}）; 'px'}）; tind -1; 'px'}、option.duration、fucture dural = tind; 0）{// $ PANER.CSS（ 'MarginEft'：-options.width*focusindex + 'px'：0}）; Animation = false; focusindex）{inanimation = true; }）; toindex; （toindex> = max）{$ panel.css（{margintop：0、 'paddingtop'：0}）; 「Margintop」：height*focusindex '、' paddingtop '：0}）。 }）}} function bindevent（）{//バインディングイベント$ this.on（ 'mouseover'、function（）{stopscroll（）;}）。 }）。 } function init（）{$ this.css（{position： 'relative'、auverflow： 'hidden'}）; == 'right'）{//スタイルを初期化します。実際、プラグインでスタイルを作成する必要はありません。 option.height = $ panel.find（csso） option.deriction == 'bottom'）{var csso = {height：option.height} $ this.css（{height：options.height}）;高さ：「Margintop」：Height * aintimatefn = Alert} 'Stopscroll'：stopscroll、 'startscroll'：startscroll}}}）;完全な例
<！doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> carouselテスト> <スタイルタイプ= "テキスト/css">ボディ、ul、ol {magrain：0;パディング：0;} ul、ol {list-style：none;} .li1 {background-color：＃000;} .li2 {background-color：＃333;} .li3 {background-color：＃666;} .li4 {background-color：＃999;} .example {masse-left：300px;パディング左：80px;幅：186px;高さ：20px;トップ：186px;左：0px;背景：#fff;カーソル：ポインター; } ol li {float：left;幅：10px;高さ：10px;マージン：5px;背景：＃ff0;ボーダーラジウス：10px; } ol li.circle {background：＃f00; } </style> </head> <body> <div> <！ - スクロールコンテンツUL-> <ul> <li> <a href = "xxx"ターゲット= "_ blank"> </a> </li> <li> <a href = "xxx"ターゲット= "_ blank"> </a> <li> <a href = "xxx"ターゲット= "_ blank"> </a> </li> </ul> <！ - フォーカスリスト、オプション - > <ol> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ol> href = "javascript：void（0）;"> </a> <a href = "javascript：void（0）;"> </a> </div> </div> <script type = "text/javascript" src = "common/jquery.js"> </script = "text/javascript" "" text "" " src = "common/jquery.nfdscroll.js"> </script> <script type = "text/javascript"> $（ '。例'）。nfdscroll（{startindex：0、width： '266'、height： '216'、interval：-1、// 2000、コールバック：function（index、$ currentNode）{console.log（index）}}）; </script> </body> </html>達成された効果
OL、NFDSCROLL-PREVなどのスタイルを手動で調整します。
上記のカルーセルの単純な実装方法は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。