私は単純な Web デザイナー兼テクニカル ライターであり、クライアントの Jive を利用した Web サイトで 4 ページのカルーセルを作成する任務を負っています。
https://communities.bmc.com/communities/community/bsm_initiativesというページに既にあるコードを使用しました。
そのコードを編集して、Jive の概要ページに配置しました。画像はChromeで完全に表示および回転しますが、IE9では恐ろしい赤いXが表示され、FF12ではドットしか表示されません）。
1 ページはこちら: https://communities.bmc.com/communities/community/tap すべてのページのコードは、画像以外は同じです。
相対リンクと絶対リンクの 2 つの方法でテストしましたが、違いはないようです (そうなるとは思っていませんでしたが、最近サイトを http から https に変更したので、試してみる価値があると思いました)。 .
コードは以下です。ご協力いただきありがとうございます！
<div id="container">
<div id="bmc_banner">
<ul class="bjqs">
<li><a href="https://communities.bmc.com/communities/community/tap/product_directory?view=documents"><img src="https://communities.bmc.com/communities/servlet/JiveServlet/download/21201-6-31470099/Find-an-Integration.jpg" width="940" height="300" border="0"/></a></li>
<li><a href="https://communities.bmc.com/communities/docs/DOC-19908"><img src="https://communities.bmc.com/communities/servlet/JiveServlet/download/21201-5-31470094/Market-Solutions.jpg" width="940" height="300" border="0"/></a></li>
<li><a href="https://communities.bmc.com/communities/community/tap/technology_alliances_directory"><img src="https://communities.bmc.com/communities/servlet/JiveServlet/download/21201-5-31470091/TAP-Partners.jpg" width="940" height="300" border="0"/></a></li>
<li><a href="http://www.bmc.com/education"><img src="https://communities.bmc.com/communities/servlet/JiveServlet/download/21201-5-31470096/BMC-Education.jpg" width="940" height="300" border="0"/></a></li>
</ul>
</div>
</div>
<script src="https://communities.bmc.com/communities/themes/generated_advanced_skin_global/template/widget/7summits/scripts/basic-jquery-slider.min.js"></script>
<script>
$j(document).ready(function() {
$j('#bmc_banner').bjqs({
'animation' : 'fade',
'width' : 940,
'height' : 300,
'showControls' : false,
'animationDuration' : 1000,
'rotationSpeed' : 6000
});
});
</script>