HTML部分
<body>
<div id="container">
<div id="list" class="pic" style="left:-400px">
<img src="img/5.jpg" alt="1" />
<img src="img/1.jpg" alt="1" />
<img src="img/2.jpg" alt="1" />
<img src="img/3.jpg" alt="1" />
<img src="img/4.jpg" alt="1" />
<img src="img/5.jpg" alt="1" />
<img src="img/1.jpg" alt="1" />
div>
<div id="circle" class="circle">
<div class="on">
<p id="small" style="display: none">
<img src="img/1.jpg" alt="">
<a href="#">a>
p>
div>
<div>
<p id="small" style="display: none">
<img src="img/2.jpg" alt="">
<a href="#">a>
p>
div>
<div>
<p id="small" style="display: none">
<img src="img/3.jpg" alt="">
<a href="#">a>
p>
div>
<div>
<p id="small" style="display: none">
<img src="img/4.jpg" alt="">
<a href="#">a>
p>
div>
<div>
<p id="small" style="display: none">
<img src="img/5.jpg" alt="">
<a href="#">a>
p>
div>
div>
<a href="javascript:;" id="prev" class="arrow"><a>
<a href="javascript:;" id="next" class="arrow">>a>
div>
body>
CSS部分
<style>
* {
margin: 0;
padding: 0;
text-decoration: none;
}
body {
padding: 20px;
}
#container {
position: relative;
width: 400px;
height: 400px;
margin: 0 auto;
border: 5px solid #333;
overflow: hidden;/*显示一张图片，左右的隐藏*/
}
#list {
position: absolute;
z-index: 1;
width: 2800px;
height: 400px;
}
#list img {
float: left;
width: 400px;
height: 400px;
}
.circle {
position: absolute;
left: 150px;
bottom: 20px;
z-index: 2;
width: 100px;
height: 10px;
}
.circle div {
float: left;
position: relative;
margin-right: 5px;
width: 10px;
height: 10px;
border-radius: 50%;
border:1px solid #fff;
background: #333;
cursor: pointer;
}
.circle div img {
position: absolute;
bottom: 20px;
left: -54px;
width: 110px;
height: 70px;
border-radius: 0;
border: 5px solid #fff;
}
.circle div a {
position: absolute;
display: inline-block;
top: -12px;
left: -1px;
width: 0;
height: 0;
opacity: 1;
background: none;
border-radius: 0;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
border-top: 6px solid #fff;
}
.circle .on {
background: #FF972F;
}
a {
position: absolute;
top: 180px;
z-index: 2;/*箭头所在层置顶*/
display: none;
width: 40px;
height: 40px;
line-height: 40px;
color: #fff;
font-size: 36px;
text-align: center;
font-weight: bold;
border-radius: 50%;/*箭头设置成圆形*/
background: #000;
filter:alpha(opacity:30); opacity:0.3;/*设置透明度*/
cursor: pointer;
}
a:hover {
filter:alpha(opacity:60); opacity:0.6;
}
#container:hover a {
display: block;
}
#prev {
left:10px;
}
#next {
right:10px;
}
style>
js部分
<script>
window.onload = function() {
var oContainer = document.getElementById('container');
var oList = document.getElementById('list');
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
var oCircle = document.getElementById('circle');
var aCircle = oCircle.getElementsByTagName('div');
var aP = oCircle.getElementsByTagName('p');
var timer;
var num = 0;
function animate(offset) {
var newLeft = parseInt(list.style.left) + offset;
list.style.left = newLeft + 'px';
if(newLeft > -400) {
//如果当前的 a = list.style.left = 0;此时图片位于被隐藏的第五张，它的前面没有图， 就把-2000px赋值给a,此时图片还是位于第五张图，而她的前面有五张图片所以a = -400px*5=-2000px;
list.style.left = -2000 + 'px';
}
if(newLeft < -2000) {
//同理，如果当前的a= list.style.left = -2400px;此时图片位于第一张，它的前面有六张图，就把-400px赋值给a,此时图片还是位于第一张，而它的前面有一张图，所以a = -400px;
list.style.left = -400 + 'px';
}
}
//图片自动轮播
function autoPlay() {
//设置定时器，每隔1.5s运行一次oNext.onclick
timer = setInterval(function(){
oNext.onclick();
},1500);
}
function stopAutoPlay (){
clearInterval(timer);
}
//鼠标移入图片，清除定时器，移开，打开定时器
oContainer.onmouseover = stopAutoPlay;
oContainer.onmouseout = autoPlay;
autoPlay();
//设置小圆点
function circleShow() {
//清除之前所有的样式
for(var i = 0; i<aCircle.length; i++) {
aCircle[i].className = '';
}
//把第一个下标为0的设置属性className
aCircle[num].className = 'on';
}
//左右箭头切换图片，圆点样式也跟着移动
oPrev.onclick = function() {
num--;
if(num == -1) {
num = aCircle.length - 1;
}
circleShow();
animate(400);
}
oNext.onclick = function() {
num++;
if(num == aCircle.length) {
num = 0;
}
circleShow();
animate(-400);
}
for(var i=0; i<aCircle.length; i++) {
aCircle[i].index = i;
//鼠标点击小圆点显示相应图片
aCircle[i].onclick = function() {
//图片相对左侧移动的距离
var offset = 400 * (num-this.index);
animate(offset);
//鼠标移动到小圆点的位置
num = this.index;
circleShow();
}
//鼠标移入小圆点显示相应图片
aCircle[i].onmouseover = function(){
aP[this.index].style.display = 'block';
};
aCircle[i].onmouseout = function(){
aP[this.index].style.display = 'none';
};
}