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

This article mainly shows you "how to achieve special effects in native js". The content is easy to understand and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "how to achieve special effects in native js".

First, the css code

A {text-decoration:none;color:#3DBBF5;} * {margin: 0; padding: 0;} .wrapper {width: 400px; height: 300px; margin: 100px auto;} # lunbo {position: relative; overflow: hidden;} # list {position: relative; white-space: nowrap / / this block is simulated with line elements, so this attribute is used. Block elements can modify the block} # list span {display: inline-block; width: 400px; height: 300px; text-align: center; line-height: 300px; font-weight: bold; font-size: 100px; color: # fff;} # buttons {position: absolute; bottom: 0; text-align: center Width: 100%; height: 40px; line-height: 40px;} # buttons span {display: inline-block; width: 15px; height: 5px; background: # fff; margin: 010px; cursor: pointer; transition: all .5s;} # buttons span.on {height: 20px;} .arrow {position: absolute; top: 50%; transform: translateY (- 50%) Font-size: 80px; font-weight: bold; color: # fff; opacity: .3; transition: all .5s;} .wrapper: hover .arrow {opacity: 1;} # prev {left: 10px;} # next {right: 10px;}

Then the HTML code

5123451

Finally, js code

_ window.onload=function () {var lunBo = document.getElementById ("lunbo"); var list = document.getElementById ("list"); var btn = document.getElementById ("buttons"). GetElementsByTagName ('span'); var prev = document.getElementById ("prev"); var next = document.getElementById (' next'); var interval = 3000; var timer; var index = 1; var animated = false; for

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.