jQueryプラグインjquery.roundabout.js走馬灯輪3 D播図詳細ダウンロード及びパラメータapi
4738 ワード
jquery.roundabout.jsのダウンロードアドレス:https://download.csdn.net/download/jason_renyu/10301838
ファイル内のアクティブファイルと圧縮ファイルmin、比較的簡潔で使いやすい3 dマルチキャストプラグイン
応用例は、ファイルにもあります
ファイルをダウンロードする必要があります
ファイル内のアクティブファイルと圧縮ファイルmin、比較的簡潔で使いやすい3 dマルチキャストプラグイン
応用例は、ファイルにもあります
ファイルをダウンロードする必要があります
<meta charset="utf-8"/>
<link href="css/css.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"/>
<div class="in exhibition_hall">
<div id="" class="roundabout_box">
<ul>
</ul>
</div>
<div class="clear"/>
<div style="text-align: center;">
<button class="web-goodsBtn-prev"> </button>
<button class="web-goodsBtn-next"> </button>
</div>
</div>
<script src="js/jquery.roundabout.min.js"/>
<script type="text/javascript">
var imgSrc = [
{
img: "img/zt1.png",
cont: "Picture information01"
},
{
img: "img/zt2.png",
cont: "Picture information01"
},
{
img: "img/zt3.png",
cont: "Picture information01"
},
{
img: "img/zt4.png",
cont: "Picture information01"
}
]
</script>
<script type="text/javascript">
var liDoms = '';
$.each(imgSrc, function(i,e) {
liDoms += '<li><a href="#"><img src="'+e.img+'" alt=""><span class="text">Picture information 3</span></a></li>';
});
$(".roundabout_box ul").append(liDoms);
$('.roundabout_box ul').roundabout({
duration: 1000, //
minScale: 0.6, //
autoplay: true, //
autoplayDuration: 5000, //
minOpacity: 0.6, //
maxOpacity: 1, //
reflect: true, // true ， false
startingChild: 3, //
autoplayInitialDelay: 5000, // ， （ ）
autoplayPauseOnHover: true, // ， true ，false
enableDrag: true, //
dragAxis: "x",
triggerFocusEvents: true, //
triggerBlurEvents: true, //
btnPrev:".web-goodsBtn-prev", //
btnPrevCallback: function() { //
//
var ithis = $(".roundabout-in-focus");
},
btnNext:".web-goodsBtn-next", //
btnNextCallback: function() { //
//
var ithis = $(".roundabout-in-focus");
},
clickToFocus: true, //
clickToFocusCallback: function() { //
console.log(12)
},
responsive: false //
});
</script>
</code></pre>
<h3> </h3>
<pre><code>bearing: 0.0,
tilt: 0.0, // , -
minZ: 100, //
maxZ: 280, //
minOpacity: 0.4, //
maxOpacity: 1.0, //
minScale: 0.4, //
maxScale: 1.0, //
duration: 600, //
btnNext: null, //
btnNextCallback: function() {}, //
btnPrev: null, //
btnPrevCallback: function() {}, //
btnToggleAutoplay: null, //
btnStartAutoplay: null, //
btnStopAutoplay: null, //
easing: "swing", // swing
clickToFocus: true, //
clickToFocusCallback: function() {},//
focusBearing: 0.0, // 360
shape: "lazySusan",
debug: false,
childSelector: "li", //
startingChild: null, //
reflect: false, // true ， false
floatComparisonThreshold: 0.001,
autoplay: false, //
autoplayDuration: 1000, //
autoplayPauseOnHover: false, // ， true ，false
autoplayCallback: function() {}, //
autoplayInitialDelay: 0, // ， （ ）
enableDrag: false, //
dropDuration: 600, //
dropEasing: "swing", //
dropAnimateTo: "nearest", //
dropCallback: function() {}, //
dragAxis: "x", // x y
dragFactor: 4,
triggerFocusEvents: true,
triggerBlurEvents: true,
responsive: false // </code></pre>
<br/>
</div>
</div>
</div>
</div>