js 实现图片的无缝滚动
CreateTime--2018年3月7日17:18:34
Author:Marydon
测试成功
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="keywords" content="关键词,关键词">
<meta name="description" content="本网页内容描述">
<title>水平滚动-成功案例</title>
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<!-- 图片等比缩放 -->
<script type="text/javascript" src="../js/drawImage.js"></script>
<!-- 图片无缝滚动 -->
<script type="text/javascript" src="../js/marquee.js"></script> <script type="text/javascript">
$(function(){
var marquee = new Marquee();
// 右滚动
//marquee.init(null,null,"imgContainer", "imgContainer_child");
// 左滚动
marquee.init("left",null,"imgContainer", "imgContainer_child");
});
</script>
</head>
<body>
<!--
照片的宽度：142*3=426px，所以父容器的宽度最大为426；
要想扩大父容器的宽度，必须再增加照片，而且也必须遵循上面的规则
-->
<div id="imgContainer"
style="overflow: hidden; height: 140px; width: 426px; background: url(../images/bgImg.jpg);">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td id="imgContainer_child">
<table border="0" cellpadding="11" cellspacing="0" style="margin-top: 9px;">
<tbody>
<tr>
<td>
<a href="#" target="_blank" class="">
<img src="../images/6.png"
title="第一张" onload="javascript:DrawImage(this,145,100)"/>
</a>
</td>
<td>
<a href="#" target="_blank" class="">
<img src="../images/9.png"
title="第二张" onload="javascript:DrawImage(this,145,100)"/>
</a>
</td>
<td>
<a href="#" target="_blank" class="">
<img src="../images/14.png"
title="第三张" onload="javascript:DrawImage(this,145,100)"/>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
效果展示：
左滚动
右滚动
说明：这是截的动态图，实际运行并不卡顿！
这里只展示了左滚动和右滚动，想掌握上滚动与下滚动或获取源码+素材的童鞋，请看下方的指引“如何获取本人原创代码？”