运行效果截图如下：
具体代码如下：
<!DOCTYPE html> <html> <head> <title>wheel</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script type="text/javascript" > var currentShowPageIndex = 0; var animateTimeout = null; var isWheelAnimating = false; var isWheelUp = function(event) { event = event || window.event; var up = true; if(event.wheelDelta){//IE/Opera/Chrome up = event.wheelDelta / 120 == 1 ? true : false; }else{//Firefox up = event.detail / 3 == 1 ? true : false; } return up; } var changeBar = function(prevIndex, index) { var barUl = document.getElementById('barUl'); var barLiList = barUl.getElementsByTagName('li'); barLiList[prevIndex].className = ""; barLiList[index].className = "active"; } var changePage = function(pageIndex) { var showPageUl = document.getElementById('wheelUl'); changeBar(currentShowPageIndex, pageIndex); currentShowPageIndex = pageIndex; var left = -(currentShowPageIndex) * 1000; showPageUl.style.marginLeft = left + "px"; return; } var animate = function(obj, mode, from, to){ if(animateTimeout) { clearTimeout(animateTimeout); } if(mode == "left") { if(from > to) { from = from - 50; obj.style.marginLeft = (from) + "px"; setTimeout(function(){ animate(obj, mode, from, to); }, 30); } else { isWheelAnimating = false; } return; } if(from < to) { from = from + 50; obj.style.marginLeft = (from) + "px"; setTimeout(function(){ animate(obj, mode, from, to); }, 30); } else { isWheelAnimating = false; } } var mouseWheel = function(event) { if(isWheelAnimating) { return; } isWheelAnimating = true; var wheelUp = isWheelUp(event); var showPageUl = document.getElementById('wheelUl'); var showPageUlWidth = parseInt(showPageUl.offsetWidth); var showPageLiList = showPageUl.getElementsByTagName('li'); var showPageLiListLength = showPageLiList.length; var wheelWrapperLeft = parseInt(document.getElementById('wheelWrapper').offsetLeft); if(wheelUp && currentShowPageIndex < showPageLiListLength - 1) { changeBar(currentShowPageIndex, currentShowPageIndex + 1); currentShowPageIndex ++; var left = -(currentShowPageIndex) * 1000; //animate(showPageUl, "right", -(currentShowPageIndex - 1) * 1000, -(currentShowPageIndex - 1) * 1000); var from = -(currentShowPageIndex - 1) * 1000; var to = -(currentShowPageIndex) * 1000; animate(showPageUl, "left", from, to); return; } if(!wheelUp && currentShowPageIndex > 0) { changeBar(currentShowPageIndex, currentShowPageIndex - 1); currentShowPageIndex --; var from = -(currentShowPageIndex + 1) * 1000; var to = -(currentShowPageIndex) * 1000; animate(showPageUl, "right", from, to); return; } isWheelAnimating = false; }; if(document.addEventListener){ document.addEventListener('DOMMouseScroll',function(event) { mouseWheel(event); },false); } document.onmousewheel = function(event) { mouseWheel(event); } window.onload = function(){ var barUl = document.getElementById('barUl'); var barLiList = barUl.getElementsByTagName('li'); for(var i=0,length=barLiList.length; i<length; i++) { (function(index){ barLiList[index].onclick = function(){ changePage(index); }; })(i); } } </script> <style type="text/css" > body { background:#494949; margin:0; } ul { list-style:none; margin:0; padding:0; } li { float:left;} #wheelWrapper { width:1000px; height:550px; margin:0 auto; position:fixed; left:50%; margin-left:-505px; bottom:50px; overflow:hidden; } #wheelUl { width:5050px; height:500px; } #barUl { clear:both; margin:0 auto; width:550px; margin-top:20px; line-height:25px; } #barUl>li { width:100px; background:orange; height:25px; margin-right:10px; border-radius:5px; text-align:center; -webkit-border-radius:5px; -moz-border-radius:5px; } #barUl>li:hover { background:#C36C12; } #barUl>li[class=active] { background:#C36C12; } #wheelUl>li { width:1000px; } .wheel { width:994px; height:500px; background:#FAAA3C; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; margin:0 auto; line-height:300px; font-size:100px; text-align:center; } .radius { border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; } h1 { text-align:center; color:#fff; } </style> </head> <body> <h1 >ie8+,chrome,ff提供支持</h1> <div> <div> <ul > <li > <div> 1_page1 </div> </li> <li > <div> 2_page2 </div> </li> <li > <div> 3_page3 </div> </li> <li > <div> 4_page4 </div> </li> <li > <div> 5_page5 </div> </li> </ul> <ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ul> </div> </div> </body> </html>