案例---左右焦点轮播图(tb)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style> body, ul, ol, li, img { margin: 0; padding: 0; list-style: none; } #box { width: 520px; height: 280px; padding: 5px; position: relative; border: 1px solid #ccc; margin: 100px auto 0; } .ad { width: 520px; height: 280px; /*overflow: hidden;*/ position: relative; } #box img { width: 520px; } .ad ol { position: absolute; right: 10px; bottom: 10px; } .ad ol li { width: 20px; height: 20px; line-height: 20px; border: 1px solid #ccc; text-align: center; background: #fff; float: left; margin-right: 10px; cursor: pointer; _display: inline; } .ad ol li.current { background: yellow; } .ad ul li { float: left; } .ad ul { position: absolute; top: 0; width: 2940px; } .ad ul li.current { display: block; } #focusd { display: none; } #focusd span { width: 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background: #000; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑体'; font-size: 30px; color: #fff; opacity: 0.3; border: 1px solid #fff; } #focusd #right { right: 5px; left: auto; } </style> </head> <body> <div id="box" class="all"> <div class="ad"> <ul id="imgs"> <li><img src="images/01.jpg" /></li> <li><img src="images/02.jpg" /></li> <li><img src="images/03.jpg" /></li> <li><img src="images/04.jpg" /></li> <li><img src="images/05.jpg" /></li> </ul> </div> <!--相框--> <div id="focusd"><span id="left"><</span><span id="right">></span> </div> </div> <script src="common.js"></script> <script> //获取最外面的div var box = my$("box"); //获取相框 var ad = box.children[0]; //获取相框的宽度 var imgwidth = ad.offsetwidth; //获取ul var ulobj = ad.children[0]; //获取装span左右焦点的div var focusd = my$("focusd"); //显示和隐藏左右焦点的div----为box注册事件 box.onmouseover = function () { focusd.style.display = "block"; }; box.onmouseout = function () { focusd.style.display = "none"; }; //点击右边的按钮 var index = 0; my$("right").onclick = function () { if (index < ulobj.children.length - 1) { index++; animate(ulobj, -index * imgwidth); } }; //点击左边的按钮 my$("left").onclick = function () { if (index > 0) { index--; animate(ulobj, -index * imgwidth); } }; </script> </body> </html>