首先上图
基本思路如下
1.需要轮播的东西，放li里面 浮动成一行展示，然后在li上面有一个小视窗（ul的父级） 父级设置overflow: hidden,
这样 咱们就可以 让ul设置绝对定位 ，只需要调整left值让ul移动，移动就会出现在视窗。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{list-style: none;margin:0; padding: 0} .content{width: 400px;height: 200px;overflow: hidden;border:1px solid red;margin:0 auto;position: relative;text-align: center;} img{width: 400px;} ul{height: 200px;width: 2000px;position: absolute;top: 0} li{float: left;width: 400px;display: inline-block} .cir{position: absolute;width: 400px;height: 20px;bottom: 0px;margin:0 auto;z-index: 1;color:white;text-align: center;background: rgba(50, 10, 10, 0.8);} span{ display: inline-block;font-size: 16px; } .control{display: none} .control strong{ position: absolute;top: 40%;z-index: 1;color: #D10796; font-size: 30px;background:rgba(162,162,162,0.5);vertical-align: 20px; } .content:hover .control {display: inline;} .control strong:nth-child(1){left: 10px} .control strong:nth-child(2){right: 10px} </style> </head> <body> <div class="content"> <div class="control"> <strong><</strong> <strong>></strong> </div> <div class="cir"> <span>a1</span> <span>a2</span> <span>a3</span> <span>a4</span> <span>a5</span> </div> <ul> <li><img src="http://m.jjchfcyy.cn/zt2/pinpai%20108.png" alt=""></li> <li><img src="http://m.jjchfcyy.cn/zt2/chbaanner.jpg" alt=""></li> <li><img src="http://m.jjchfcyy.cn/zt2/chbaanner.jpg" alt=""></li> <li><img src="http://m.jjchfcyy.cn/zt2/zt5.jpg" alt=""></li> <li><img src="http://m.jjchfcyy.cn/zt2/zt6.jpg" alt=""></li> </ul> </div> <script> var strong=document.getElementsByTagName("strong"); var div=document.getElementsByTagName('div'); var ul=document.getElementsByTagName('ul')[0]; var span=document.getElementsByTagName('span'); var len= span.length; var timer = setInterval(function () { ul.style.left=parseInt( window.getComputedStyle(ul, null).left)-400+"px"; if ( window.getComputedStyle(ul, null).left=="-2000px") { ul.style.left="0px"; } },1800) for (var i = 0;i< len;i++) { (function (i) { span[i].onclick=function () { ul.style.left=i*(-400)+"px"; } }(i)) } strong[0].onclick=function () { ul.style.left=parseInt( window.getComputedStyle(ul, null).left)+400+"px"; if ( window.getComputedStyle(ul, null).left=="400px") { ul.style.left="-1600px"; } } strong[1].onclick=function () { ul.style.left=parseInt( window.getComputedStyle(ul, null).left)-400+"px"; if ( window.getComputedStyle(ul, null).left=="-2000px") { ul.style.left="0px"; } } </script> </body> </html>