Shulou(Shulou.com)06/01 Report--

This article mainly introduces the "html and css how to achieve picture scrolling switching effect" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "html and css how to achieve picture scrolling switching effect" article can help you solve the problem.

HTML:

Continuous picture scrolling online demo-W3C $(function () {$('# Marquee_x'). JcMarquee ({'marquee':'x','margin_right':'10px','speed':10});})

W3cschool

Presentation content

Presentation content

Presentation content

Presentation content

Presentation content

Presentation content

Presentation content

Presentation content

In the above html code, each group of DIV corresponds to the picture and text data, which can be increased or decreased as needed. The margin_right attribute controls the distance between the picture and text, and the speed attribute controls the speed of rotation.

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:20px auto;border:1px solid # 000; padding:2px} # Marquee_x {overflow:hidden; width:900px} # Marquee_x ul li, # Marquee_x ul li div {float:left;line-height:25px;overflow:hidden} # Marquee_x ul li div {float:left;line-height:25px;height:130px; width:140px Overflow:hidden} # Marquee_x ul li div img {border:1px solid # DADADA; width:130px; height:100px; display:block} # Marquee_x ul li div span {display:block;} about "how html and css achieve picture scrolling switching effect", thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.