<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
???<title>原生js实现轮播图</title>
<meta charset="utf-8" />
???<style>
???????html,body, div, ul, li, a {
???????margin:0;padding:0;
???????}
???????a{text-decoration:none;}
???????li{list-style:none;}
???????.container{
???????????width:520px;
???????????height:280px;
???????????position:relative;
???????????overflow:hidden;
???????????margin:100px auto;
???????????background:#ccc;
???????????box-shadow:0 0 5px #ffd800;
???????}
???????.warp{
??????????height:280px;
??????????position:absolute;
??????????left:0;
??????????top:0;
??????????z-index:1;
???????}
???????.warp img{
???????????float:left;
???????????width:520px;
???????????height:280px;
???????}
???????.container .buttons{
???????????position:absolute;
???????????bottom:10px;
???????????height:10px;
???????????width:100%;
???????????z-index:2;
???????????left:40%;
???????}
???????.container .buttons span{
???????????display:inline-block;
???????????width:20px;
???????????height:20px;
???????????border-radius:50%;
???????????background:#ff0000;
???????????color:#fff;
???????????text-align:center;
???????????cursor:pointer;
???????}
????????.container .buttons span.on{
????????????background:#808080;
????????}
???????.container .arrow{
???????????position:absolute;
???????????color:#fff;
???????????padding:0px 6px;
???????????border-radius:50%;
???????????background:rgba(0, 0, 0,1);
???????????font-size:20px;
???????????z-index:2;
???????????top:48%;
???????}
???????.container .arrow_left{
???????????left:10px;
???????}
???????.container .arrow_right{
???????????right:10px;
???????}
???</style>
</head>
<body>
???<div class="container">
???????<div class="warp" style="left:-520px">
???????????<!--实现无缝滚动，需要在首尾分别添加一张过渡图片-->
???????????<img src="http://fpoimg.com/520x280?text=four" ?/>
???????????<img src="http://fpoimg.com/520x280?text=one" ?/>
???????????<img src="http://fpoimg.com/520x280?text=two" ?/>
???????????<img src="http://fpoimg.com/520x280?text=three" ?/>
???????????<img src="http://fpoimg.com/520x280?text=four" ?/>
???????????<img src="http://fpoimg.com/520x280?text=one" ?/>
???????</div>
???????<div class="buttons">
???????????<span class="on">1</span>
???????????<span>2</span>
???????????<span>3</span>
???????????<span>4</span>
???????</div>
???????<a href="#" class="arrow arrow_left"><</a>
???????<a href="#" class="arrow arrow_right">></a>
???</div>
???<script>
???????var container = document.querySelector(".container");
???????var warp = document.querySelector(".warp");
???????var next = document.querySelector(".arrow_right");
???????var prev = document.querySelector(".arrow_left");
???????var dots = document.getElementsByTagName("span");
???????var index = 0;
???????var timer = null;
???????function next_pic() {
???????????var newLeft;
???????????index++;
???????????if (index > 3) {
???????????????index = 0;
???????????}
???????????showCurrentDot();
???????????if (warp.style.left === "-2600px") {/*520*5=2600*/
???????????????newLeft = -1040; /*520*2=1040*/
???????????} else {
???????????????newLeft = parseInt(warp.style.left) - 520;
???????????}
???????????warp.style.left = newLeft + "px";
???????}
???????function autoPlay(){
???????????timer = setInterval(function() {
???????????????next_pic();
???????????}, 2000);
???????}
???????autoPlay();
???????function prev_pic() {
???????????index--;
???????????if (index < 0) {
???????????????index = 3;
???????????}
???????????showCurrentDot();
???????????if (warp.style.left === "0px") {
???????????????newLeft = -1560;/*520*3=1560*/
???????????} else {
???????????????newLeft = parseInt(warp.style.left) + 520;
???????????}
???????????warp.style.left = newLeft + "px";
???????}
???????next.onclick = function () {
???????????next_pic();
???????}
???????prev.onclick = function () {
???????????prev_pic();
???????}
???????container.onmouseenter = function () {
???????????clearInterval(timer);
???????}
???????container.onmouseleave = function () {
???????????autoPlay();
???????}
???????function showCurrentDot() {
???????????for (var i = 0, len = dots.length;i<len;i++){
???????????????dots[i].className="";
???????????}
???????????dots[index].className = "on";
???????}
???????for (var i = 0, len = dots.length; i < len; i++) {
???????????//自执行匿名函数,常见格式：(function() { /* code */ })();
???????????(function (i) {
???????????????dots[i].onclick = function () {
???????????????????var dis = index - i;
???????????????????if (index == 3 && parseInt(warp.style.left!==-2080)) {/*520*4=2080*/
???????????????????????dis = dis - 4;
???????????????????}
???????????????????if (index == 0 && parseInt(warp.style.left !== -520)) {
???????????????????????dis = 4 + dis;
???????????????????}
???????????????????warp.style.left = (parseInt(warp.style.left) + dis * 520) + "px";
???????????????????index = i;
???????????????????showCurrentDot();
???????????????}
???????????})(i);
???????}
???</script>
</body>
</html>
js原生实现选项卡
原文地址：http://www.cnblogs.com/gaoyueliu/p/7589014.html