jsp图片滚动和闪动
jsp图片滚动
<%@ page language="java" import="java.util.*" pageEncoding="BIG5"%> <%@ page import="java.io.*" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'moveImg.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> </head> <body> <table width="700" border="0"> <tr> <td height="190" valign="top"> <table width="100%" border="0" height="100%"> <tr> <td height="140" valign="top"> <DIV id=demo style="OVERFLOW: hidden; WIDTH: 400px; HEIGHT: 133px"> <DIV id=demo1 style="WIDTH: 200px"> <table width="50%" border="0"> <tr> <% String smallpath = ""; for(int i=1;i<4;i++) { smallpath = "/JavaWeb/image/"+Integer.toString(i)+".jpg"; %> <td> <a href="" rel="gb_imageset[nice_pics]" title="<%=Integer.toString(i)+".jpg" %>"> <img src="<%=smallpath %>" width="190" height="133" style="cursor: hand"> </a> </td> <% } %> </tr> </table> </DIV> <DIV id=demo2></DIV> </DIV> <SCRIPT> var speed=30; var rol = "right"; demo2.innerHTML=demo1.innerHTML function Marquee() { if(rol=="right") { demo.scrollLeft++; if(demo.scrollWidth - demo.scrollLeft <= demo.offsetWidth) { rol="left"; } } else { demo.scrollLeft--; if(demo.scrollLeft==0) { rol="right"; } } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </SCRIPT> </td> </tr> </table> </td> </tr> </table> </body> </html>
jsp图片闪动
<%@ page contentType="text/html;charset=UTF-8" language="java"%> <html> <head> <title> </title> <mce:style type="text/css" media="all"><!-- body{ font-family:verdana; font-size:80%; } #imageSlideshowHolder{ width: 205px; /* IE 5.x */ width/* */:/**/205px; /* Other browsers */ width: /**/205px; /* CSS HACK */ height: 142px; /* IE 5.x */ height/* */:/**/140px; /* Other browsers */ height: /**/140px; background-color:#FFF; border:1px solid #CCCCCC; position:relative; /* Never change this value */ } .imageInGallery{ width:700px; height:140px; background-color:#FFF; /* Never change these 3 value */ left:0px; top:0px; position:absolute; } #imageSlideshowHolder img{ position:absolute; } /*chris - description overlay*/ #the_captions{ display:none; } .imageInGallery_DESC{ position:absolute; color:#FFFFFF; padding:30px; padding-top:15px; margin-left:30px; margin-top:5px; z-index:100; /*height:200px;*/ width:290px; background:url("images/bg.png"); font-size:80%; } .imageInGallery_DESC h1{ color:#99cc33; font-size:140%; margin:0px; padding:0px 0px 2px 0px; } --></mce:style><style type="text/css" media="all" mce_bogus="1">body{ font-family:verdana; font-size:80%; } #imageSlideshowHolder{ width: 205px; /* IE 5.x */ width/* */:/**/205px; /* Other browsers */ width: /**/205px; /* CSS HACK */ height: 142px; /* IE 5.x */ height/* */:/**/140px; /* Other browsers */ height: /**/140px; background-color:#FFF; border:1px solid #CCCCCC; position:relative; /* Never change this value */ } .imageInGallery{ width:700px; height:140px; background-color:#FFF; /* Never change these 3 value */ left:0px; top:0px; position:absolute; } #imageSlideshowHolder img{ position:absolute; } /*chris - description overlay*/ #the_captions{ display:none; } .imageInGallery_DESC{ position:absolute; color:#FFFFFF; padding:30px; padding-top:15px; margin-left:30px; margin-top:5px; z-index:100; /*height:200px;*/ width:290px; background:url("images/bg.png"); font-size:80%; } .imageInGallery_DESC h1{ color:#99cc33; font-size:140%; margin:0px; padding:0px 0px 2px 0px; }</style> <SCRIPT type="text/javascript" src="/JavaWeb/JS/slideshow_with_captions.js" mce_src="JavaWeb/JS/slideshow_with_captions.js"></SCRIPT> </head> <body> <div id="imageSlideshowHolder"> <img src="/JavaWeb/image/1.jpg" mce_src="JavaWeb/image/1.jpg" title=""> <img src="/JavaWeb/image/2.jpg" mce_src="JavaWeb/image/2.jpg" title=""> <img src="/JavaWeb/image/3.jpg" mce_src="JavaWeb/image/3.jpg" title=""> </div> <div id="the_captions"> <div><h1></h1><br><br><small></small></div> <div><h1></h1></div> <div><h1></h1></div> <div><h1></h1></div> <div><h1></h1></div> <div><h1></h1></div> </div> <SCRIPT type="text/javascript"> initImageGallery(); </SCRIPT> </body> </html>
slideshow_with_captions.js
var slideshow2_noFading = false; // Just normal show/hide without fading ? var slideshow2_timeBetweenSlides = 3000; // Amount of time between each image(1000 = 1 second) var slideshow2_fadingSpeed = 4; // Speed of fading /* Don't change any of these values */ var slideshow2_galleryHeigh; // Height of galery var slideshow2_galleryContainer; // Reference to the gallery div var slideshow2_galleryWidth; // Width of gallery var slideshow2_slideIndex = -1; // Index of current image shown var slideshow2_slideIndexNext = false; // Index of next image shown var slideshow2_imageDivs = new Array(); // Array of image divs(Created dynamically) var slideshow2_currentOpacity = 100; // Initial opacity var slideshow2_imagesInGallery = false; // Number of images in gallery // chris var galleryTextArray = new Array(); function getGalleryImageSize(imageIndex) { if(imageIndex==slideshow2_imagesInGallery){ showGallery(); }else{ var imgObj = document.getElementById('galleryImage' + imageIndex); var imgWidth = imgObj.width; var imgHeight = imgObj.height; if(imgWidth>50){ var tmpDiv = document.createElement('DIV'); tmpDiv.id = 'galleryDiv' + imageIndex; tmpDiv.style.visibility = 'hidden'; tmpDiv.className='imageInGallery'; slideshow2_galleryContainer.appendChild(tmpDiv); tmpDiv.appendChild(imgObj); // chris - add desc overlay var imgDesc=document.createElement('DIV'); imgDesc.className='imageInGallery_DESC'; imgDesc.innerHTML=galleryTextArray[imageIndex]; tmpDiv.appendChild(imgDesc); imgObj.style.left = Math.round((slideshow2_galleryWidth - imgWidth)/2) + "px"; imgObj.style.top = Math.round((slideshow2_galleryHeight - imgHeight)/2) + "px"; tmpDiv.style.visibility = 'hidden'; slideshow2_imageDivs.push(tmpDiv); imageIndex++; getGalleryImageSize(imageIndex); }else{ setTimeout('getGalleryImageSize(' + imageIndex + ')',10); } } } function showGallery() { if(slideshow2_slideIndex==-1)slideshow2_slideIndex=0; else slideshow2_slideIndex++; // Index of next image to show if(slideshow2_slideIndex==slideshow2_imageDivs.length)slideshow2_slideIndex=0; slideshow2_slideIndexNext = slideshow2_slideIndex+1; // Index of the next next image if(slideshow2_slideIndexNext==slideshow2_imageDivs.length)slideshow2_slideIndexNext = 0; slideshow2_currentOpacity=100; // Reset current opacity // Displaying image divs slideshow2_imageDivs[slideshow2_slideIndex].style.visibility = 'visible'; if(navigator.userAgent.indexOf('Opera')<0){ slideshow2_imageDivs[slideshow2_slideIndexNext].style.visibility = 'visible'; } if(document.all){ // IE rules slideshow2_imageDivs[slideshow2_slideIndex].style.filter = 'alpha(opacity=100)'; slideshow2_imageDivs[slideshow2_slideIndexNext].style.filter = 'alpha(opacity=1)'; }else{ slideshow2_imageDivs[slideshow2_slideIndex].style.opacity = 0.99; // Can't use 1 and 0 because of screen flickering in FF slideshow2_imageDivs[slideshow2_slideIndexNext].style.opacity = 0.01; } setTimeout('revealImage()',slideshow2_timeBetweenSlides); } function revealImage() { if(slideshow2_noFading){ slideshow2_imageDivs[slideshow2_slideIndex].style.visibility = 'hidden'; showGallery(); return; } //slideshow2_currentOpacity--; slideshow2_currentOpacity=slideshow2_currentOpacity-10; if(document.all){ slideshow2_imageDivs[slideshow2_slideIndex].style.filter = 'alpha(opacity='+slideshow2_currentOpacity+')'; slideshow2_imageDivs[slideshow2_slideIndexNext].style.filter = 'alpha(opacity='+(100-slideshow2_currentOpacity)+')'; }else{ slideshow2_imageDivs[slideshow2_slideIndex].style.opacity = Math.max(0.01,slideshow2_currentOpacity/100); // Can't use 1 and 0 because of screen flickering in FF slideshow2_imageDivs[slideshow2_slideIndexNext].style.opacity = Math.min(0.99,(1 - (slideshow2_currentOpacity/100))); } if(slideshow2_currentOpacity>0){ setTimeout('revealImage()',slideshow2_fadingSpeed); }else{ slideshow2_imageDivs[slideshow2_slideIndex].style.visibility = 'hidden'; showGallery(); } } function initImageGallery() { slideshow2_galleryContainer = document.getElementById('imageSlideshowHolder'); slideshow2_galleryWidth = slideshow2_galleryContainer.clientWidth; slideshow2_galleryHeight = slideshow2_galleryContainer.clientHeight; galleryImgArray = slideshow2_galleryContainer.getElementsByTagName('IMG'); captions=document.getElementById('the_captions'); galleryDescArray = captions.getElementsByTagName('DIV'); for(var no=0;no<galleryImgArray.length;no++){ galleryImgArray[no].id = 'galleryImage' + no; // chris - get caption galleryTextArray[no]=galleryDescArray[no].innerHTML; } slideshow2_imagesInGallery = galleryImgArray.length; getGalleryImageSize(0); }