?? index.html
字號:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>圖片前后4張切換效果</title>
<link href="css/carousel.css" rel="stylesheet" type="text/css" />
<link href="css/application.css" rel="stylesheet" type="text/css" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/effects.js" type="text/javascript"></script>
<script src="js/carousel.js" type="text/javascript"></script>
</head>
<body>
<h1>Prototype Carousel Class</h1>
<div class="wrapper">
<div id="prev-arrow-container"><img alt="Left3-disabled" id="prev-arrow" src="images/left3-disabled.gif" /></div>
<div class="carousel-component" id="html-carousel">
<div class="carousel-clip-region">
<ul class="carousel-list">
<li><img alt="Image1" class="thumb" src="images/image1.jpg" />Image 1</li>
<li><img alt="Image2" class="thumb" src="images/image2.jpg" />Image 2</li>
<li><img alt="Image3" class="thumb" src="images/image3.jpg" />Image 3</li>
<li><img alt="Image4" class="thumb" src="images/image4.jpg" />Image 4</li>
<li><img alt="Image5" class="thumb" src="images/image5.jpg" />Image 5</li>
<li><img alt="Image6" class="thumb" src="images/image6.jpg" />Image 6</li>
<li><img alt="Image7" class="thumb" src="images/image7.jpg" />Image 7</li>
<li><img alt="Image8" class="thumb" src="images/image8.jpg" />Image 8</li>
<li><img alt="Image9" class="thumb" src="images/image9.jpg" />Image 9</li>
<li><img alt="Image10" class="thumb" src="images/image10.png" />Image 10</li>
<li><img alt="Image11" class="thumb" src="images/image11.png" />Image 11</li>
<li><img alt="Image12" class="thumb" src="images/image12.png" />Image 12</li>
<li><img alt="Image13" class="thumb" src="images/image13.png" />Image 13</li>
<li><img alt="Image14" class="thumb" src="images/image14.png" />Image 14</li>
<li><img alt="Image15" class="thumb" src="images/image15.png" />Image 15</li>
<li><img alt="Image16" class="thumb" src="images/image16.png" />Image 16</li>
<li><img alt="Image17" class="thumb" src="images/image17.png" />Image 17</li>
<li><img alt="Image18" class="thumb" src="images/image18.png" />Image 18</li>
<li><img alt="Image19" class="thumb" src="images/image19.png" />Image 19</li>
<li><img alt="Image20" class="thumb" src="images/image20.png" />Image 20</li>
<li><img alt="Image21" class="thumb" src="images/image21.png" />Image 21</li>
<li><img alt="Image22" class="thumb" src="images/image22.png" />Image 22</li>
<li><img alt="Image23" class="thumb" src="images/image23.png" />Image 23</li>
<li><img alt="Image24" class="thumb" src="images/image24.png" />Image 24</li>
<li><img alt="Image25" class="thumb" src="images/image25.png" />Image 25</li>
<li><img alt="Image26" class="thumb" src="images/image26.png" />Image 26</li>
<li><img alt="Image27" class="thumb" src="images/image27.png" />Image 27</li>
<li><img alt="Image28" class="thumb" src="images/image28.png" />Image 28</li>
<li><img alt="Image29" class="thumb" src="images/image29.png" />Image 29</li>
<li><img alt="Image30" class="thumb" src="images/image30.png" />Image 30</li>
<li><img alt="Image31" class="thumb" src="images/image31.png" />Image 31</li>
</ul>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
function initCarousel_html_carousel() {carousel = new Carousel('html-carousel', {animHandler:animHandler, animParameters:{duration:0.5}, buttonStateHandler:buttonStateHandler, nextElementID:'next-arrow', prevElementID:'prev-arrow', size:31})};Event.observe(window, 'load', initCarousel_html_carousel);
//]]>
</script>
<div id="next-arrow-container"><img alt="Right3-enabled" id="next-arrow" src="images/right3-enabled.gif" /></div>
<br class="clear" />
<script type="text/javascript">
<!--
function buttonStateHandler(button, enabled) {
if (button == "prev-arrow")
$('prev-arrow').src = enabled ? "images/left3-enabled.gif" : "images/left3-disabled.gif"
else
$('next-arrow').src = enabled ? "images/right3-enabled.gif" : "images/right3-disabled.gif"
}
function animHandler(carouselID, status, direction) {
var region = $(carouselID).down(".carousel-clip-region")
if (status == "before") {
Effect.Fade(region, {to: 0.3, queue: { position:'end', scope: "carousel" }, duration: 0.2})
}
if (status == "after") {
Effect.Fade(region, {to: 1, queue: { position:'end', scope: "carousel" }, duration: 0.2})
}
}
//-->
</script>
</div>
</body>
</html>
?? 快捷鍵說明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -