Title * { margin: 0; padding: 0; } #box { width: 700px; height: 300px; border: 1px solid #ccc; margin: 20px auto; position: relative; overflow: hidden; } /* .box:hover .right-a,.box:hover .left-a{ display: block; }*/ #box #title { height: 30px; width: 100%; background: #eee; position: relative; } #box #title a { text-decoration: none; width: 20%; height: 100%; line-height: 30px; font-size: 15px; color: #009797; float: left; text-align: center; position: relative; } #box #content { width: 700px; height: 270px; position: relative; } #box #content #main{ width:3500px; height: 270px; position: absolute; left:0; top:0; } #box #content #main div { width: 700px; height: 270px; float: left; color: white; font-size: 50px; text-align: center; line-height: 270px; } #box #left-a { height: 70px; width: 50px; background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; top: 45%; color: white; font-size: 20px; line-height: 70px; text-align: center; cursor: pointer; display: none; } #box #right-a { height: 70px; width: 50px; background: rgba(0, 0, 0, 0.5); position: absolute; top: 45%; right: 0; color: white; font-size: 20px; line-height: 70px; text-align: center; cursor: pointer; display: none; } #box #content #main #color1 { background: #ffb12f; } #box #content #main #color2 { background: #00C378; } #box #content #main #color3 { background: #26B2E3; } #box #content #main #color4 { background: #E84C3D; } #box #content #main #color5 { background: #F831FD; } 1 2 3 4 5
page1
page2
page3
page4
page5
<
>
下面是js的内容window.onload = function () { var box = document.getElementById('box'); var oTitle = document.getElementById('title'); var links = oTitle.getElementsByTagName('a'); var float = document.getElementById('float'); var oContent = document.getElementById('content'); //var divs = oContent.getElementsByTagName('div'); var oLeft = document.getElementById('left-a'); var oRight = document.getElementById('right-a'); var oMain = document.getElementById('main'); var timer = null; var num1 = 0; var num2 = 0; box.onmouseover = function () { oLeft.style.display = 'block'; oRight.style.display = 'block'; } box.onmouseout = function () { oLeft.style.display = 'none'; oRight.style.display = 'none'; } for(var i=0;i |
天盟APP下载
