首页>>Jquery图片>>jQuery/Js多行文字图片左右滚动网页特效(2018-08-28)

jQuery/Js多行文字图片左右滚动网页特效

jQuery/Js多行文字图片左右滚动网页特效
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="gdtu">  
  2.      <div id="elem" class="gddiv">  
  3.       <div class="innerElem">  
  4.        <ul>  
  5.         <li><a href=""><img src="images/1.jpg"></a></li>  
  6.         <li><a href=""><img src="images/2.jpg"></a></li>  
  7.         <li><a href=""><img src="images/3.jpg"></a></li>  
  8.         <li><a href=""><img src="images/4.jpg"></a></li>  
  9.         <li><a href=""><img src="images/5.jpg"></a></li>  
  10.         <li><a href=""><img src="images/6.jpg"></a></li>  
  11.        </ul>  
  12.       <ul>  
  13.         <li><a href=""><img src="images/1.jpg"></a></li>  
  14.         <li><a href=""><img src="images/2.jpg"></a></li>  
  15.         <li><a href=""><img src="images/3.jpg"></a></li>  
  16.         <li><a href=""><img src="images/4.jpg"></a></li>  
  17.         <li><a href=""><img src="images/5.jpg"></a></li>  
  18.         <li><a href=""><img src="images/6.jpg"></a></li>  
  19.        </ul></div>  
  20.      </div>  
  21.    </div>  
  22.    <div class="gdtu">  
  23.      <div id="elem1" class="gddiv">  
  24.       <div class="innerElem">  
  25.        <ul>  
  26.         <li><a href=""><img src="images/6.jpg"></a></li>  
  27.         <li><a href=""><img src="images/5.jpg"></a></li>  
  28.         <li><a href=""><img src="images/1.jpg"></a></li>  
  29.         <li><a href=""><img src="images/2.jpg"></a></li>  
  30.         <li><a href=""><img src="images/3.jpg"></a></li>  
  31.         <li><a href=""><img src="images/4.jpg"></a></li>  
  32.        </ul>  
  33.       <ul>  
  34.         <li><a href=""><img src="images/6.jpg"></a></li>  
  35.         <li><a href=""><img src="images/5.jpg"></a></li>  
  36.         <li><a href=""><img src="images/1.jpg"></a></li>  
  37.         <li><a href=""><img src="images/2.jpg"></a></li>  
  38.         <li><a href=""><img src="images/3.jpg"></a></li>  
  39.         <li><a href=""><img src="images/4.jpg"></a></li>  
  40.        </ul></div>  
  41.      </div>  
  42.    </div>  

 

JavaScript Code
  1. <script language="javascript" type="text/javascript">  
  2.       function slide(id){  
  3.         var timer;  
  4.         var elem = document.getElementById(id);  
  5.         var elem1 = elem.getElementsByTagName('ul')[0];  
  6.         var elem2 = document.createElement('ul');  
  7.         var div = elem.getElementsByTagName('div')[0];  
  8.         this.Scroll = Scroll;  
  9.         this.act = act;  
  10.         function Scroll() {  
  11.             if (elem.scrollLeft >= elem1.offsetWidth) {  
  12.                 elem.scrollLeft -= elem1.offsetWidth;  
  13.             }  
  14.             else {  
  15.                 elem.scrollLeft += 3;  
  16.             }  
  17.         }  
  18.         function act() {  
  19.             div.appendChild(elem2);  
  20.             if (elem1.offsetWidth >= elem.offsetWidth) {  
  21.                 elem2.innerHTML = elem1.innerHTML;  
  22.                 timer = setInterval(this.Scroll, 50);  
  23.                 elem.onmouseover = function () {  
  24.                     clearInterval(timer);  
  25.                 }  
  26.                 elem.onmouseout = function () {  
  27.                     timer = setInterval(Scroll, 50);  
  28.                 }  
  29.             }  
  30.         }  
  31.     }  
  32.   
  33.     $(".gddiv").each(function () {  
  34.         var sli = new slide($(this).attr("id"));  
  35.         sli.act();  
  36.     });  
  37. </script>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_686.html