How to realize the gradual and fading version of broadcast Picture by js
This article will explain in detail how to realize the fade-out version of js. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.
The specific code is as follows:
Document * {margin:0; padding:0; font-size:14px;-webkit-user-select:none;} ul,li {list-style} img {display: block; border:none;} .banner {position:relative; width:1000px; height:300px; margin:0 auto; overflow:hidden } .banner .bannerbread {width:100%; height:100%; background:url (".. / img/default.gif") no-repeat center center # e1e1e1;} .banner .bannerbread div {position:absolute; width:100%; height:100%; top:0; left:0; z indexl0; opacity:0; filter:alpha (opacity=0) } .banner .bannerTip {display:none; width:100%; height:100%s;} .banner .bannerTip {position:absolute; height:18px; overflow:hidden; right:20px; bottom:20px; zMurindex10;} .banner .bannerTip li {float:left; margin-left:10px; width:18px; height:18px Background:lightblue; cursor:pointer; border-radius:50%;} .banner .bannerTip li.bg {background:red;} .banner a {display:none; position:absolute; top:50%; zbride index20; margin-top:-22.5px; width:30px; height:45px; background:url (".. / img/pre.png") Opacity:0.5; filter:alpha (opacity=50);} .banner a:hover {opacity:1; filter:alpha (opacity=100);} .banner a.bannerLeft {left:20px; background-position:0 0;} .banner a.bannerRight {right:20px; background-position:-50px 0;}
Var banner = document.getElementById ('banner'); var bannerInner = utils.firstChild (banner), bannerTip = utils.children (banner, "ul") [0], bannerLink = utils.children (banner,'a'), bannerLeft = bannerLink [0], bannerRight = bannerLink [1]; var divList = bannerInner.getElementsByTagName (' div'); var imgList = bannerInner.getElementsByTagName ('img'); var oLis = bannerTip.getElementsByTagName (' li'); / / 1, Ajax read data var jsonData = null ~ function () {var xhr = new XMLHttpRequest; xhr.open ("get", "json/banner.txt?_=" + Math.random (), false) Xhr.onreadystatechange = function () {if (xhr.readyState = = 4 & & / ^ 2\ d {2} $/ .test (xhr.status)) {jsonData = utils.formatJSON (xhr.responseText)}} xhr.send (null)} () / / 2, data binding ~ function () {var str = "", str2 = "" If (jsonData) {for (var I = 0reginal jsonData.futhteri)
