特效描述:利用jquery实现 图片无缝滚动。利用jquery实现图片无缝滚动
代码结构
1. 引入CSS
<link href="css/style.css" type="text/css" rel="stylesheet" />
2. 引入JS
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
3. HTML代码
<div class="headeline"></div> <!--演示内容开始--> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} /* marqueeleft */ .marqueeleft{height:136px;width:474px;overflow:hidden;margin:40px auto;} .marqueeleft ul{float:left;} .marqueeleft li{float:left;margin:0 5px;display:inline;width:148px;height:133px;overflow:hidden;} .marqueeleft li .pic{display:block;border:#ccc 1px solid;width:135px;height:104px;padding:2px;overflow:hidden;} .marqueeleft li .txt{text-align:center;height:23px;line-height:23px;} /* marqueetop */ .marqueetop{height:429px;width:148px;overflow:hidden;margin:40px auto;} .marqueetop li{padding:5px 0;width:148px;height:133px;overflow:hidden;} .marqueetop li .pic{display:block;border:#ccc 1px solid;width:135px;height:104px;padding:2px;overflow:hidden;} .marqueetop li .txt{text-align:center;height:23px;line-height:23px;} </style> <script type="text/javascript"> //js无缝滚动代码 function marquee(i, direction){ var obj = document.getElementById("marquee" + i); var obj1 = document.getElementById("marquee" + i + "_1"); var obj2 = document.getElementById("marquee" + i + "_2"); if (direction == "up"){ if (obj2.offsetTop - obj.scrollTop <= 0){ obj.scrollTop -= (obj1.offsetHeight + 20); }else{ var tmp = obj.scrollTop; obj.scrollTop++; if (obj.scrollTop == tmp){ obj.scrollTop = 1; } } }else{ if (obj2.offsetWidth - obj.scrollLeft <= 0){ obj.scrollLeft -= obj1.offsetWidth; }else{ obj.scrollLeft++; } } } function marqueeStart(i, direction){ var obj = document.getElementById("marquee" + i); var obj1 = document.getElementById("marquee" + i + "_1"); var obj2 = document.getElementById("marquee" + i + "_2"); obj2.innerHTML = obj1.innerHTML; var marqueeVar = window.setInterval("marquee("+ i +", '"+ direction +"')", 20); obj.onmouseover = function(){ window.clearInterval(marqueeVar); } obj.onmouseout = function(){ marqueeVar = window.setInterval("marquee("+ i +", '"+ direction +"')", 20); } } </script> <div id="marquee1" class="marqueeleft"> <div style="width:8000px;"> <ul id="marquee1_1"> <li> <a class="pic" href="http://51qianduan.com/"><img width="135" height="104" src="images/201281616534720869.jpg"></a> <div class="txt"><a href="http://51qianduan.com/">南方国际大厦</a></div> </li> <li> <a class="pic" href="http://51qianduan.com/"><img width="135" height="104" src="images/20127251731536317.jpg"></a> <div class="txt"><a href="http://51qianduan.com/">南方国际大厦</a></div> </li> <li> <a class="pic" href="http://51qianduan.com/"><img width="135" height="104" src="images/20127251715020800.jpg"></a> <div class="txt"><a href="http://51qianduan.com/">南方国际大厦</a></div> </li> <li> <a class="pic" href="http://51qianduan.com/"><img width="135" height="104" src="images/20127251705451556.jpg"></a> <div class="txt"><a href="http://51qianduan.com/">南方国际大厦</a></div> </li> </ul> <ul id="marquee1_2"></ul> </div> </div><!--marqueeleft end--> <script type="text/javascript">marqueeStart(1, "left");</script> <div id="marquee2" class="marqueetop"> <div style="height:8000px;"> <ul id="marquee2_1"> <li> <a class="pic" href="http://51qianduan.com/"><img width="135" height="104" src="images/201281616534720869.jpg"></a> <div class="txt"><a href="http://51qianduan.com/">南方国际大厦</a></div> </li> <li> <a class="pic" href="http://51qianduan.com/"><img width="135" height="104" src="images/20127251731536317.jpg"></a> <div class="txt"><a href="http://51qianduan.com/">南方国际大厦</a></div> </li> <li> <a class="pic" href="http://51qianduan.com/"><img width="135" height="104" src="images/20127251715020800.jpg"></a> <div class="txt"><a href="http://51qianduan.com/">南方国际大厦</a></div> </li> <li> <a class="pic" href="http://51qianduan.com/"><img width="135" height="104" src="images/20127251705451556.jpg"></a> <div class="txt"><a href="http://51qianduan.com/">南方国际大厦</a></div> </li> </ul> <ul id="marquee2_2"></ul> </div> </div><!--marqueeleft end--> <script type="text/javascript">marqueeStart(2, "up");</script> <!--演示内容结束--> <div style="text-align:center;clear:both"> </div>