主要代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div id="dv">
<!--相框-->
<div id="dv2">
<!--存放图片-->
<ul id="ul1" class="lunbo">
<li><a href="#"><img src="images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/6.jpg" alt=""></a></li>
</ul>
<!--圆点-->
<ul id="ul2" class="dian">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<!--方向箭头-->
<ul class="fx">
<li id="left"><span><</span></li>
<li id="right"><span>></span></li>
</ul>
</div>
</div>
<script src="js/common.js"></script>
<script src="js/moveEle.js"></script>
<script>
//获取相框的宽度
var xkk=my$('dv2').offsetWidth;
console.log(xkk);
//获取图片
var tupian=my$('ul1');
console.log(tupian.className);
//获取点
var list=my$('ul2').children;
console.log(list);
var index=0;
for(var i=0;i<list.length;i++){
//为每次鼠标触碰的点设置一个属性index，用index来存储数字i，用来设置移动的距离
list[i].setAttribute('index',i);
//鼠标悬浮事件实现移动
list[i].onmouseover=function(){
//首先清除所有点的背景颜色
for(var j=0;j<list.length;j++){
list[j].removeAttribute('class');
}
//设置当前悬浮的点的背景颜色
this.className='current';
//调用移动函数，并且先获取到当前index的值
index=this.getAttribute('index');
move(tupian,-xkk*index,50);
};
}
my$('left').onmouseover=function(){
this.style.backgroundColor='rgba(255,255,255,.8)';
};
my$('left').onmouseout=function(){
this.style.backgroundColor='rgba(255,255,255,.5)';
};
my$('right').onmouseover=function(){
this.style.backgroundColor='rgba(255,255,255,.8)';
};
my$('right').onmouseout=function(){
this.style.backgroundColor='rgba(255,255,255,.5)';
};
//左右箭头切换图片
//var index=0; 不用自己定义了，直接使用上面的鼠标悬浮事件的index，这样可以使得图片实时移动
my$('right').onclick=function(){
if(index<list.length-1){
index++;
for(var k=0;k<list.length;k++){
list[k].removeAttribute('class');
}
list[index].className='current';
move(tupian,-xkk*index,50);
}
};
my$('left').onclick=function(){
if(index>0){
index--;
for(var k=0;k<list.length;k++){
list[k].removeAttribute('class');
}
list[index].className='current';
move(tupian,-xkk*index,50);
}
};
</script>
</body>
</html>
其中样式代码以及移动元素的moveEle函数和获取元素的my$函数在外部的js中。
分别如下：
//移动元素的函数
function move(ele,aim,step){
//每次点击执行函数的时候都清除定时器，防止连续点击加快移动速度
//之所以用ele.time是为了不出time undefined的错误
clearInterval(ele.time);
ele.time=setInterval(function() {
//获取当前位置 offsetLeft获得的是数字不带单位
var now = ele.offsetLeft;
//确定每次移动的单位距离step的正负，如果目标距离aim大于当前距离，step为正，反之step为负
//每次执行函数之前将step初始化为正值
step = Math.abs(step);
step = now < aim ? step : -step;
//设置每次执行函数当前得位置都在变化，变化量为step
now += step;
//设置元素的位置，如果正在向目标位置移动，那么Math.abs(now-aim)>Math.abs(step),如果已经在目标位置的地方
//但是不能精确则Math.abs(now-aim)<Math.abs(step),这两种情况的当前位置是不一样的
if (Math.abs(now - aim) > Math.abs(step)) {
ele.style.left = now+'px';
} else if (Math.abs(now - aim) < Math.abs(step)) {
ele.style.left = aim+'px';
clearInterval(time);
}
else if(Math.abs(now - aim) === Math.abs(step)){
ele.style.left = aim+'px';
}
},20);
}
//通过id获取元素
function my$(id){
return document.getElementById(id);
}
样式代码：
* {
margin: 0;
padding: 0;
}
body {
font: 13px 'Macrosoft Yahei';
font-weight: bold;
color: green;
}
img {
vertical-align: middle;
}
ul {
list-style-type: none;
}
li {
cursor: pointer;
}
#dv {
width: 450px;
height: 300px;
margin: 100px auto;
border: 1px solid gray;
/*overflow: hidden;*/
padding: 3px;
}
#dv2 {
height: 100%;
overflow: hidden;
position: relative;
}
#dv2 ul.lunbo {
width: 1000%;
position: absolute;
top: 0;
left: 0;
}
#dv2 ul li {
float: left;
}
#dv ul li a img {
width: 450px;
height: 300px;
}
ul.dian {
position: absolute;
right: 10px;
bottom: 10px;
}
ul.dian li {
width: 16px;
height: 16px;
text-align: center;
line-height: 16px;
background-color: #fff;
margin-left: 10px;
border: 1px solid gray;
}
ul.dian li.current {
background-color: yellow;
}
#dv2 ul.fx li {
top: 50%;
margin-top: -15px;
width: 50px;
height: 30px;
border-radius: 15px;
position: absolute;
background-color: rgba(255,255,255,.5);
line-height: 30px;
}
#dv2 ul.fx li#left {
left: 0;
transform: translate(-50%,0);
}
#dv2 ul.fx li#right {
right: 0;
transform: translate(50%,0);
}
#dv2 ul.fx li#left span {
position: absolute;
right: 12px;
}
#dv2 ul.fx li#right span {
position: absolute;
left: 12px;
}
最终效果：
完整的项目压缩包百度网盘下载>>>提取码：pioh
简单轮播图
