横向图片滚动播放

最新推荐文章于 2025-05-22 13:28:11 发布

猿憨憨

最新推荐文章于 2025-05-22 13:28:11 发布

阅读量975

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/a1265262132/article/details/53044075

本文介绍了一种使用HTML和JavaScript实现图片展示与轮播效果的方法，通过具体实例展示了如何设置图片链接、图片尺寸及如何利用脚本实现平滑滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片没有，自己插入就可以，直接套用就可以。

<!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=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div id="demou" style="OVERFLOW: hidden; WIDTH: 1180px; COLOR: #ffffff" align="center">
            <table width="1040" border="0" align="center" cellpadding="0" cellspacing="0" cellspace="0">
              <tbody>
                <tr>
                  <td align="center" valign="top" id="demou1"><table width="1180" border="0" align="center" cellpadding="0" cellspacing="2">
                      <tr>
                        <td align="center"><table border="0" width="100%" style="border-collapse: collapse" bordercolor="#111111" cellpadding="3" cellspacing="0"><tr><td valign="bottom" align="center"><script>bian_a("center")</script><a href="html/html4.html"><img border="0" src="images/IMG_20161020_135140_HDR.jpg" alt="点击查看详细信息标题：蒸蒸日上 阅读次数：145"  width="280" height="210"></a><script>bian_b()</script><a href="html/html4.html">蒸蒸日上</a></td><td valign="bottom" align="center"><script>bian_a("center")</script><a href="html/html4.html"><img border="0" src="images/IMG_20161020_145033.jpg" alt="点击查看详细信息标题：玉凤呈祥 阅读次数：79"  width="280" height="210"></a><script>bian_b()</script><a href="html/html4.html">玉凤呈祥</a></td><td valign="bottom" align="center"><script>bian_a("center")</script><a href="html/html4.html"><img border="0" src="images/IMG_20161020_145033.jpg" alt="点击查看详细信息标题：摇钱树 阅读次数：76"  width="280" height="210"></a><script>bian_b()</script><a href="html/html4.html">摇钱树</a></td><td valign="bottom" align="center"><script>bian_a("center")</script><a href="html/html4.html"><img border="0" src="images/IMG_20161020_135355.jpg" alt="点击查看详细信息标题：雄伟泰山 阅读次数：100"  width="280" height="210"></a><script>bian_b()</script><a href="html/html4.html">雄伟泰山</a></td><td valign="bottom" align="center"><script>bian_a("center")</script><a href="html/html4.html"><img border="0" src="images/IMG_20161020_135207_HDR.jpg" alt="点击查看详细信息标题：雄伟泰山 阅读次数：85"  width="280" height="210"></a><script>bian_b()</script><a href="html/html4.html">雄伟泰山</a></td><td valign="bottom" align="center"><script>bian_a("center")</script><a href="html/html4.html"><img border="0" src="images/IMG_20161020_135355.jpg" alt="点击查看详细信息标题：祥云送宝 阅读次数：77"  width="280" height="210"></a><script>bian_b()</script><a href="html/html4.html">祥云送宝</a></td><td valign="bottom" align="center"><script>bian_a("center")</script><a href="html/html4.html"><img border="0" src="images/IMG_20161020_135355.jpg" alt="点击查看详细信息标题：喜气洋洋 阅读次数：78"  width="280" height="210"></a><script>bian_b()</script><a href="html/html4.html">喜气洋洋</a></td><td valign="bottom" align="center"><script>bian_a("center")</script><a href="html/html4.html"><img border="0" src="images/IMG_20161020_145033.jpg" alt="点击查看详细信息标题：五岳独尊 阅读次数：74"  width="280" height="210"></a><script>bian_b()</script><a href="html/html4.html">五岳独尊</a></td><td valign="bottom" align="center"><script>bian_a("center")</script><a href="html/html4.html"><img border="0" src="images/IMG_20161020_135355.jpg" alt="点击查看详细信息标题：稳如泰山 阅读次数：73"  width="280" height="210"></a><script>bian_b()</script><a href="zhsh2.asp?id=280">稳如泰山</a></td><td valign="bottom" align="center"><script>bian_a("center")</script><a href="html/html4.html"><img border="0" src="images/IMG_20161020_135140_HDR.jpg" alt="点击查看详细信息标题：泰山胜景 阅读次数：92"  width="280" height="210"></a><script>bian_b()</script><a href="html/html4.html">泰山胜景</a></td></tr></table>
                      </tr>
                      
                  </table></td>
                  <td align="center" valign="top" id="demou2">　</td>
                </tr>
              </tbody>
            </table>
          </div>
		  <SCRIPT>
var speedu3=10//速度数值越大速度越慢
demou2.innerHTML=demou1.innerHTML
function Marqueeu(){
if(demou2.offsetWidth-demou.scrollLeft<=0)
demou.scrollLeft-=demou1.offsetWidth
else{
demou.scrollLeft++
}
}
var MyMaru=setInterval(Marqueeu,speedu3)
demou.onmouseover=function() {clearInterval(MyMaru)}
demou.onmouseout=function() {MyMaru=setInterval(Marqueeu,speedu3)}
          </SCRIPT>
        

</body>
</html>