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

jsp加javascript实现图片轮流显示（图片路径从数据库中读取）,主要是数据库里读出的路径怎么在js里面循环。

15 个解决方案

#1

帮帮忙啊！谢谢

#2

引用楼主 jiaojiao_zi 的回复:

jsp加javascript实现图片轮流显示（图片路径从数据库中读取）,主要是数据库里读出的路径怎么在js里面循环。

用for循环呀

如果你读出的是一个List的话

<%

List list = ...;//这里读取路径

for(int i=0;i<list.size();i++){

%>

out.println(list.get(i));

<%

}

%>

#3

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

#4

我以前写的静态的是用时间控制的动态改变图片显示的路径的，我换个方法看看吧

#5

这个是我页面上的代码请大家帮我看一看

<%@ 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>

#6

你这里主要是不知道怎么控制时间来自动轮换吧？
给你个思路
首先：假设你后台取的是个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);//每两秒执行一次括号里面的函数

这样就可以每两秒自动切换了。

#7

楼上的思路没有错。

#8

我改了以后的代码请各位高手再帮我看看我没找到错误效果就是出不来!谢谢大家啦
<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>

#9

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

#10

哎这种代码不想写，帮顶一下吧。就是循环路径，判断显示。代码自己检查吧等找到了会有很大收获的！

#11

<!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

#12

每次调js的函数，在这个函数中设置返回值（路径）就可以了

#13



<!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

#14

引用 6 楼 hb308102796 的回复:

你这里主要是不知道怎么控制时间来自动轮换吧？
给你个思路
首先：假设你后台取的是个list
下面是js:
var i = 0;//图片编号
var s = setInterval(function(){
  var dom = document.getElementById("xxx");//取得你要放置大图的img dom
  dom.src = list[i];
  i++;
……

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

#15

解决了，谢谢大家的帮忙

<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>

#1

帮帮忙啊！谢谢

#2

引用楼主 jiaojiao_zi 的回复:

jsp加javascript实现图片轮流显示（图片路径从数据库中读取）,主要是数据库里读出的路径怎么在js里面循环。

用for循环呀

如果你读出的是一个List的话

<%

List list = ...;//这里读取路径

for(int i=0;i<list.size();i++){

%>

out.println(list.get(i));

<%

}

%>

#3

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

#4

我以前写的静态的是用时间控制的动态改变图片显示的路径的，我换个方法看看吧

#5

#6

#7

楼上的思路没有错。

#8

#9

#10

哎这种代码不想写，帮顶一下吧。就是循环路径，判断显示。代码自己检查吧等找到了会有很大收获的！

#11

#12

每次调js的函数，在这个函数中设置返回值（路径）就可以了

#13



<!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

#14

引用 6 楼 hb308102796 的回复:

你这里主要是不知道怎么控制时间来自动轮换吧？
给你个思路
首先：假设你后台取的是个list
下面是js:
var i = 0;//图片编号
var s = setInterval(function(){
  var dom = document.getElementById("xxx");//取得你要放置大图的img dom
  dom.src = list[i];
  i++;
……

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

秒客网

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

15 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

相关文章