首页>>Jquery图片>>javaScript图片列表间隔向上滚动特效(2018-09-07)

javaScript图片列表间隔向上滚动特效

 本例没有使用Jquery

javaScript图片列表间隔向上滚动特效
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="scrolling">  
  2.   <div id="scrollnews">  
  3.     <div id="scrollnews_con" style="position: absolute; top: -22px; left: 0px;">  
  4.       <ul>  
  5.         <li><a href="/m1_product_case_10.html" target="_blank"><img src="images/internetke_1337330405.jpg" class="main_img3"></a></li>  
  6.         <li><a href="/m2_web_itm_22.html" target="_blank"><img src="images/internetke_1337421408.jpg" class="main_img3"></a></li>  
  7.         <li><a href="/m2_web_itm_21.html" target="_blank"><img src="images/internetke_1337434440.jpg" class="main_img3"></a></li>  
  8.       </ul>  
  9.       <ul>  
  10.         <li><a href="/m2_animo_itm_24.html" target="_blank"><img src="images/intsml1337216824.jpg" class="main_img3"></a></li>  
  11.         <li><a href="/m2_animo_itm_40.html" target="_blank"><img src="images/internetke_1337330405.jpg" class="main_img3"></a></li>  
  12.         <li><a href="/m2_web_itm_23.html" target="_blank"><img src="images/internetke_1337435644.jpg" class="main_img3"></a></li>  
  13.       </ul>  
  14.     </div>  
  15.   <div id="scrollnews_copymsgid" style="height: 240px; position: absolute; top: 218px; left: 0px;">  
  16.       <ul>  
  17.         <li><a href="/m1_product_case_10.html" target="_blank"><img src="images/internetke_1337330405.jpg" class="main_img3"></a></li>  
  18.         <li><a href="/m2_web_itm_22.html" target="_blank"><img src="images/internetke_1337421408.jpg" class="main_img3"></a></li>  
  19.         <li><a href="/m2_web_itm_21.html" target="_blank"><img src="images/internetke_1337434440.jpg" class="main_img3"></a></li>  
  20.       </ul>  
  21.       <ul>  
  22.         <li><a href="/m2_animo_itm_24.html" target="_blank"><img src="images/intsml1337216824.jpg" class="main_img3"></a></li>  
  23.         <li><a href="/m2_animo_itm_40.html" target="_blank"><img src="images/internetke_1337330405.jpg" class="main_img3"></a></li>  
  24.         <li><a href="/m2_web_itm_23.html" target="_blank"><img src="images/internetke_1337435644.jpg" class="main_img3"></a></li>  
  25.       </ul>  
  26.     </div></div>  
  27. </div>  
  28. <div id="scrolling_1">  
  29.   <div id="scrollnews_1">  
  30.     <div id="scrollnews_con_1" style="position: absolute; top: 0px; left: 0px;">  
  31.       <ul>  
  32.         <li><a href="/m2_web_itm_22.html" target="_blank"><img src="images/intsml1337216824.jpg" class="main_img3"></a></li>  
  33.         <li><a href="/m2_animo_itm_24.html" target="_blank"><img src="images/internetke_1337330405.jpg" class="main_img3"></a></li>  
  34.         <li><a href="/m2_web_itm_23.html" target="_blank"><img src="images/internetke_1337435644.jpg" class="main_img3"></a></li>  
  35.       </ul>  
  36.       <ul>  
  37.          <li><a href="/m2_web_itm_23.html" target="_blank"><img src="images/internetke_1337330405.jpg" class="main_img3"></a></li>  
  38.         <li><a href="/m2_web_itm_22.html" target="_blank"><img src="images/internetke_1337421408.jpg" class="main_img3"></a></li>  
  39.         <li><a href="/m1_product_case_10.html" target="_blank"><img src="images/internetke_1337434440.jpg" class="main_img3"></a></li>  
  40.       </ul>  
  41.     </div>  
  42.   <div id="scrollnews_1_copymsgid" style="height: 240px; position: absolute; top: 240px; left: 0px;">  
  43.       <ul>  
  44.         <li><a href="/m2_web_itm_22.html" target="_blank"><img src="images/intsml1337216824.jpg" class="main_img3"></a></li>  
  45.         <li><a href="/m2_animo_itm_24.html" target="_blank"><img src="images/internetke_1337330405.jpg" class="main_img3"></a></li>  
  46.         <li><a href="/m2_web_itm_23.html" target="_blank"><img src="images/internetke_1337435644.jpg" class="main_img3"></a></li>  
  47.       </ul>  
  48.       <ul>  
  49.          <li><a href="/m2_web_itm_23.html" target="_blank"><img src="images/internetke_1337330405.jpg" class="main_img3"></a></li>  
  50.         <li><a href="/m2_web_itm_22.html" target="_blank"><img src="images/internetke_1337421408.jpg" class="main_img3"></a></li>  
  51.         <li><a href="/m1_product_case_10.html" target="_blank"><img src="images/internetke_1337434440.jpg" class="main_img3"></a></li>  
  52.       </ul>  
  53.     </div></div>  

 


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