cloud-carousel.1.0.5 使用

時間 2021-01-02

標籤 javascript html java jquery ajax api 服務器 app ide google 欄目雲服務简体版

原文原文鏈接

最近使用到cloud-carousel.1.0.5 插件javascript

因而參考了：http://xingkongxieyang.iteye.com/blog/1387768 修改爲了本身須要的。html

<html>

<head>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>



<script type="text/JavaScript" src="/js/cloud-carousel.1.0.0.js"></script>

<script>

$(document).ready(function(){



// 初始化carousels在指定的id爲carousel1的標籤中。

    $("#carousel1").CloudCarousel(

        {

            xPos: 128,

            yPos: 32,

            buttonLeft: $("#left-but"),

            buttonRight: $("#right-but"),

            altBox: $("#alt-text"),

            titleBox: $("#title-text")

        }

    );

});

</script>

</head>

    <body>

        

        <div id = "carousel1" style="width:256px; height:128px;background:#000;overflow:scroll;">

            

            

            <img class = "cloudcarousel" src="/p_w_picpaths/carousel/flags/flag1.png" alt="Flag 1 Description" title="Flag 1 Title" />

            <img class = "cloudcarousel" src="/p_w_picpaths/carousel/flags/flag2.png" alt="Flag 2 Description" title="Flag 2 Title" />

            <img class = "cloudcarousel" src="/p_w_picpaths/carousel/flags/flag3.png" alt="Flag 3 Description" title="Flag 3 Title" />

            <img class = "cloudcarousel" src="/p_w_picpaths/carousel/flags/flag4.png" alt="Flag 4 Description" title="Flag 4 Title" />

        </div>



        

        <input id="left-but" type="button" value="Left" />

        <input id="right-but" type="button" value="Right" />



        

        <p id="title-text"></p>

        <p id="alt-text"></p>

    </body>

</html>

JavaScript 參數設置

在頁面頂部的javascript塊中設置參數，以下：

<script>

$(document).ready(function(){



// 初始化carousels在指定的id爲carousel1的標籤中。

   $("#carousel1").CloudCarousel(

        {

            xPos: 128,

            yPos: 32,

            buttonLeft: $("#left-but"),

            buttonRight: $("#right-but"),

            altBox: $("#alt-text"),

            titleBox: $("#title-text")

        }

    );

});

</script>

任何參數不指定都將使用默認值。Any parameters not specified will have default values applied.

參數名

簡介 (from V1.0.0)

默認值

minScale

應用到最遠項的最小刻度，正面項的刻度是1，應用最遠項爲正面項的1/4，則能夠設置minScale爲0.25。

備註：該參數能夠設置背面視覺最遠的那張圖片相對於正面第一張圖片的大小。0.25至關於視覺上最遠的那張圖片相對於正面最近的圖片的尺寸爲1/4。

0.5

reflHeight

應用到正面最近圖片的，用像素表示的圖片倒影高度。這個倒影是自動計算的。值爲0的意思是不產生倒影。

備註：該參數是設置圖片的倒影高度，像素爲單位，例如：50，能夠設置倒影高度爲50像素。

0

reflGap

圖片和倒影之間的垂直間隔，以像素爲單位表示。應用到正面最近的圖片，其餘自動計算。

0

reflOpacity

指定倒影的透明度，0就是徹底透明，1表示徹底不透明。

0.5

xRadius

水平圖片環繞的半徑，默認是容器寬度的1/2.3。

Width of container / 2.3

yRadius

垂直圖片環繞的半徑，默認是容器高度的1/6。你能夠修改這個值來調整環繞的傾斜程度。

Height of container / 6

xPos

相對於容器中心的環繞圓周水平位置，你一般須要設置這個值爲容器的寬度的一半。

備註：若是你設置這個值小於容器寬度一半，那麼水平環繞的那個園就會撐破容器，你可能看不到所有。

0

yPos

和xPos相似，只不過這個是垂直方向的。

0

buttonLeft

旋轉操做（向左旋轉）的button元素，這個button能夠在任何位置。

null

buttonRight

旋轉操做（向右旋轉）的button元素，這個button能夠在任何位置。

null

titleBox

當鼠標懸浮在某個圖片上時，顯示img元素的title屬性值的標籤元素。這個元素能夠在任何位置。

null

altBox

當鼠標懸浮在某個圖片上時，顯示img元素的alt屬性值的標籤元素。這個元素能夠在任何位置。

null

FPS

這個值能夠設置每秒的旋轉幀數，設置很高能夠實現很平滑的轉動效果，可是對於機器差的用戶來講可能會致使轉動停頓，一般設置爲30，是相對合適的效果。

備註：經過設置該參數能夠調整轉動速度。

30

參數

簡介 (from V1.0.1)

默認值

speed

這個值用於調整轉動速度的，值爲0（不包括）到1（包括）的一個值。

備註：設置爲0，則不會有轉動效果，設置爲1，則沒有轉動效果，而是當即切換到最終效果。

0.2

autoRotate

設置自動轉動效果，值能夠是「left」和「right」，或者「no」。

備註：設置爲「left」，則自動向左轉動。設置爲「right」，則自動向右轉動，設置爲「no」（默認），則不自動轉動。

'no'

autoRotateDelay

自動轉動的間隔時間，以毫秒爲單位。1000爲推薦值，也就是1秒轉動一次。

1500

參數

簡介 (from V1.0.2)

默認值

mouseWheel

假如設置值爲「true」，則啓動鼠標滾輪轉動操做效果。可是你首先須要導入mouse wheel插件： http://plugins.jquery.com/project/mousewheel

false

Parameter

Description (from V1.0.4)

Default Value

bringToFront

假如設置爲「true」，則啓用點擊某張圖片則轉動該張圖片到正面。

false

CSS 設置

Cloud Carousel運行不須要指定任何的CSS樣式，可是，你徹底能夠設置本身的carousel容器、text boxes和buttons的樣式。

你可能但願設置初始display爲display:hidden，假如JavaScript被禁用則自動消失。若是用戶的JavaScript被啓用，該插件會設置display爲display:inline。

設置容器的style中包含overflow:scroll是一個好主意，能夠避免JavaScript無效時沒法顯示內容。

不要設置任何的樣式到carousel的圖片中。java