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をもっとサポートできることを願っています。