代码简单，直接上：
<!DOCTYPE html><html><head> ???<title>轮播</title> ???<meta charset="utf-8"> ???<style type="text/css"> ???*{ ???????padding:0; ???????margin:0; ???} ???????.mainCss{ ???????????width:100px; ???????????height: 200px; ???????????position: relative; ???????????overflow: hidden; ???????} ???????ul{ ???????????width:300px; ???????????height: 200px; ???????????position: absolute; ???????} ???????ul li{ ???????????float: left; ???????????width: 100px; ???????????height: 200px; ???????????list-style: none; ???????????text-decoration: none; ???????} ???</style></head><body> ???<div class="mainCss" id="main"> ???????<ul id="list"> ???????????<li style="background: red"></li> ???????????<li style="background: blue"></li> ???????????<li style="background: yellow"></li> ???????</ul> ???</div> ???<script type="text/javascript"> ???????????????var list=document.getElementById(‘list‘); ???????var left=0; ???????//移动 ???????var move=function(){ ???????????if(left===-200){ ???????????????left=0; ???????????}else{ ???????????????left-=100; ???????????} ???????????list.style.left=left+‘px‘ ???????} ???????????setInterval(move,1000) ???????//document.addEventListener(‘click‘,move) ???</script></body></html>原生js实现一个简单轮播效果
原文地址：https://www.cnblogs.com/xingguozhiming/p/8972302.html