效果如下：
1.css代码
<style> #wrapperslide{ height:220px;margin:0 auto;overflow:hidden;width:1200px;position: relative; } .mr_frBtnL{cursor:pointer;display:inline;height:46px;width:28px;position: absolute;left: 0;top: 67px;z-index: 100;} .mr_frBtnR{float:right;cursor:pointer;width:28px;height:46px;position: absolute;right: 0;top: 67px;z-index: 100;} #wrapperslide .over{} #wrapperslide ul { transition: all ease 1s; padding: 0; } #wrapperslide li{ text-align: center; float: left; width: 300px; list-style: none; } #wrapperslide li p{ padding: 0 30px; } #wrapperslide li img{ width:240px; height: 120px; } </style>2.html代码 <body> <div id="wrapperslide" > <img class="mr_frBtnL " id="leftbtn" src="mfrl.gif" /> <img class="mr_frBtnR " id="rightbtn" src="mfrr.gif" /> <div class="over"> <ul> <li> <img src="2.jpg"/> <p>1</p> </li> <li> <img src="2.jpg"/> <p>2</p> </li> <li> <img src="2.jpg"/> <p>3</p> </li> <li> <img src="2.jpg"/> <p>4</p> </li> <li> <img src="2.jpg"/> <p>5</p> </li> <li> <img src="2.jpg"/> <p>6</p> </li> <li> <img src="2.jpg"/> <p>7</p> </li> <li> <img src="2.jpg"/> <p>8</p> </li> <li> <img src="2.jpg"/> <p>9</p> </li> </ul> </div> </div> </body>3.js代码 <script type="text/javascript"> window.οnlοad=function(){ var start=0; var time1=null; var od=document.getElementById("wrapperslide"); var leftbtn=document.getElementById("leftbtn"); var rightbtn=document.getElementById("rightbtn"); var au=od.getElementsByTagName('ul')[0]; var ali=au.getElementsByTagName('li'); au.innerHTML=au.innerHTML; au.style.width=(ali[0].offsetWidth)*ali.length+'px'; rightbtn.οnclick=function(){ if(start == -1500){ start=0; au.style.transform='translatex('+start+'px)'; }else{ start-=300; au.style.transform='translatex('+start+'px)'; } } leftbtn.οnclick=function(){ if(start == 0){ start=-1500; au.style.transform='translatex('+start+'px)'; }else{ start+=300; au.style.transform='translatex('+start+'px)'; } } } </script>ok，到这一步一个简单的轮播就好了，每次点击移动一张4.如果想要单个的，这样的将wrapperslide的width调小就ok了；就成了这样
5.如果想要自动的，那么加上下面这段js：
function run(){ time1=setInterval(function(){ rightbtn.click(); },2000) } run() od.οnmοuseοver=function(){ clearInterval(time1) } od.οnmοuseοut=function(){ run() }
