rotate with different image(轮换显示图片)
<script type="text/javascript">
/* dw_rotator.js JavaScript rotate images code version date: April 2005 */
dw_Rotator.restartDelay = 500; // delay onmouseout before call to rotate
dw_Rotator.col = [];
// arguments: image name, rotation speed, path to images (optional),
// target, i.e. name of window to direct url's to onclick (optional)
function dw_Rotator(name, speed, path, tgt) {
this.name = name; this.speed = speed || 4500; // default speed of rotation
this.path = path || ""; this.tgt = tgt;
this.ctr = 0; this.timer = 0; this.imgs = []; this.actions = [];
this.index = dw_Rotator.col.length; dw_Rotator.col[this.index] = this;
this.animString = "dw_Rotator.col[" + this.index + "]";
}
dw_Rotator.prototype.addImages = function() { // preloads images
var img;
for (var i=0; arguments[i]; i++) {
img = new Image();
img.src = this.path + arguments[i];
this.imgs[this.imgs.length] = img;
}
}
dw_Rotator.prototype.addActions = function() {
var len = arguments.length; // in case an argument's value is null
for (var i=0; i < len; i++)
this.actions[this.actions.length] = arguments[i];
}
dw_Rotator.prototype.rotate = function() {
clearTimeout(this.timer); this.timer = null;
if (this.ctr < this.imgs.length-1) this.ctr++;
else this.ctr = 0;
var imgObj = document.images[this.name];
if (imgObj) {
imgObj.src = this.imgs[this.ctr].src;
this.timer = setTimeout( this.animString + ".rotate()", this.speed);
}
}
// Start rotation for all instances
dw_Rotator.start = function() {
var len = dw_Rotator.col.length, obj;
for (var i=0; i<len; i++) {
obj = dw_Rotator.col[i];
if (obj && obj.name ) // check for empty instance created by dw_random.js
obj.timer = setTimeout( obj.animString + ".rotate()", obj.speed);
}
}
// called onclick of images
dw_Rotator.doClick = function(n) {
var obj = dw_Rotator.col[n];
if ( !document.images || !obj ) return true;
if ( obj.actions && obj.actions[obj.ctr] ) {
if ( typeof obj.actions[obj.ctr] == "string" ) { // url
if ( obj.tgt ) { // open in separate window
// add features here if you want, i.e., chrome, size, position, ...
var win = window.open(obj.actions[obj.ctr], obj.tgt);
if ( win && !win.closed ) win.focus();
} else {
window.location = obj.actions[obj.ctr];
}
} else { // function pointer
obj.actions[obj.ctr](); // execute function
}
}
return false;
}
// for stopping/starting onmouseover/out
dw_Rotator.pause = function(n) {
dw_Rotator.clearTimers(n);
}
dw_Rotator.clearTimers = function(n) {
var obj = dw_Rotator.col[n];
if ( obj ) {
clearTimeout( obj.timer ); obj.timer = null;
}
}
dw_Rotator.resume = function(n) {
dw_Rotator.clearTimers(n);
var obj = dw_Rotator.col[n];
if ( obj ) {
obj.timer = setTimeout( obj.animString + ".rotate()", dw_Rotator.restartDelay );
}
}
</script>
<script type="text/javascript">
/*
dw_random.js - random image rotation - version date: April 2005
requires dw_rotator.js
*/
// dw_RandRotator is subclass of dw_Rotator
// it has its own rotate method, and adds a setupImage method
dw_RandRotator.prototype = new dw_Rotator();
// constructor arguments: (all optional) rotation speed, path to images,
// linked? (boolean), mouse events? (boolean), target window name
function dw_RandRotator(sp, pt, bClickable, bMouse, tgt) {
this.num = dw_Rotator.col.length; this.name = "RandRotateImg" + this.num;
this.mouseEvs = bMouse; this.clickable = bClickable;
// call method available to replace following 2 steps as of JS 1.3 (ns6/ie5.5)
this.rObj = dw_Rotator; this.rObj(this.name, sp, pt, tgt);
}
// arguments: images array, width and height of images, transition filter? (boolean)
dw_RandRotator.prototype.setUpImage = function(imgAr, w, h, bTrans) {
this.trans = bTrans;
this.ctr = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ this.ctr ];
var imgStr = '<img name="' + this.name + '" src="' + this.path + img + '"';
imgStr += ( typeof w == "number") ? ' width="' + w + '"': '';
imgStr += ( typeof h == "number") ? ' height="' + h + '"': '';
imgStr += ' alt="">';
var str = "";
if (this.clickable) { // link it
str += '<a href="" onclick="return dw_Rotator.doClick(' + this.num + ')"';
if (this.mouseEvs) {
str += ' onmouseover="dw_Rotator.pause(' + this.num + ')"'
str += ' onmouseout="dw_Rotator.resume(' + this.num + ')"';
}
str += ' onfocus="this.blur()">' + imgStr + '</a>';
} else {
str = imgStr;
}
document.write(str); document.close();
for (var i=0; imgAr[i]; i++) this.addImages( imgAr[i] );
}
dw_RandRotator.prototype.rotate = function() {
clearTimeout(this.timer); this.timer = null;
var ctr = Math.floor( Math.random() * this.imgs.length );
// repeat attempts to get new image, if necessary
var i = 0;
while ( ctr == this.ctr && i < 6 ) {
ctr = Math.floor( Math.random() * this.imgs.length );
i++; // limit # of loops
}
this.ctr = ctr;
var imgObj = document.images[this.name];
if (!imgObj) return;
if ( this.trans && typeof imgObj.filters != "undefined" ) {
imgObj.style.filter = 'blendTrans(duration=1)';
if (imgObj.filters.blendTrans) imgObj.filters.blendTrans.Apply();
}
imgObj.src = this.imgs[this.ctr].src;
if ( this.trans && typeof imgObj.filters != "undefined" && imgObj.filters.blendTrans )
imgObj.filters.blendTrans.Play();
this.timer = setTimeout( this.animString + ".rotate()", this.speed);
}
// rotation speed, path to images (optional)
var rotator1 = new dw_RandRotator(4000, "/sites/NewBizDev/Inspirations/");
var imgList = ["01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg", "06.jpg", "07.jpg", "08.jpg", "09.jpg", "10.jpg"];
// images array, width and height of images, transition filter (boolean)
rotator1.setUpImage(imgList , 306, 187, true);
dw_Rotator.start();
</script>
