html和css怎么实现图片滚动切换效果

魁首哥

作者

html和css怎么实现图片滚动切换效果

这篇文章主要介绍“html和css怎么实现图片滚动切换效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“html和css怎么实现图片滚动切换效果”文章能帮助大家解决问题。

HTML：

<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>不间断图片滚动在线演示-W3Cschool</title><linkhref="images/style.css"rel="stylesheet"type="text/css"/><scripttype="text/javascript"src="jquery-1.7.2.min.js"></script><scriptsrc="jQuery-jcMarquee.js"type="text/javascript"></script><script>$(function(){$('#Marquee_x').jcMarquee({'marquee':'x','margin_right':'10px','speed':10});});</script></head><body><divid="mrq"><divid="Marquee_x"><ul><li><div><ahref="https://www.yisu.com/"target="_blank"><imgsrc="images/1.jpg"/><span>w3cschool</span></a></div><div><ahref="#"target="_blank"><imgsrc="images/2.jpg"/><span>演示内容</span></a></div><div><ahref="#"target="_blank"><imgsrc="images/3.jpg"/><span>演示内容</span></a></div><div><ahref="#"target="_blank"><imgsrc="images/4.jpg"/><span>演示内容</span></a></div><div><ahref="#"target="_blank"><imgsrc="images/5.jpg"/><span>演示内容</span></a></div><div><ahref="#"target="_blank"><imgsrc="images/6.jpg"/><span>演示内容</span></a></div><div><ahref="#"target="_blank"><imgsrc="images/7.jpg"/><span>演示内容</span></a></div><div><ahref="#"target="_blank"><imgsrc="images/8.jpg"/><span>演示内容</span></a></div><div><ahref="#"target="_blank"><imgsrc="images/9.jpg"/><span>演示内容</span></a></div></li></ul></div></div></body></html>

在以上的html代码中，每组DIV对应图文数据，可按需增减，margin_right属性控制图文的间距，speed属性控制轮播的速度。

CSS：

@charset"utf-8";/*www.yisu.com*/body,div,ul,li{margin:0;padding:0;font-style:normal;font:12px/22px"\5B8B\4F53",Arial,Helvetica,sans-serif}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:900px;margin:20pxauto;border:1pxsolid#000;padding:2px}#Marquee_x{overflow:hidden;width:900px}#Marquee_xulli,#Marquee_xullidiv{float:left;line-height:25px;overflow:hidden}#Marquee_xullidiv{float:left;line-height:25px;height:130px;width:140px;overflow:hidden}#Marquee_xullidivimg{border:1pxsolid#DADADA;width:130px;height:100px;display:block}#Marquee_xullidivspan{display:block;}

关于“html和css怎么实现图片滚动切换效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注恰卡编程网行业资讯频道，小编每天都会为大家更新不同的知识点。

阅读全文

发布于 2022-03-13 23:40:58