以下是 Prototype Carousel Class图片幻灯切换程序特效代码 的示例演示效果:
部分效果截图:
HTML代码(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" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为Prototype Carousel Class图片幻灯切换程序，属于站长常用代码" />
<title>Prototype Carousel Class图片幻灯切换程序</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>
JS代码(application.js):
function search(event){
var key = event.which || event.keyCode;
var input = Event.element(event);
if (key == 13){
carousel.scrollTo(parseFloat(input.value) - 1) Event.stop(event);
return false;
}
}
Application ={
addRightColumn2:function(){
document.write('\ <div id="navigation">\ toto </div>\ ');
}
,addRightColumn:function(){
document.write('\ <div id="navigation">\ <div id="nm">\ \ <a href="http://www.neomeeting.net"><img border=0 width=187 src="/images/neomeeting.png"/></a>\ Conduct live meeting over internet\ \ </div>\ <div id="g">\ <script type="text/javascript">\ google_ad_client = "pub-3593675344652080";
\ google_ad_width = 120;
\ google_ad_height = 600;
\ google_ad_format = "120x600_as";
\ google_ad_type = "text_image";
\ google_ad_channel = "1401878792+2664779569+8025923418+4188663988+8193138037";
\ google_color_border = "F0F0F0";
\ google_color_bg = "F0F0F0";
\ google_color_link = "24CCFF";
\ google_color_text = "000000";
\ google_color_url = "FF4F69";
\ </script>\ <script type="text/javascript"\ src="http://pagead2.googlesyndication.com/pagead/show_ads.js">\ </script>\ </div>\ </div>\ ');
setTimeout(Application.moveFrame,100);
}
,moveFrame:function(){
var f =$$("iframe")[0];
if (f){
$("g").appendChild(f)}
else setTimeout(Application.moveFrame,100)}
}
JS代码(carousel.js):
// Copyright (c) 2006 S��bastien Gruhier (http://xilinus.com,http://itseb.com)//// Permission is hereby granted,free of charge,to any person obtaining// a copy of this software and associated documentation files (the// "Software"),to deal in the Software without restriction,including// without limitation the rights to use,copy,modify,merge,publish,// distribute,sublicense,and/or sell copies of the Software,and to// permit persons to whom the Software is furnished to do so,subject to// the following conditions://// The above copyright notice and this permission notice shall be// included in all copies or substantial portions of the Software.//// THE SOFTWARE IS PROVIDED "AS IS",WITHOUT WARRANTY OF ANY KIND,// EXPRESS OR IMPLIED,INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF// MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE// LIABLE FOR ANY CLAIM,DAMAGES OR OTHER LIABILITY,WHETHER IN AN ACTION// OF CONTRACT,TORT OR OTHERWISE,ARISING FROM,OUT OF OR IN CONNECTION// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.//// VERSION 0.26var Carousel = Class.create();
Carousel.prototype ={
// Constructor initialize:function(carouselElemID){
this.carouselElemID = carouselElemID;
this.options = Object.extend({
numVisible:4,scrollInc:3,animParameters:{
}
,buttonStateHandler:null,animHandler:null,ajaxHandler:null,initDoneHandler:null,queue:"carousel",size:0,prevElementID:"prev-arrow",nextElementID:"next-arrow",ajaxParameters:null,url:null}
,arguments[1] ||{
}
);
this.initDone = false;
this.animRunning = "none";
this.requestIsRunning = false;
// add afterFinish options to animParameters (store old function)this.animAfterFinish = this.options.animParameters.afterFinish;
Object.extend(this.options.animParameters,{
afterFinish:this._animDone.bind(this),queue:{
position:'end',scope:this.options.queue}
}
);
// Event bindingsthis.prevScroll = this._prevScroll.bindAsEventListener(this);
this.nextScroll = this._nextScroll.bindAsEventListener(this);
this.onComplete = this._onComplete.bindAsEventListener(this);
this.onFailure = this._onFailure.bindAsEventListener(this);
Event.observe(this.options.prevElementID,"click",this.prevScroll);
Event.observe(this.options.nextElementID,"click",this.nextScroll);
// Get DOM UL elementvar carouselListClass = "carousel-list";
this.carouselList = document.getElementsByClassName(carouselListClass,$(carouselElemID))[0]this.options.size = $(this.carouselList.getElementsByTagName("li")).length;
// Init datathis._init();
}
,// Destructordestroy:function(){
Event.stopObserving(this.options.prevElementID,"click",this.prevScroll);
Event.stopObserving(this.options.nextElementID,"click",this.nextScroll);
}
,scrollTo:function(newStart){
var old_inc = this.options.scrollInc;
this.ignoreNoMoreImages = true;
if(newStart > this.currentIndex){
this.options.scrollInc = newStart - this.currentIndex;
this._nextScroll(this);
}
else{
this.options.scrollInc = this.currentIndex - newStart;
this._prevScroll(this);
}
this.options.scrollInc = old_inc;
}
,/* "Private" functions */
_init:function(){
this.currentIndex = 0;
// Ajax content if (this.options.url) this._request(this.currentIndex,this.options.numVisible);
// Static contentelse{
this._getLiElementSize();
this._updateButtonStateHandler(this.options.prevElementID,false);
this._updateButtonStateHandler(this.options.nextElementID,this.options.size > this.options.numVisible);
}
}
,_prevScroll:function(event){
if (this.animRunning != "none" || this.currentIndex == 0) return;
var inc = this.options.scrollInc;
if (this.currentIndex - inc < 0) inc = this.currentIndex;
this._scroll(inc) return false;
}
,_nextScroll:function(event){
if (this.animRunning != "none") return false;
// Check if there are enough elements in cache if (this.currentIndex + this.options.numVisible + this.options.scrollInc <= this.options.size) this._scroll(-this.options.scrollInc);
else{
// Compute how many are in the cache this.nbInCache = this.options.size - (this.currentIndex + this.options.numVisible);
if (this.options.url && this.noMoreImages == false) this._request(this.currentIndex + this.options.numVisible + this.nbInCache,this.options.scrollInc - this.nbInCache);
else{
if (this.nbInCache > 0) this._scroll(-this.nbInCache);
}
}
return false;
}
,_request:function(start,nb){
if (this.options.url && ! this.requestIsRunning){
this.requestIsRunning = true;
if (this.options.ajaxHandler) this.options.ajaxHandler(this,"before");
var params = "start=" + start + "&nb=" + nb;
if (this.options.ajaxParameters != null) params += "&" + this.options.ajaxParametersnew Ajax.Request(this.options.url,{
parameters:params,onComplete:this.onComplete,onFailure:this.onFailure}
);
}
}
,_onComplete:function(originalRequest){
this.requestIsRunning = false;
this.carouselList.innerHTML += originalRequest.responseText;
// Compute how many new elements we have var size = this.options.size;
this.options.size = this.carouselList.getElementsByTagName("li").length;
var inc = this.options.size - size;
// First run,compute li sizeif (this.initDone == false){
this._getLiElementSize()this.currentIndex = 0;
this.initDone = true;
if (this.options.initDoneHandler) this.options.initDoneHandler(this);
// Update button states this._updateButtonStateHandler(this.options.prevElementID,false);
this._updateButtonStateHandler(this.options.nextElementID,this.options.size == this.options.numVisible);
this.noMoreImages = this.options.size < this.options.numVisible}
// Add imageselse{
if (!this.ignoreNoMoreImages) this.noMoreImages = inc != this.options.scrollInc;
else this.ignoreNoMoreImages = false;
// Add images if (inc > 0){
this._scroll(-inc,this.noMoreImages)}
// No more images,disable next button else{
if (this.nbInCache >0) this._scroll(-this.nbInCache,true);
this._updateButtonStateHandler(this.options.nextElementID,false);
}
}
if (this.options.ajaxHandler) this.options.ajaxHandler(this,"after");
}
,_onFailure:function(originalRequest){
this.requestIsRunning = false;
}
,_animDone:function(event){
if (this.options.animHandler) this.options.animHandler(this.carouselElemID,"after",this.animRunning);
this.animRunning = "none";
// Call animAfterFinish if exists if (this.animAfterFinish) this.animAfterFinish(event);
}
,_updateButtonStateHandler:function(button,state){
if (this.options.buttonStateHandler) this.options.buttonStateHandler(button,state)}
,_scroll:function(delta,forceDisableNext){
this.animRunning = delta > 0 ? "prev":"next";
if (this.options.animHandler) this.options.animHandler(this.carouselElemID,"before",this.animRunning);
new Effect.MoveBy(this.carouselList,0,delta * this.elementSize,this.options.animParameters);
this.currentIndex -= delta;
this._updateButtonStateHandler(this.options.prevElementID,this.currentIndex != 0);
if (this.options.url && this.noMoreImages == false) enable = true;
else enable = (this.currentIndex + this.options.numVisible < this.options.size);
this._updateButtonStateHandler(this.options.nextElementID,(forceDisableNext ? false:enable));
}
,_getLiElementSize:function(){
var li = $(this.carouselList.getElementsByTagName("li")[0]);
this.elementSize = li.getDimensions().width + parseFloat(li.getStyle("margin-left")) + parseFloat(li.getStyle("margin-right"));
}
}
CSS代码(application.css):
body{font:14px "Trebuchet MS",Verdana,Arial,sans-serif;margin:0;padding:0;color:#333;}
table thead td{border:1px solid #DDDDDD;background-color:#EEEEEE;}
table td{padding:0px;vertical-align:top;border:1px solid #DDDDDD;}
.wrapper{margin-left:auto;margin-right:auto;width:560px;}
.clear{clear:both;width:1px;height:1px;font-size:1px;visibility:hidden;}
h1{font:24px "Trebuchet MS",Verdana,Arial,sans-serif;text-align:center;padding-top:5px;padding-bottom:10px;}
h2{font:16px "Trebuchet MS",Verdana,Arial,sans-serif;color:#24CCFF;padding-top:10px;padding-bottom:0px;margin:0 0 10px 0;}
h3{font:16px "Trebuchet MS",Verdana,Arial,sans-serif;padding-top:10px;padding-bottom:10px;margin:0 0 0px 0;}
a{font:14px "Trebuchet MS",Verdana,Arial,sans-serif;text-decoration:none;color:#FF4F69;}
a:hover{text-decoration:underline;}
ul{margin:0;padding:0px 10px 5px 30px;}
li{padding:0px;margin:0px;}
.content{margin:10px;}
p.header{margin-left:-10px;margin-right:-10px;background-color:#F0F0F0;padding:10px;font-size:18px;}
p.header a{font-size:18px;}
img.thumb{background:#E3EDFA;}
.search{font-size:14px;}
/* AJAX CAROUSEL */
#ajax-carousel .carousel-list li{margin:4px 10px 0px 10px;}
#ajax-carousel .carousel-list li{width:106px;border:0px solid green;padding:10px;padding-top:15px;margin:0;color:#E3EDFA;}
#ajax-carousel .carousel-list li img{border:1px solid #999;display:block;}
#ajax-carousel{margin-bottom:10px;float:left;width:500px;height:144px;}
#overlay{width:200px;height:80px;background-color:#FFF;position:absolute;top:25px;left:150px;padding-top:10px;z-index:100;color:#000;border:1px dotted #000;text-align:center;font-size:24px;filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
/* HTML CAROUSEL */
#html-carousel{background:#AAD4EE;}
#html-carousel .carousel-list li{margin:4px 10px 0px 10px;}
#html-carousel .carousel-list li{width:106px;border:0px solid green;padding:10px;padding-top:15px;margin:0;color:#3F3F3F;}
#html-carousel .carousel-list li img{border:1px solid #999;display:block;}
#html-carousel{margin-bottom:10px;float:left;width:500px;height:144px;}
/* BUTTONS */
#prev-arrow-container,#next-arrow-container{float:left;margin:0px;padding:0px;}
#next-arrow{cursor:pointer;}
#prev-arrow{cursor:pointer;}
/* COLOR SYNTAXING */
pre{font-size:12px;padding:5px;border:1px solid #333;overflow:auto;border-bottom-color:#ddd;color:#fff;background-color:#222;}
/* =code highlighting-----------------------------------------------------------------------------*/
/** RUBY **/
code.ruby span.comment{color:#BD48B3;}
code.ruby span.string{color:#99FF00;}
code.ruby span.brackets{}
code.ruby span.symbol{color:#6BCFF7;}
code.ruby span.keywords{color:#FF8400;}
/** YAML **/
code.ruby span.key{color:#FF8400;}
/** JAVASCRIPT **/
/** HTML **/
code.html span.tag{color:#fff;}
code.html span.attribute{color:#FFD500;}
code.html span.string{color:#99FF00;}
code.html span.comment{color:#999;}
code.html span.doctype{color:#D7FF80;}
code.html span.tag{color:#6BCFF7;}
/** CSS */
code.css .comment{color:#BD48B3;}
code.css .properties{color:#6BCFF7;}
code.css .selectors{color:#FF8400;}
code.css .units{color:#99FF00;}
code.css .urls{color:green;}
code.css .keywords{color:#FFD500;}
/** Javascript */
code.javascript .comment{color:#BD48B3;}
code.javascript .string{color:#99FF00;}
code.javascript .keywords{color:#FF8400;}
code.javascript .global{color:#6BCFF7;}
/*code.javascript .brackets{color:#6BCFF7;}
*/
/* */
div#wrapper2{float:left;width:100%;}
div#content{margin-right:200px;padding-right:10px;border-right:1px solid #888;}
div#navigation{float:left;width:200px;margin-left:-200px;text-align:left;background:#F0F0F0;}
#nm{float:left;background:#FFF;width:200px;height:250px;text-align:center;}
#g{float:left;padding-top:10px;padding-left:40px;}
CSS代码(carousel.css):
/** * Copyright (c) 2006,Bill W. Scott * All rights reserved. * * This work is licensed under the Creative Commons Attribution 2.5 License. To view a copy * of this license,visit http://creativecommons.org/licenses/by/2.5/ or send a letter to * Creative Commons,543 Howard Street,5th Floor,San Francisco,California,94105,USA. * * This work was created by Bill Scott (billwscott.com,looksgoodworkswell.com). * * The only attribution I require is to keep this notice of copyright & license * in this original source file. */
/** * Standard Configuration. It is advised that this section NOT be modified as the * carousel.js expects the behavior outlined below. **/
.carousel-component{position:relative;overflow:hidden;visibility:visible;/* component turns it on when first item is rendered */
}
.carousel-component ul.carousel-list{width:10000000px;position:relative;z-index:1;}
.carousel-component .carousel-list li{float:left;list-style:none;overflow:hidden;}
.carousel-component .carousel-list li img{width:100px;height:100px;}
.carousel-component .carousel-vertical li{float:none;margin-bottom:0px;}
.carousel-component ul.carousel-vertical{width:auto;}
.carousel-component .carousel-clip-region{overflow:hidden;margin:0px auto;position:relative;}
/** * Safe to override. It is safe to override background,padding,margin,color,* text alignment,fonts,etc. Define a separate CSS file and override your style * preferences. **/
.carousel-component{background:#3F3F3F;padding:0px;color:#618cbe;}
.carousel-component ul.carousel-list{margin:0px;padding:0px 0px 0px 0px;}
.carousel-component .carousel-list li{text-align:center;margin:0px 0px 0px 0px;padding:0px;font:10px verdana,arial,sans-serif;color:#666;}
.carousel-component .carousel-vertical li{}
.carousel-component ul.carousel-vertical{}
分享到QQ
分享到微博
微信扫一扫
