如何使用javascript在缩略图中移动多个图像(从phpmyadmin检索)
How to move multiple images(retrieved from phpmyadmin) inside a thumbnail using javascript
我正在创建一个网页,每个缩略图中都包含图像(一个缩略图中至少有3个图像)。我正在从数据库中检索这些图像。我的代码如下:
{foreach $rows as $row}
<img src="{$row.item_picture}"/>
{/foreach}
但是,我想把这些图像存储在一个列表中,这样,我就可以让图像在缩略图中连续移动,如下所示:
<html>
<head>
<link rel="stylesheet" type="text/css" href="C://Users//ts00333776//Desktop//theme.css">
<script type="text/javascript">
var rice= new Array() // create new array to preload images
rice[0] = new Image() // create new instance of image object
rice[0].src = "C://Users//ts00333776//Desktop//images//rice1.jpg" // set image src property to image path, preloading image in the process
rice[1] = new Image()
rice[1].src = "C://Users//ts00333776//Desktop//images//rice2.jpg"
rice[2] = new Image()
rice[2].src = "C://Users//ts00333776//Desktop//images//rice3.jpg"
</script>
</head>
<body>
<center>
<table>
<tr>
<td class="first">
<div class="second">
<div class="third">
<img src="C://Users//ts00333776//Desktop//images//rice1.jpg" id="slide" height="250px" width="250px"/>
</div>
<center><h4>some description</h4></center>
</div>
</td>
</tr>
</table>
</center>
<script type="text/javascript">
//variable that will increment through the images
var step=0
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = rice[step].src
if (step<2)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
</script>
</body>
</html>`
但是,在上面的代码中,我从本地检索图像,而不是从数据库检索图像。有人能帮我把图像存储在从phpmyadmin检索到的列表中吗。这样我就可以在缩略图中移动图像。如何移动从数据库中获取的缩略图中的图像?我走的路对吗?感谢您的帮助。
JavaScript无法直接连接到MySQL数据库;您需要使用服务器端脚本语言来至少从数据库中检索结果。然后,您可以使用该语言直接在页面中显示结果,也可以将结果传递给JavaScript(例如,如果您正在执行自动完成文本字段,这会更有用,但如果您只是显示内联图像,则可能不那么有用)。
在这种情况下,最常用的语言可能是PHP,但您可以在Python、Perl、Ruby、Java等中使用。最大的决定因素可能是你的托管提供商为你提供了什么,其次是你更熟悉的语言。
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 角度:在ng重复上切换图像
- 画廊图像未显示
- Phonegap-(安卓/iphone)多个图像的图像库出现问题
- Javascript排序的图像弹出窗口..可以't单独弹出
- 画布数据到图像
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 使图像在单击时展开到不大于浏览器
- Html页面上的多个Base64图像和平滑加载
- UIAutomation放大图像
- 使用javascript在Flash中加载外部图像
- 可以在这里为背景图像设置滤镜吗
- 当图像转换为本地存储的DataURL时,EXIF被删除
- 使用 js 将背景图像设置为 HTML
- Javascript将图像src更改为淡入淡出
- 无法在本地计算机中将画布另存为图像
- 压缩phonegap中ios的图像插件
- 如何使用javascript在缩略图中移动多个图像(从phpmyadmin检索)