jsp加javascript实现图片轮流显示（图片路径从数据库中读取）

用for循环呀如果你读出的是一个List的话
<%
List list = ...;//这里读取路径
for(int i=0;i<list.size();i++){
%>
out.println(list.get(i));
<%
}
%>

jsp读出数据来在页面上，只显示一张，其它隐藏，然后JS控制切换

这个是我页面上的代码请大家帮我看一看<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%@ taglib prefix="logic" uri="/WEB-INF/struts-logic.tld"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    <title>My JSP 'top.jsp' starting page</title>     </head>
<script language =javascript >
var curIndex=0;
//时间间隔单位毫秒
var timeInterval=3000;
var arr=new Array();
var url=document.getElementById("banner").value;
var count=document.getElementById("count").value;
for(var i=0;i<count;i++){
//arr[i]="${pageContext.request.contextPath}/image/banner/"+url;
//alert(arr[i]);
//}color=#FF0000]这个是我写的循环来读取集合中的路径[/color]
arr[0]="${pageContext.request.contextPath}/image/banner/banner02.jpg";
arr[1]="${pageContext.request.contextPath}/image/banner/banner03.jpg";
arr[2]="${pageContext.request.contextPath}/image/banner/banner04.jpg";
这个是我以前写的静态的路径
setInterval(changeImg,timeInterval);
function changeImg()
{
var obj=document.getElementById("obj");
if (curIndex==arr.length-1)
{
curIndex=0;
}
curIndex++;
obj.src=arr[curIndex];
}
</script>
  <style>
body{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
  }
</style>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<table  border="0" cellspacing="0" cellpadding="0" height="144">
  <tr>
    <td  background="${pageContext.request.contextPath}/image/1_02.jpg" style="background-repeat:no-repeat" width="539" height="144">
     <img id=obj src ="${pageContext.request.contextPath}/image/banner/${banner}" border =0 />banner是我从action里传过来的集合中的第一个值
    <input type="hidden" id="banner" value="${banners}"/>banners是action里传过来的图片路径的集合     <input type="hidden" id="count" value="${count}"/>
</td>
  </tr>
</table>
</body>
</html>

你这里主要是不知道怎么控制时间来自动轮换吧？
给你个思路
首先：假设你后台取的是个list
下面是js:
var i = 0;//图片编号
var s = setInterval(function(){
    var dom = document.getElementById("xxx");//取得你要放置大图的img dom
    dom.src = list[i];
    i++;
    if(i >= list.length) {
        i = list.length;
    }
},2000);//每两秒执行一次括号里面的函数这样就可以每两秒自动切换了。

我改了以后的代码请各位高手再帮我看看我没找到错误效果就是出不来!谢谢大家啦
<script language =javascript >
var curIndex=0;
//时间间隔单位毫秒
var timeInterval=3000;
var arr=new Array();
var url=document.getElementById("banner").value;//获取图片名称
var count=document.getElementById("count").value;
arr[curIndex]="${pageContext.request.contextPath}/image/banner/"+url; //整图片路径
setInterval(changeImg,timeInterval);//调用按时间切换的函数
function changeImg()//图片切换的函数
{
var obj=document.getElementById("obj");//img
if (curIndex==arr.length)
{
curIndex=0;
}
curIndex++;
obj.src=arr[curIndex];
}
</script>

我只要把图片改成静态的效果就出来了，可不可以问一下我从数据库取出图片的方法是不是不对啊？请各位帮帮忙啊
var arr=new Array();
var url=document.getElementById("banner").value;//获取图片名称 banner是一个隐藏的文本框，它的value是我从action里面传出来的一个查询图片名称的list集合；
arr[curIndex]="${pageContext.request.contextPath}/image/banner/"+url; //整图片路径

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>tab.html</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style type="text/css">
            .subject {
                border: 1px solid black;
                width: 200px;
                height: 200px;
            }
        </style>
        <script type="text/javascript">
        /*var imgAry = new Array();
        imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af4f2677d1135e93.jpg");
        imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/2f78156fb7c8dae681cb4a93.jpg");
        imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/cf4013658b43f3ccf7365493.jpg");
        imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/2f78156fb7c8dae681cb4a93.jpg");
        imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af1f2677d0135e23.jpg");   */

        window.onload = function () {
            /*var oBox = document.getElementById("subjectBox");
            var oShowId = document.getElementById("showId").value;
            var subjectHtml = "";
            for (var i = 1; i <= 4; i++) {
                if (i == oShowId) {
                    subjectHtml += "<div id ='div_" + i + "' name='showDiv' style='display: block;' class='subject'>" + i + "<img src='" + imgAry[i-1] + "'/></div>"
                } else {
                    subjectHtml += "<div id ='div_" + i + "' name='showDiv' style='display: none;' class='subject'>" + i + "<img src='" + imgAry[i-1] + "'/></div>"
                }
            }
            oBox.innerHTML = subjectHtml; */
            showSubject2("next");
        };

        function setHide() {
            var allDiv = document.getElementsByName("showDiv");
            for (var i = 0; i < allDiv.length; i++) {
                if (allDiv[i].style.display != "none") {
                    allDiv[i].style.display = "none";
                }
            }
        }


        //方法一：
        function showSubject(flag) {
            var oShowId = document.getElementById("showId").value;
            var allDiv = document.getElementsByName("showDiv");
            var len = allDiv.length;
            //alert(oShowId + ":" + len);
            setHide();//隐藏所有div
            if (flag == "next") {
                oShowId = eval(oShowId) + 1;
                if (oShowId > len) {
                    oShowId = 1;
                }
                document.getElementById("div_" + oShowId).style.display = "block";
            } else {
                oShowId = eval(oShowId) - 1;
                if (oShowId < 1) {
                    oShowId = len;
                }
                document.getElementById("div_" + oShowId).style.display = "block";
            }
            document.getElementById("showId").value = oShowId;
        }

        //方法二：
        function showSubject2(flag) {
            var allDiv = document.getElementsByName("showDiv");
            for (var i = 0, len = allDiv.length; i < len; i++) {
                if (allDiv[i].style.display == "block") {
                    allDiv[i].style.display = "none";
                    if (flag == "next") {
                        if (i < len) {
                            i += 1;
                        }
                        if (i >= len) {
                            i = 0;
                        }
                    } else {
                        if (i > 0) {
                            i -= 1;
                        }
                        if (i <= 0) {
                            i = len - 1;
                        }
                    }
                    allDiv[i].style.display = "block";
                    break;
                }
            }
            setTimeout("showSubject2('next')", 1000);//动态更换图片
        }
    </script>
    </head>

    <body>
        方法1：
        <input type="button" value="上" onclick="showSubject('prev')" />
        <input type="button" value="下" onclick="showSubject('next')" />
        <input type="hidden" id="showId" value="1" />
        <br />
        方法2：
        <input type="button" value="上" onclick="showSubject2('prev')" />
        <input type="button" value="下" onclick="showSubject2('next')" />
        <div id="subjectBox">
             <%
                  //imgAry是从数据库中得到的图片路径数组也可以是集合list
                  for (int i = 0; i < imgAry.length; i++) {
             %>
                <div id ='div_<%=i%>' name='showDiv' style='display: block;' class='subject'><img src='<%=imgAry[i]%>'/></div>
              <%
                  }
              %>
        </div>
    </body>
</html>本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/IBM_hoojo/archive/2010/06/07/5653246.aspx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title>tab.html</title>
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="this is my page">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <style type="text/css">
  .subject {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  }
  </style>
  <script type="text/javascript">
  /*var imgAry = new Array();
  imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af4f2677d1135e93.jpg");
  imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/2f78156fb7c8dae681cb4a93.jpg");
  imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/cf4013658b43f3ccf7365493.jpg");
  imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/2f78156fb7c8dae681cb4a93.jpg");
  imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af1f2677d0135e23.jpg"); */

  window.onload = function () {
  /*var oBox = document.getElementById("subjectBox");
  var oShowId = document.getElementById("showId").value;
  var subjectHtml = "";
  for (var i = 1; i <= 4; i++) {
  if (i == oShowId) {
  subjectHtml += "<div id ='div_" + i + "' name='showDiv' style='display: block;' class='subject'>" + i + "<img src='" + imgAry[i-1] + "'/></div>"
  } else {
  subjectHtml += "<div id ='div_" + i + "' name='showDiv' style='display: none;' class='subject'>" + i + "<img src='" + imgAry[i-1] + "'/></div>"
  }
  }
  oBox.innerHTML = subjectHtml; */
  showSubject2("next");
  };

  function setHide() {
  var allDiv = document.getElementsByName("showDiv");
  for (var i = 0; i < allDiv.length; i++) {
  if (allDiv[i].style.display != "none") {
  allDiv[i].style.display = "none";
  }
  }
  }


  //方法一：
  function showSubject(flag) {
  var oShowId = document.getElementById("showId").value;
  var allDiv = document.getElementsByName("showDiv");
  var len = allDiv.length;
  //alert(oShowId + ":" + len);
  setHide();//隐藏所有div
  if (flag == "next") {
  oShowId = eval(oShowId) + 1;
  if (oShowId > len) {
  oShowId = 1;
  }
  document.getElementById("div_" + oShowId).style.display = "block";
  } else {
  oShowId = eval(oShowId) - 1;
  if (oShowId < 1) {
  oShowId = len;
  }
  document.getElementById("div_" + oShowId).style.display = "block";
  }
  document.getElementById("showId").value = oShowId;
  }

  //方法二：
  function showSubject2(flag) {
  var allDiv = document.getElementsByName("showDiv");
  for (var i = 0, len = allDiv.length; i < len; i++) {
  if (allDiv[i].style.display == "block") {
  allDiv[i].style.display = "none";
  if (flag == "next") {
  if (i < len) {
  i += 1;
  }
  if (i >= len) {
  i = 0;
  }
  } else {
  if (i > 0) {
  i -= 1;
  }
  if (i <= 0) {
  i = len - 1;
  }
  }
  allDiv[i].style.display = "block";
  break;
  }
  }
  setTimeout("showSubject2('next')", 1000);//动态更换图片
  }
  </script>
  </head>

  <body>
  方法1：
  <input type="button" value="上" onclick="showSubject('prev')" />
  <input type="button" value="下" onclick="showSubject('next')" />
  <input type="hidden" id="showId" value="1" />
  <br />
  方法2：
  <input type="button" value="上" onclick="showSubject2('prev')" />
  <input type="button" value="下" onclick="showSubject2('next')" />
  <div id="subjectBox">
  <%
  //imgAry是从数据库中得到的图片路径数组也可以是集合list
  for (int i = 0; i < imgAry.length; i++) {
  %>
  <div id ='div_<%=i%>' name='showDiv' style='display: block;' class='subject'><img src='<%=imgAry[i]%>'/></div>
  <%
  }
  %>
  </div>
  </body>
</html>本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/IBM_hoojo/archive/2010/06/07/5653246.aspx

我的思路跟这个差不多的，问题就出在那个list上面了！

解决了，谢谢大家的帮忙<script language =javascript >
var curIndex=0;
//时间间隔单位毫秒
var timeInterval=1000;
var list=new Array();
var url=document.getElementById("banner").value;
url=url.substring(1,url.length-1);
list=url.split(",");
setInterval(changeImg,timeInterval);
String.prototype.trimAll = function(){
return this.replace(/(^\s*)|(\s*)|(\s*$)/g, "");
}; //去空格的方法
function changeImg()
{
var obj=document.getElementById("obj");
curIndex++;
  if (curIndex==list.length)
{
curIndex=0;
}
obj.src="${pageContext.request.contextPath}/image/banner/"+list[curIndex].trimAll();
}
</script>

调试易

jsp加javascript实现图片轮流显示（图片路径从数据库中读取）

解决方案 »