本文实例讲述了js实现可切换图片的幻灯切换效果。分享给大家供大家参考,具体如下:
本文实例讲述了js实现可切换图片的幻灯切换效果。分享给大家供大家参考,具体如下:
js切换图片幻灯切换效果body, div, ul, li { margin: 0; padding: 0; } ul { list-style-type: none; } body { background: #000; text-align: center; font: 12px/20px arial; } #box { position: relative; width: 322px; height: 172px; background: #fff; border-radius: 5px; border: 8px solid #fff; margin: 10px auto; } #box .list { position: relative; width: 320px; height: 240px; overflow: hidden; border: 1px solid #ccc; } #box .list li { position: absolute; top: 0; left: 0; width: 320px; height: 240px; opacity: 0; filter: alpha(opacity=0); } #box .list li.current { opacity: 1; filter: alpha(opacity=100); } #box .count { position: absolute; right: 0; bottom: 5px; } #box .count li { color: #fff; float: left; width: 20px; height: 20px; cursor: pointer; margin-right: 5px; overflow: hidden; background: #f90; opacity: 0.7; filter: alpha(opacity=70); border-radius: 20px; } #box .count li.current { color: #fff; opacity: 1; filter: alpha(opacity=100); font-weight: 700; background: #f60; } #tmp { width: 100px; height: 100px; background: red; position: absolute; }window.onload = function() { var obox = document.getelementbyid("box"); var aul = document.getelementsbytagname("ul"); var aimg = aul[0].getelementsbytagname("li"); var anum = aul[1].getelementsbytagname("li"); var timer = play = null; var i = index = 0; var border = true; //切换按钮 for(i = 0; i