酷米社区

图片无限滚动代码

264人参与 |分类: 网页代码|时间:2019年11月24日 10:51

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


<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>不间断图片滚动在线演示 DIVCSS5</title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 
<!-- www.divcss5.com --> 
<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 }); 
    // DIVCSS5提示:10px代表间距,第二个20代表滚动速度 
}); 
</script> 
</head> 
<body> 
<div id="mrq"> 
<!-- HTML注释 divcss5提示:特效DIV开始 --> 
    <div id="Marquee_x"> 
        <ul> 
            <li> 
                <div>
<a href="http://www.divcss5.com/" target="_blank"><img src="images/i1.jpg" />
<span>DIVCSS5学习</span></a>
</div> 
                <div>
<a href="http://www.divcss5.com/" target="_blank"><img src="images/i2.jpg" />
<span>CSS学习上DIVCSS5</span></a>
</div> 
                <div><a href="#" target="_blank"><img src="images/i3.jpg" />
<span>案例演示</span></a></div> 
                <div><a href="http://www.divcss5.com/jiqiao/" target="_blank"><img src="images/i4.jpg" />
<span>CSS技巧</span></a></div> 
                <div><a href="http://www.divcss5.com/css-texiao/" target="_blank"><img src="images/i5.jpg" />
<span>CSS特效</span></a></div> 
                <div><a href="http://www.divcss5.com/css-hack/" target="_blank"><img src="images/i6.jpg" />
<span>CSS hack</span></a></div> 
                <div><a href="http://www.divcss5.com/shili/" 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> 
<!-- divcss5提示:特效DIV结束 --> 
</div> 
 
</body> 
</html>

360截图20191124105710571.jpg

   201904061554524886816578.gif

来源:酷米社区(关注电脑技术和资源分享的博客)转载请保留此处和链接!

地址:

必填

选填

选填

必填

◎已有 0 人评论,请发表您的观点。