图片来回滚动 <!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>Js图片连续滚动代码</title> <mce:script LANGUAGE="JavaScript"><!-- step = 0; obj = new Image(); function anim(xp,xk,smer) //smer = direction { obj.style.left = x; x += step*smer; if (x>=(xk+xp)/2) { if (smer == 1) step--; else step++; } else { if (smer == 1) step++; else step--; } if (x >= xk) { x = xk; smer = -1; } if (x <= xp) { x = xp; smer = 1; } // if (smer > 2) smer = 3; setTimeout('anim('+xp+','+xk+','+smer+')', 50); } function moveLR(objID,movingarea_width,c) { if (navigator.appName=="Netscape") window_width = window.innerWidth; else window_width = document.body.offsetWidth; obj = document.images[objID]; image_width = obj.width; x1 = obj.style.left; x = Number(x1.substring(0,x1.length-2)); // 30px -> 30 if (c == 0) { if (movingarea_width == 0) { right_margin = window_width - image_width; anim(x,right_margin,1); } else { right_margin = x + movingarea_width - image_width; if (movingarea_width < x + image_width) window.alert("No space for moving!"); else anim(x,right_margin,1); } } else { if (movingarea_width == 0) right_margin = window_width - image_width; else { x = Math.round((window_width-movingarea_width)/2); right_margin = Math.round((window_width+movingarea_width)/2)-image_width; } anim(x,right_margin,1); } } // --></mce:script> </head> <body> <img src="http://hiphotos.baidu.com/baishonglin/pic/item/b79b20500f78690043a75b67.jpg" mce_src="http://hiphotos.baidu.com/baishonglin/pic/item/b79b20500f78690043a75b67.jpg" name="picture" style="position: absolute; top: 70px; left: 30px;" BORDER="0" WIDTH="140" HEIGHT="93"/> <mce:script LANGUAGE="JavaScript"><!-- setTimeout("moveLR('picture',300,1)",10); // --></mce:script> </body> </html> 图片闪烁 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <base href="<%=basePath%>"/> <mce:script type="text/javascript" src="http://www.daists.com/wp-content/themes/ArtSee/js/jquery-1.4.2.js" mce_src="http://www.daists.com/wp-content/themes/ArtSee/js/jquery-1.4.2.js"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function(){ $("#sItem li:not(:first)").css("display","none"); var B=$("#sItem li:last"); var C=$("#sItem li:first"); setInterval(function(){ if(B.is(":visible")){ C.fadeIn(500).addClass("in");B.hide() }else{ $("#sItem li:visible").addClass("in"); $("#sItem li.in").next().fadeIn(500); $("li.in").hide().removeClass("in")} },3000) //每3秒钟切换一条,你可以根据需要更改 }) // --></mce:script> </head> <body> <div style="width:500px;height:500px;background:red;padding:40px;"> <ul id="sItem"> <li><img src="1.JPG" mce_src="1.JPG"/></li> <li><img src="1.JPG" mce_src="1.JPG"/></li> <li><img src="1.JPG" mce_src="1.JPG"/></li> <li><img src="1.JPG" mce_src="1.JPG"/></li> <li><img src="1.JPG" mce_src="1.JPG"/></li> <li><img src="1.JPG" mce_src="1.JPG"/></li> <li><img src="1.JPG" mce_src="1.JPG"/></li> <li><img src="1.JPG" mce_src="1.JPG"/></li> <li><img src="1.JPG" mce_src="1.JPG"/></li> </ul> </div> </body> </html>