ステートメント：デモはトレーニング機関に依存しており、このトレーニング構造に非常に感謝しています。これ以上苦労せずに、デモの生産を変更し始めます。
まず第一に、フロントエンド学習プロセスでは、カルーセル画像は私たちが学ばなければならないものであるため、さまざまなカルーセル画像をより効率的に実装するために、モーションフレームワークがカプセル化されています。
関数getStyle（obj、attr）{if（obj.currentstyle）{return obj.currentStyle [attr]; // ieの下で属性値を取得するために{return window.getcomputedStyle（obj、null）[属性]; ClearInterval（obj.timer）; obj.timer = setInterval（function（）{var flag = true; var current = 0; for（var attr in json）{if（attr == 'opacity'）{current = parseint（obj、attr）*100）;} else {current = parseint（getStyle（obj、aTTR））; Math.Ceil（Step）：Math.Floor（Step）; +ステップ） + '）; ClearInterval（obj.timer）;このフレームワークは、異なるブラウザと互換性があり、不透明度やZインデックスなどのプロパティを渡すことができます。もちろん、幅、高さ、左、右などの一般的なプロパティが不可欠です。このフレームワークを使用すると、素晴らしい結果を達成できます。だから今、私たちは正式にデモをし始めます。
まず、index.htmlの生産。
<div id = "box"> <ul> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li>
index.htmlの生産は非常に簡単です。 JavaScriptのLiの背景画像として画像を挿入します。その後、CSSスタイルを調整します。
*{マージン：0px;パディング：0px; } #box {width：1300px;高さ：400px;マージン：100px Auto;オーバーフロー：隠し; } #box ul {height：400px;幅：1300px; } #box ul li {width：240px;高さ：400px;フロート：左;オーバーフロー：隠し; }JavaScriptのコードは次のとおりです。
window.onload = function（）{var box = document.getElementById（ 'box'）; var ali = box.children [0] .children; for（var i = 0; i <ali.length; i ++）{ali [i] .style.backgroundimage = 'url（' + 'images/' +（i + 1） + '.jpg'; ani [i] .onmouseover = function（）{for（var i = 0; i <ali.length; i ++）{aimate（i]、{i]、aimate Animate（{width：800}）;これにより、ネイティブJSを使用して実装されたBellows Effectデモが実現します。もちろん、カプセル化されたアニメーションフレームワークを使用して、NetEaseと同様のカルーセル効果を達成することもできます。
上記の記事は、スポーツフレームワーク（例のコード）を実装し、私があなたと共有するすべてのコンテンツであるスポーツフレームワーク（例コード）をカプセル化するBellowsスタイルのデモです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。