效果图:
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; border:none; } li{ list-style: none; } #box{ height:340px; width:790px; position: relative; margin:100px auto; } #box #list1{ height:340px; width:790px; } #box #list1 li{ font-size: 80px; line-height: 340px; text-align: center; height:340px; width:790px; position: absolute; left:0; top:0; opacity: 0; filter: alpha(opacity=0); } #box #list1 li img{ height:340px; width:790px; } #shang,#xia{ height:80px; width:50px; color:#212121; background: #ccc; font-size: 60px; font-weight: bold; line-height: 80px; text-align: center; position: absolute; top:130px; opacity: 0.8; filter: alpha(opacity=80); cursor: pointer; } #shang{ left:0; } #xia{ right:0; } #box #list2{ height:20px; width:195px; position: absolute; left:297px; bottom:25px; opacity: 0.8; filter: alpha(opacity=80); } #box #list2 li{ height:20px; width:20px; background: #ccc; border-radius: 50%; float: left; margin-right:5px; cursor: pointer; } #box #list2 li.active{ background: black; } </style> <script type="text/javascript"> onload = function(){ var oBox = document.getElementById('box'); var oLIst1 = document.getElementById('list1'); var aLi1 = oLIst1.getElementsByTagName('li'); var oLIst2 = document.getElementById('list2'); var aLi2 = oLIst2.getElementsByTagName('li'); var oShang = document.getElementById('shang'); var oXia = document.getElementById('xia'); aLi1[0].style.opacity = 1; aLi1[0].style.filter = 'alpha(opacity=100)'; var size = aLi1.length; var i = 0; var timer = setInterval(function(){ i ++; move(); },2000); function move(){ if(i >= size){ i = 0 } if(i < 0){ i = size-1; } for(var j = 0; j < aLi1.length; j ++){ if(j == i){ animate(aLi1[j],{opacity:100}); aLi2[j].className = 'active'; }else{ animate(aLi1[j],{opacity:0}); aLi2[j].className = ''; } } } //前一张 oShang.onclick = function(e){ var evt = e || event; evt.preventDefault(); i --; move(); } //后一张 oXia.onclick = function(e){ var evt = e || event; evt.preventDefault(); i ++; move(); } //下面的圆点 for(var k = 0;k < aLi2.length; k ++){ aLi2[k].index = k; aLi2[k].onmouseenter = function(){ i = this.index; move(); } } oBox.onmouseenter = function(){ clearInterval(timer); } oBox.onmouseleave = function(){ timer = setInterval(function(){ i ++; move(); },2000); } /*************************缓冲运动 可封装留着以后备用^_^*************************/ function getStyleAttr(obj, attr){ if (window.getComputedStyle){ return getComputedStyle(obj, null)[attr]; } else { return obj.currentStyle[attr]; } } function animate(obj, json, fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var bStop = true; for (var attr in json){ var iTarget = json[attr]; var current; if (attr == "opacity"){ current = parseFloat(getStyleAttr(obj, attr))*100; current = Math.round(current); } else { current = parseFloat(getStyleAttr(obj, attr)); current = Math.round(current); } var speed = (iTarget-current)/8; (400-393)/8 speed = speed>0 ? Math.ceil(speed) : Math.floor(speed); if (current != iTarget){ bStop = false; } if (attr == "opacity"){ obj.style[attr] = (current+speed)/100; obj.style.filter = "alpha(opacity=" + (current+speed) + ")"; } else { obj.style[attr] = current+speed + "px"; } } if (bStop){ console.log("停止运动"); clearInterval(obj.timer); if (fn) { fn(); } } }, 30); } } </script> </head> <body> <div id="box"> <ul id="list1"> <li >1</li> <li >2</li> <li >3</li> <li >4</li> <li >5</li> <li >6</li> <li >7</li> <li >8</li> </ul> <ul id="list2"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li ></li> </ul> <div id="shang"> < </div> <div id="xia"> > </div> </div> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持亿速云!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。