jquery スライド プラグイン bxslider スタイルの改善 example_jquery

この記事の例では、jquery スライドショー プラグイン bxslider のスタイルを改善する方法を説明し、参考のために皆さんと共有します。詳細は以下の通りです。

多くの jquery スライドを比較しましたが、あまり良くないことがわかりました。最終的に、bxslider が最も互換性が高く、モバイル デバイスでの手動反転をサポートしていることがわかりました。

しかし、公式の表示効果は本当に醜くて容認できません。結局自分でDIYすることになりました。

bxslider の正式なスタイルは次のとおりです:

変更されたスタイルは次のとおりです:

ステップ 1: bxslider を導入する

コードをコピー コードは次のとおりです:

<スクリプト src="/js/jquery.bxslider.min.js">


<スクリプト src="/js/jquery.bxslider.min.js">




ステップ 2: bxslider HTML コードを追加する

コードをコピーします

コードは次のとおりです。

>                                                                                                                                                                                                                                                 

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            

{$i}

元の公式 HTML コードは次のとおりです:





コードをコピー


コードは次のとおりです:

• 


• 


• 


• 

• 


• 


• 


• 

これを基に、slider_blockの親レイヤDIVを作成し、サブレイヤのslider-pagerの絶対位置を主にページめくり「1、2、3」として相対位置に設定します。

ステップ 3: CSS jquery.bxslider.css を変更し、slider-pager の CSS スタイルの最適化を追加します

コードをコピーします コードは次のとおりです:

#slider_block{位置: 相対;マージン: 0 自動;高さ: 245px;マージントップ:10px;オーバーフロー:非表示;}
#slider-pager{位置: 絶対;下: 10px;右: 10px;z-index: 999;font-size: 0px;}
#slider-pager .pager-link {float: left;width: 15px;height: 15px;line-height: 15px;text-align: center;margin: 0 0 0 10px;background: #FC0;color: #930; }
#slider-pager .active {背景: #0C3;色: #fff;}

/*影効果を削除します。ブラウザは 4jcms と互換性がありません */
/*.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; ボックスシャドウ: 0 0 5px #ccc; 境界線: 実線 #fff 5px; 左: -5px; 背景: #fff; }

*/
#slider_block{位置: 相対;マージン: 0 自動;高さ: 245px;マージントップ:10px;オーバーフロー:非表示;}
#slider-pager{位置: 絶対;下: 10px;右: 10px;z-index: 999;font-size: 0px;}
#slider-pager .pager-link {float: left;width: 15px;height: 15px;line-height: 15px;text-align: center;margin: 0 0 0 10px;background: #FC0;color: #930; }
#slider-pager .active {背景: #0C3;色: #fff;}

/*影効果を削除します。ブラウザは 4jcms と互換性がありません */
/*.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
ボックスシャドウ: 0 0 5px #ccc;
ボーダー: 実線 #fff 5px; 左: -5px;

背景: #fff;
}
*/


最終改修工事が完了しました