图片不间断不停从右往左滚动jquery特效

2014-02-24 21:02:10 css5整理收集不间断从右往左滚动jquery+DIV+CSS特效，鼠标经过不断滚动图片时（悬停时）图片停止滚动，鼠标移开图文内容继续不间断滚动使用DIV CSS+JQ实现图片滚动特效。

DIV+CSS图片不间断滚动jquery特效不停从右往左滚动图片，横向不间断不停滚动CSS特效，使用JQ+DIV实现非常实用简单兼容各大浏览器的图片不间断滚动特效(CSS+JQ不间断滚动图片特效篇)。

css不停不间断滚动特效效果图
DIV CSS+JQ不间断滚动图片特效截图

不停不间断图片滚动特效的特点：
HTML8整理收集不间断从右往左滚动jquery+DIV+CSS特效，鼠标经过不断滚动图片时（悬停时）图片停止滚动，鼠标移开图文内容继续不间断滚动使用DIV CSS+JQ实现图片滚动特效。

1、HTML代码如下：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>不间断图片滚动在线演示 HTML8</title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 
<!-- html8.com.cn --> 
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<script src="jQuery-jcMarquee.js" type="text/javascript"></script> 
<script> 
$(function(){ 
    $('#Marquee_x').jcMarquee({ 'marquee':'x','margin_right':'10px','speed':20 }); 
    // HTML8提示：10px代表间距，第二个20代表滚动速度 
}); 
</script> 
</head> 
<body> 
<div id="mrq"> 
<!-- HTML注释 HTML8提示：特效DIV开始 --> 
    <div id="Marquee_x"> 
        <ul> 
            <li> 
                <div>
<a href="//www.html8.com.cn/" target="_blank"><img src="images/i1.jpg" />
<span>HTML8学习</span></a>
</div> 
                <div>
<a href="//www.html8.com.cn/" target="_blank"><img src="images/i2.jpg" />
<span>CSS学习上HTML8</span></a>
</div> 
                <div><a href="#" target="_blank"><img src="images/i3.jpg" />
<span>案例演示</span></a></div> 
                <div><a href="//www.html8.com.cn/css/" target="_blank"><img src="images/i4.jpg" />
<span>CSS技巧</span></a></div> 
                <div><a href="//www.html8.com.cn/css/" target="_blank"><img src="images/i5.jpg" />
<span>CSS特效</span></a></div> 
                <div><a href="//www.html8.com.cn/css/" target="_blank"><img src="images/i6.jpg" />
<span>CSS hack</span></a></div> 
                <div><a href="//www.html8.com.cn/css/" target="_blank"><img src="images/i7.jpg" />
<span>DIV+CSS实例</span></a></div> 
                <div><a href="#" target="_blank"><img src="images/i8.jpg" />
<span>滚动案例演示</span></a></div> 
                <div><a href="#" target="_blank"><img src="images/i9.jpg" />
<span>演示内容</span></a></div> 
            </li> 
        </ul> 
    </div> 
<!-- HTML8提示：特效DIV结束 --> 
</div> 
 
</body> 
</html>

以上HTML源代码，在只有一个LI标签内每个DIV包裹一组图文数据，切记只需要使用一个ul li列表，所有滚动图片数据放到这组li列表标签内。此不间断滚动特效可控制每组图文数据之间间距，可以控制图片滚动速度。

2、CSS代码：

@charset "utf-8"; 
/* HTML8-CSS初始化模板-html8.com.cn */ 
body, div, ul, li{margin:0; padding:0;font-style: normal;font:12px/22px "B8BF53",Arial, Helvetica, sans-serif} 
/* CSS注释说明：B8BF53 代表 宋体，更多中文字体转 Unicode //www.html8.com.cn/css/325.shtml */ 
ol, ul ,li{list-style:none} 
img {border: 0; vertical-align:middle} 
body{color:#000000;background:#FFF; text-align:center} 
.clear{clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px} 
a{color:#000000;text-decoration:none}  
a:hover{color:#BA2636;text-decoration:underline} 
 
#mrq{width:925px; margin:20px auto;border:1px solid #000; padding:2px} 
#Marquee_x { overflow:hidden; width: 925px }  
#Marquee_x ul li ,#Marquee_x ul li div{ float:left;line-height:25px;overflow:hidden} /* 横向滚动必须让所有li左浮动 */ 
#Marquee_x ul li div{ float:left;line-height:25px;height:131px; width:142px; overflow:hidden} 
#Marquee_x ul li div img{ border:1px solid #DADADA; width:140px; height:105px; display:block} 
#Marquee_x ul li div span{ display:block;}

根据需求修改CSS达到自己所需要的布局目的，比如修改边框、margin、图片高度、图片宽度等

3、在线演示：查看案例

4、不间断滚动图片特效打包下载：

立即下载（375.204KB）