图片滚动从右向左滚动网页代码

最新推荐文章于 2025-05-07 12:48:43 发布

原创最新推荐文章于 2025-05-07 12:48:43 发布 · 4.8k 阅读

7 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

59 篇文章

订阅专栏

本文提供了一个使用HTML、CSS和jQuery实现的图片滚动展示效果的完整示例代码。该代码能够使图片在固定区域内自动水平滚动，并在鼠标悬停时停止滚动。

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

以下代码是从一个网站上面扒下来的，仅供参考，直接保存到html文件即可运行。

<html>
	<head>
	<style>
		
h1, h2, h3, h4, h5, h6, dd, dt, ul, li, span, p, dl, a, th, td, blockquote, form, fieldse {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

dd {
    display: inline;
    float: left;
}


.actual_pic dl dd a {
    display: block;
    height: 99px;
    margin: 0 2px;
    width: 158px;
}
a, a:active {
    outline: medium none;
}
a {
    color: #555555;
    outline: medium none;
    text-decoration: none;
}

img {
    border: 0 none;
}
		* {
    word-wrap: break-word;
}
		.scroll_pic {
    border: 1px solid #999;
    height: 99px;
    overflow: hidden;
    width: 324px;
}
.actual_pic {
    height: 99px;
    width: 9999px;
}
.actual_pic dl dd a {
    display: block;
    height: 99px;
    margin: 0 2px;
    width: 158px;
}
.pic_one {
    float: left;
    height: 99px;
    width: auto;
}
.pic_one_copy {
    float: left;
    height: 99px;
    width: auto;
}
</style>
<script src="http://www.caeexpo.org/r/cms/www4c/default/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
	  function scroll_pic_two(){
		    var timer_pic=50;
			  $('.pic_one_copy').html($('.pic_one').html());
			  var pic_width=$('.pic_one').width();
			
		    function step_pic_scroll(){
					if($('.scroll_pic').scrollLeft()==pic_width){
						 $('.scroll_pic').scrollLeft(0)
					}else{
					  $('.scroll_pic').scrollLeft($('.scroll_pic').scrollLeft()+1)
				  }
			  }
		   
		     var stop_pic_scro=setInterval(step_pic_scroll,timer_pic);
		     $('.scroll_pic dl dd a').bind('mouseover',function(){
			      clearInterval(stop_pic_scro)
		     });
		  
		     $('.scroll_pic dl dd a').bind('mouseout',function(){
		         stop_pic_scro=setInterval(step_pic_scroll,timer_pic);
		     })
	  }	
	  $(document).ready(function(){
	  		scroll_pic_two();	
	  });
</script>
</head>
<div class="scroll_pic"> 
   <div class="actual_pic"> 
    <div class="pic_one"> 
     <dl> 
      <dd>
       <a target="_blank" href="/huizhanmeitu/60731.jhtml"><img width="158" height="99" src="http://www.caeexpo.org/u/cms/www4c/201406/23094546degz.jpg" /></a>
      </dd> 
      <dd>
       <a target="_blank" href="/huizhanmeitu/60628.jhtml"><img width="158" height="99" src="http://www.caeexpo.org/u/cms/www4c/201406/19192850hzkm.jpg" /></a>
      </dd> 
      <dd>
       <a target="_blank" href="/huizhanmeitu/60626.jhtml"><img width="158" height="99" src="http://www.caeexpo.org/u/cms/www4c/201406/191926102y03.jpg" /></a>
      </dd> 
      <dd>
       <a target="_blank" href="/huizhanmeitu/60622.jhtml"><img width="158" height="99" src="http://www.caeexpo.org/u/cms/www4c/201406/1919224228kd.jpg" /></a>
      </dd> 
      <dd>
       <a target="_blank" href="/huizhanmeitu/60621.jhtml"><img width="158" height="99" src="http://www.caeexpo.org/u/cms/www4c/201406/191924167thk.jpg" /></a>
      </dd> 
     </dl> 
    </div> 
    <div class="pic_one_copy"> 
     <dl> 
      <dd>
       <a target="_blank" href="/huizhanmeitu/60731.jhtml"><img width="158" height="99" src="http://www.caeexpo.org/u/cms/www4c/201406/23094546degz.jpg" /></a>
      </dd> 
      <dd>
       <a target="_blank" href="/huizhanmeitu/60628.jhtml"><img width="158" height="99" src="http://www.caeexpo.org/u/cms/www4c/201406/19192850hzkm.jpg" /></a>
      </dd> 
      <dd>
       <a target="_blank" href="/huizhanmeitu/60626.jhtml"><img width="158" height="99" src="http://www.caeexpo.org/u/cms/www4c/201406/191926102y03.jpg" /></a>
      </dd> 
      <dd>
       <a target="_blank" href="/huizhanmeitu/60622.jhtml"><img width="158" height="99" src="http://www.caeexpo.org/u/cms/www4c/201406/1919224228kd.jpg" /></a>
      </dd> 
      <dd>
       <a target="_blank" href="/huizhanmeitu/60621.jhtml"><img width="158" height="99" src="http://www.caeexpo.org/u/cms/www4c/201406/191924167thk.jpg" /></a>
      </dd> 
     </dl> 
    </div> 
   </div> 
  </div>
</html>

效果图如下：