如何使用jquery的cloudcoursel

 

如何使用Cloudcoursel,整理如下:

建議和slimbox2同時使用,這樣效果比較好

 

引入JS:

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

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

 

<script type="text/javascript" src="JS/jquery.mousewheel.js"></script>

<script type="text/javascript" src="JS/slimbox2.js"></script>

<script type="text/javascript" src="JS/cloud-carousel.1.0.4.js"></script>

 

引入CSS:

<link href="Styles/jquery-ui-css/jquery-ui-1.7.2.custom.css" rel="Stylesheet" type="text/css" />

<link href="Styles/Slimbox2/slimbox2.css" rel="Stylesheet" type="text/css" media="screen" />

 

對於div的script:

<script type="text/javascript">

        $(document).ready(function(){

            $("#da-vinci-carousel").CloudCarousel( {

                reflHeight: 56,

                reflGap:2,

                titleBox: $('#da-vinci-title'),

                altBox: $('#da-vinci-alt'),

                buttonLeft: $('#but1'),

                buttonRight: $('#but2'),

                yRadius:40,

                xPos: 285,

                yPos: 120,

                speed:0.15,

                mouseWheel:true

            });

</script>

 

<div id="da-vinci-carousel" style="width: 570px; height: 384px;background: url(Images/carousel/bg.jpg); overflow: scroll;">

 

        <a href="Images/Cloud-Images/1.jpg" rel='lightbox' title="Leonardo Da Vinci">

            <img class="cloudcarousel" src="Images/Cloud-Images/1.jpg" width="128" height="164" alt="Self-portrait in red chalk, circa 1512-1515." title="Leonardo Da Vinci" />

        </a>

        <a href="Images/Cloud-Images/2.jpg" rel='lightbox' title="Mona Lisa">

            <img class="cloudcarousel" src="Images/Cloud-Images/2.jpg" width="128" height="164" alt="Oil on cotton wood, circa 1503–1505." title="Mona Lisa" />

        </a>

        <a href="Images/Cloud-Images/3.jpg" rel="lightbox" title="Madonna of the Yarnwinder">

            <img class="cloudcarousel" src="Images/Cloud-Images/3.jpg" width="128" height="164" alt="Oil on canvas, circa 1501." title="Madonna of the Yarnwinder" />

        </a>

 

        <div id="da-vinci-title">

        </div>

        <div id="da-vinci-alt">

        </div>

        <div id="but1" class="carouselLeft" style="position: absolute; top: 20px; right: 64px;">

        </div>

        <div id="but2" class="carouselRight" style="position: absolute; top: 20px; right: 20px;">

        </div>

</div>

 

效果:

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章