思路：设置父容器（一定宽度，一定高度，相对定位，子容器超出部分进行隐藏），子容器图片并排（浮动，绝对定位，每次点击进行相应的左或右偏移量）
1.html:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<title>Carousel figure</title> 5 ????<meta charset="utf-8"> 6 ????<!-- 浏览器标签页显示图标 --> 7 ????<link rel="icon" type="image/x-icon" href="./images/1.jpg"> 8 ????<link rel="stylesheet" type="text/css" href="1.css"> ???????9 </head>10 <body>11 ????<!-- 构建container父容器 -->12 ????<div class="container">13 ????????<!-- 图片部分,style部分设置便于js中改变偏移量，从而实现图片轮播-->14 ????????<div class="pic" style="left: 0px;">15 ????????????<!-- 图片部分，建议均加上alt，利于seo -->16 ????????????<img src="./images/1.jpg" alt="1">17 ????????????<img src="./images/2.jpg" alt="2">18 ????????????<img src="./images/3.jpg" alt="3">19 ????????????<img src="./images/4.jpg" alt="4">20 ????????????<img src="./images/5.jpg" alt="5">21 ????????????<img src="./images/6.jpg" alt="6">22 ????????</div>23 ????????24 ????????<!-- 箭头部分，实现下一张，上一张效果 -->25 ????????<a href="javascript:void(0)" class="arrow arrow_left"><</a>26 ????????<a href="javascript:void(0)" class="arrow arrow_right">></a>27 ????????28 ????????<!-- 当前图片id显示 -->29 ????????<div class="point">30 ????????????<span class="on">1</span>31 ????????????<span>2</span>32 ????????????<span>3</span>33 ????????????<span>4</span>34 ????????????<span>5</span>35 ????????????<span>6</span>36 ????????</div>37 ????</div>38 ????39 ????<!-- html body部分加载完成，最后调用js,进行操作；否则无法有效操作 -->40 ????<script type="text/javascript" src="1.js"></script>41 </body>42 </html>
1.css:
1 /* body部分清一下外边距与内边距，不建议*（可能影响效率），主流大网站均未采用*进行清边距 */ 2 body{ 3 ????margin: 0; 4 ????padding: 0; 5 } 6 a{ 7 ????text-decoration: none; 8 ????color: green; 9 }10 a:visited{11 ????color: siver;12 }13 a:hover{14 ????color: gold;15 }16 17 .container{18 ????/* container采用相对定位relative，便于子容器进行绝对定位absolute */19 ????position: relative;20 21 ????/* 左右居中对齐 */22 ????margin: 0 auto;23 24 ????/* 每张图片的宽度高度均为320px, */25 ????width: 320px;26 ????height: 320px;27 ????/* 图片超出部分隐藏 */28 ????overflow: hidden;29 ????/* border: 1px solid ?*/30 ????/* 设置阴影：水平阴影偏离0，垂直阴影偏移0，模糊距离10px，颜色 */31 ????box-shadow: 0 0 10px orange;32 }33 .pic{34 ????position: absolute;35 ????/* 6张图片进行排放，故宽度为1920px */36 ????width: 1920px;37 ????height: 320px;38 }39 .pic img{40 ????/* 设置左浮动，使6张图片排成一排 */41 ????float: left;42 ????width: 320px;43 ????height: 320px;44 }45 .arrow{46 ????display: block;47 48 ????border-radius: 50%;49 ????/* 采用字符实体，故设置字体使用font-size */50 ????font-size: 60px;51 ????默认隐藏箭头，52 ????display: none;53 }54 /* 当悬浮在container区域显示箭头 */55 .container:hover .arrow{56 ????display: block;57 }58 /* 当悬浮在arrow区域显示箭头 */59 .container .arrow:hover{60 ????background-color: rgba(0, 0, 0, 0.2);61 }62 .arrow_left{63 ????position: absolute;64 ????left: 30px;65 ????top: 40%;66 ????text-align: center;67 ????width: 80px;68 ????height: 80px;69 }70 .arrow_right{71 ????position: absolute;72 ????right: 30px;73 ????top: 40%;74 ????text-align: center;75 ????width: 80px;76 ????height: 80px;77 }78 .point{79 ????position: absolute;80 ????margin: 280px auto 0 80px;81 }82 .point span{83 ????display: inline-block;84 ????width: 30px;85 ????height: 30px;86 ????border-radius: 50%;87 ????background-color: orange;88 ????text-align: center;89 ????cursor: pointer;90 }91 .point span.on{92 ????background-color: red;93 }94 .point span:active{95 ????background-color: gold;96 }1.js:
1 // 获取pic组第一个 2 var pic = document.getElementsByClassName(‘pic‘)[0]; 3 // 获取arrow_left 4 var arrow_left = document.getElementsByClassName(‘arrow_left‘)[0]; 5 // 获取arrow_right 6 var arrow_right = document.getElementsByClassName(‘arrow_right‘)[0]; 7 // 获取span组 8 var points=document.getElementsByTagName(‘span‘); 9 var index=0;10 11 // 点击右箭头，下一张图片12 arrow_right.onclick = function() {13 ????next_pic();14 }15 // 点击左箭头，上一张图片16 arrow_left.onclick = function() {17 ????prev_pic();18 }19 20 // 函数实现下一张浏览效果21 function next_pic() {22 ????// 最后一张，下一张变为第一张（left值为0）23 ????if (parseInt(pic.style.left) === -1600) {24 ????????pic.style.left = 0 + "px";25 ????} else {26 ????????// 下一张27 ????????var pos = parseInt(pic.style.left) - 320;28 ????????pic.style.left = pos + ‘px‘;29 ????}30 ????index++;31 ????if(index>5){32 ????????index=0;33 ????}34 ????showPoint();35 }36 37 function prev_pic() {38 ????if (parseInt(pic.style.left) === 0) {39 ????????pic.style.left = -1600 + "px";40 ????} else {41 ????????var pos = parseInt(pic.style.left) + 320;42 ????????pic.style.left = pos + ‘px‘;43 ????}44 ????index--;45 ????if(index<0){46 ????????index=5;47 ????}48 ????showPoint();49 }50 51 var timer = null;52 53 // 自动图片轮播，设置1s间隔54 function autoPlay() {55 ????// timer=setInterval(function(){56 ????// ????next_pic();57 ????// },1000);58 ????timer = setInterval(next_pic, 1000);59 }60 autoPlay();61 62 var container = document.getElementsByClassName(‘container‘)[0];63 // 鼠标移动到container区域，暂停自动播放64 container.onmouseenter = function() {65 ????clearInterval(timer);66 }67 // 鼠标离开container区域，自动播放68 container.onmouseleave = function() {69 ????autoPlay();70 }71 72 // 实现点击相应的小按钮图片跳转到相应图片功能73 for (var i = 0; i < points.length; i++) {74 ????(function(i){75 ????????points[i].onclick=function (){76 ????????????//0~0,1~-320...5~-160077 ????????????pic.style.left=-320*i +"px";78 ????????};79 ????????index=i;80 ????????//无法点击point，使其变色81 ????????showPoint();82 ????}83 ????)(i);84 }85 86 // 实现相应图片对应相应小按钮功能87 function showPoint(){88 ????for(var i=0;i<points.length;i++){89 ????????points[i].className="";90 ????}91 ????points[index].className="on";92 }原生js实现图片轮播效果
原文地址：http://www.cnblogs.com/why-not-try/p/7822435.html