Javascript image slider issue
Question
I used the following slideshow code, available at this forum page
Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<TITLE>New Restaurant - Crete</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Imagetoolbar" content="no">
<link rel="shortcut icon" href="favicon.ico">
<script type="text/javascript" language="JavaScript1.2">
//Background Image Slideshow- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com
//Specify background images to slide
var bgslides=new Array()
bgslides[0]="http://www.google.com/img1.jpg"
bgslides[1]="http://www.google.com/img2.jpg"
bgslides[2]="http://www.google.com/img3.jpg"
bgslides[3]="http://www.google.com/img4.jpg"
bgslides[4]="http://www.google.com/img5.jpg"
bgslides[5]="http://www.google.com/img6.jpg"
//preload images
var processed=new Array()
for (i=0;i<bgslides.length;i++){
processed[i]=new Image()
processed[i].src=bgslides[i]
}
</script>
<style type="text/css">
<!--
html, body, #wrapper {
height:100%;
margin: 0;
padding: 0;
border: none;
text-align: center;
overflow:hidden;
}
#wrapper {
margin: 0 auto;
text-align: center;
vertical-align: top;
width: 550px;
}
.image {
position:relative;
float:left; /* optional */
}
.image .text {
position:absolute;
top:30px; /* in conjunction with left property, decides the text position */
left:0;
width:550px; /* optional, though better have one */
}
p {
font-family:Trajan Pro, serif;
font-size:medium;
font-weight:bold;
color:white;
}
h1 {
font-family:Trajan Pro, serif;
font-weight:bold;
font-size:x-large;
color:white;
text-align:center;
}
body {
background-attachment:fixed;
background-repeat: no-repeat;
/*Use center center in place of 300 200 to center bg image*/
background-position: center;
}
#bg {
position:absolute;z-Index:0;left:0px;top:0px;
}
#bg IMG{
position:absolute;left:0px;top:0px;
}
-->
</style>
</head>
<body>
<div id="bg" >
<img src="http://www.google.com/img1.jpg">
<img src="http://www.google.com/img2.jpg">
<img src="http://www.google.com/img3.jpg">
<img src="http://www.google.com/img4.jpg">
<img src="http://www.google.com/img5.jpg">
<img src="http://www.google.com/img6.jpg">
</div>
<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk
// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.
// **** Application Notes
// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//
// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)
// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//
// **** Functional Code(1.58K) - NO NEED to Change
function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}
zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
}
zxcAnimate.prototype.cng=function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
}
zxcAnimate.prototype.apply=function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}
function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}
</script>
<script type="text/javascript">
<!--
function BGFade(o){
var p=document.getElementById(o.ID)
if (p){
var bgs=p.getElementsByTagName('IMG');
this.bgs=[];
for (var z0=0;z0<bgs.length;z0++){
this.bgs[z0]=new zxcAnimate('opacity',bgs[z0]);
}
this.nu=z0-1;
this.ms=o.Duration||1000;
this.hold=o.Hold||this.ms*2;
if(this.nu>0){
this.Rotate();
}
}
}
BGFade.prototype.Rotate=function(){
this.bgs[this.nu].obj.style.zIndex='0';
this.bgs[this.nu].animate(100,0,this.ms);
this.nu=++this.nu%this.bgs.length;
this.bgs[this.nu].obj.style.zIndex='1';
this.bgs[this.nu].obj.style.left=-(this.bgs[this.nu].obj.width-zxcWWHS()[0])/2+'px'; // horizontal center
this.bgs[this.nu].obj.style.top=-(this.bgs[this.nu].obj.height-zxcWWHS()[1])/2+'px'; // vertical center
this.bgs[this.nu].animate(0,100,this.ms);
var oop=this;
this.to=setTimeout(function(){ oop.Rotate(); },this.hold);
}
function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}
function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}
new BGFade({
ID:'bg', // the unique id name of the container div. (string)
Duration:1000, // the duration of the fade effect in milli seconds. (digits)
Hold:2000 // the duration of the change between images in milli seconds. (digits)
});
//-->
</script>
</body>
</html>
I have a problem with this, it is a strange bug. If you have more than 3 images (4 or more images), then what happens is instead of fading into the next image, it instead fades into the next-to-last image. It works fine if you have only three images. But I need 6 images.
For example, if I have 6 images, then:
image #1 appears,
then image #1 fades into image #5 and then image #2 appears,
then image #2 fades into image #5 and then image #3 appears,
then image #3 fades into image #5 and then image #4 appears,
then image #4 fades into image #5 and then image #5 appears,
then image #5 fades into image #6 and then image #6 appears,
then image #6 fades into image #1 and then image #1 appears
as you see, when it gets to the next-to-last image, it starts to work normally. But if you reload the page the cycle starts over again with this weird bug.
but what SHOULD happen, is:
image #1 appears,
then image #1 fades into image #2,
then image #2 fades into image #3,
then image #3 fades into image #4,
then image #4 fades into image #5,
then image #5 fades into image #6,
then image #6 fades into image #1
Can you please tell me how to fix this so the fade works correctly for more than 3 images?
NOTE: It is not a problem with images being too big. Same thing happens if it's 1px x 1px image.
(Note: the demo images no longer exist)
OK so I am making progress --
it appears that the reason the SECOND TO LAST is displaying, is because apparently all images are displaying in a duplicate box; only, they disappear as their number comes up. Opacity is being given 1 to all but the last image, and the last image is given opacity -0.001, which makes it hidden, hence why you see the second-to-last instead of the last.
But what SHOULD happen is ALL but the first one should be given opacity -0.001 until their number comes up. (when their number comes up, for some reason their duplicate disappears, and the javascript manually overrides the page CSS for the HTML element with the opacity.)
SOLVED!!!! YAY!!!!
Ok so you need to add the following CSS:
#bg img {
opacity: -0.001;
}
and just a note, you need to force the image location with !important. For example, the full CSS for the div id of bg, is:
#bg {
position: absolute;
z-Index:0;
}
#bg img {
position: absolute;
top: 50px !important;
left: 50px !important;
opacity: -0.001;
}
1 answers
solution1
0
SOLVED!!!! YAY!!!!
Ok so you need to add the following CSS:
#bg img {
opacity: -0.001;
}
and just a note, you need to force the image location with !important. For example, the full CSS for the div id of bg, is:
#bg {
position: absolute;
z-Index:0;
}
#bg img {
position: absolute;
top: 50px !important;
left: 50px !important;
opacity: -0.001;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.