效果图：
需求分析：
- 根据图片数量生成对应的小圆点
- 克隆第一个li，放到ul的最后面
- 最开始显示第一个li,点亮第一个小圆点
- 点击left按钮，看上一张，点亮小圆点
- 点击right按钮，看下一张，点亮小圆点
- 点击小圆点，看相应图片，点亮小圆点
- 可以自动轮播
- 鼠标移入，停止轮播
- 鼠标移出，开始轮播
源代码：
- HTML部分
<div class="all" id='all'>
<div class="screen" id="screen">
<ul id="ul">
<li><img src="images/1.jpg" width="500" height="200" /></li>
<li><img src="images/2.jpg" width="500" height="200" /></li>
<li><img src="images/3.jpg" width="500" height="200" /></li>
<li><img src="images/4.jpg" width="500" height="200" /></li>
<li><img src="images/5.jpg" width="500" height="200" /></li>
</ul>
<ol>
</ol>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
</div>
- css部分
<style>
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: yellow;
}
/*#arr {display: none;}*/
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
- JavaScript部分
- 为了简化代码，先封装一些常用的自定义构造函数
<script>
// 返回指定dom节点的attr样式值
function getStyle(dom,attr){
if(window.getComputedStyle){// 是否有getComputedStyle方法
//非IE低版
return window.getComputedStyle(dom,null)[attr];
}else{
//IE低版
return dom.currentStyle[attr];
}
}
// 封装一个缓动的动画函数，需要时调用即可
function animate(dom,json,callback){
/*
dom:要运动的节点
json:要运动的样式名
callback:运动完成的回调函数
*/
clearInterval(dom.timer);//要用定时器，先清定时器
//要运动的定时器
dom.timer = setInterval(function(){
var flag = true;
//json有几个属性，就要运动几次
for(var attr in json){
//获取当前位置
var current = parseInt(getStyle(dom,attr));
// 计算速度
var speed = json[attr] - current > 0 ? Math.ceil((json[attr]-current)/10):Math.floor((json[attr]-current)/10);
//计算下一个位置
var next = current + speed;
//定位元素
dom.style[attr] = next+'px';
//判断是否达到目标
if(next != json[attr]){
flag = false;
}
}
if(flag){
clearInterval(dom.timer);
}
},20)// 每20毫秒
}
// 封装light，点亮第num个小圆点
function light() {
// 干掉所有人
for (var i = 0; i < pointArr.length; i++) {
pointArr[i].className = "";
}
// 留下我一个
pointArr[point].className = "current";
}
// 下一张
function autoplay() {
// li的索引要增加1
// point的索引要增加1
num++;
point++;
// li的索引的临界点
if (num > liArr.length - 1) {
num = 1;
ul.style.left = 0;
}
// point的索引的临界点
point = point > pointArr.length - 1 ? 0 : point
// ul进行移动
animate(ul, { left: -num * width })
// 点亮小圆点
light()
}
</script>
- js主体部分，需要用到封装的函数，调用即可
<script>
var box = document.getElementById('screen');//总容器
var ul = document.getElementById('ul');//图片li的容器
var ol = box.children[1];//小圆点容器
var prev = box.children[2].children[0];//上一张按钮
var next = box.children[2].children[1];//下一张按钮
var num = 0;//num记录当前li的索引
var point = 0;//point记录小圆点的索引
var width = ul.children[0].offsetWidth;//记录一个li的宽度
// 1 根据图片数量生成对应的下圆点
for(var i=0; i<ul.children.length; i++){
var newPoint = document.createElement('li');
newPoint.index = i;
newPoint.innerHTML = i + 1;
ol.appendChild(newPoint);
}
// 2 克隆第一个li，放到ul的最后面
var newLi = ul.children[0].cloneNode(true);
ul.appendChild(newLi);
// 3 点亮第一个小圆点
var pointArr = ol.children;//所有小圆点的集合
var liArr = ul.children;//所有的li的集合
light();
// 4 点击left按钮，看上一张，点亮小圆点
prev.onclick = function(){
num--;
point--;
// li的索引的临界点
if(num < 0){
ul.style.left = -(liArr.length-1)*width+'px';
num = liArr.length - 2;
}
// point的索引的临界点
point = point<0?pointArr.length-1:point;
// ul进行移动
animate(ul,{left:-num*width});
// 点亮小圆点
light();
}
// 5 点击right按钮，看下一张，点亮小圆点
next.onclick = autoplay;
// 6 点击小圆点，看相应图片，点亮小圆点
for(var i=0; i<pointArr.length; i++){
pointArr[i].onclick = function(){
//可以获取当前被点击的小圆点的索引
var next = this.index;
animate(ul, { left: -next * width });
// 更新当前索引，并点亮小圆点
num = next;
point = next;
light();
}
}
// 7 可以自动轮播
var timer = setInterval(autoplay,3000);
// 8 鼠标移入，停止轮播
box.onmouseenter = function(){
clearInterval(timer);
}
// 9 鼠标移出，开始轮播
box.onmouseleave = function(){
clearInterval(timer);
timer = setInterval(autoplay, 3000);
}
</script>
- 总代码
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: yellow;
}
/*#arr {display: none;}*/
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
<style>
</style>
</head>
<body>
<script></script>
<div class="all" id='all'>
<div class="screen" id="screen">
<ul id="ul">
<li><img src="images/1.jpg" width="500" height="200" /></li>
<li><img src="images/2.jpg" width="500" height="200" /></li>
<li><img src="images/3.jpg" width="500" height="200" /></li>
<li><img src="images/4.jpg" width="500" height="200" /></li>
<li><img src="images/5.jpg" width="500" height="200" /></li>
</ul>
<ol>
</ol>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
</div>
<script>
// 返回指定dom节点的attr样式值
function getStyle(dom, attr) {
if (window.getComputedStyle) {// 是否有getComputedStyle方法
//非IE低版
return window.getComputedStyle(dom, null)[attr];
} else {
//IE低版
return dom.currentStyle[attr];
}
}
// 封装一个缓动的动画函数，需要时调用即可
function animate(dom, json, callback) {
/*
dom:要运动的节点
json:要运动的样式名
callback:运动完成的回调函数
*/
clearInterval(dom.timer);//要用定时器，先清定时器
//要运动的定时器
dom.timer = setInterval(function () {
var flag = true;
//json有几个属性，就要运动几次
for (var attr in json) {
//获取当前位置
var current = parseInt(getStyle(dom, attr));
// 计算速度
var speed = json[attr] - current > 0 ? Math.ceil((json[attr] - current) / 10) : Math.floor((json[attr] - current) / 10);
//计算下一个位置
var next = current + speed;
//定位元素
dom.style[attr] = next + 'px';
//判断是否达到目标
if (next != json[attr]) {
flag = false;
}
}
if (flag) {
clearInterval(dom.timer);
}
}, 20)// 每20毫秒
}
// 封装light，点亮第num个小圆点
function light() {
// 干掉所有人
for (var i = 0; i < pointArr.length; i++) {
pointArr[i].className = "";
}
// 留下我一个
pointArr[point].className = "current";
}
// 下一张
function autoplay() {
// li的索引要增加1
// point的索引要增加1
num++;
point++;
// li的索引的临界点
if (num > liArr.length - 1) {
num = 1;
ul.style.left = 0;
}
// point的索引的临界点
point = point > pointArr.length - 1 ? 0 : point
// ul进行移动
animate(ul, { left: -num * width })
// 点亮小圆点
light()
}
var box = document.getElementById('screen');//总容器
var ul = document.getElementById('ul');//图片li的容器
var ol = box.children[1];//小圆点容器
var prev = box.children[2].children[0];//上一张按钮
var next = box.children[2].children[1];//下一张按钮
var num = 0;//num记录当前li的索引
var point = 0;//point记录小圆点的索引
var width = ul.children[0].offsetWidth;//记录一个li的宽度
// 1 根据图片数量生成对应的下圆点
for (var i = 0; i < ul.children.length; i++) {
var newPoint = document.createElement('li');
newPoint.index = i;
newPoint.innerHTML = i + 1;
ol.appendChild(newPoint);
}
// 2 克隆第一个li，放到ul的最后面
var newLi = ul.children[0].cloneNode(true);
ul.appendChild(newLi);
// 3 点亮第一个小圆点
var pointArr = ol.children;//所有小圆点的集合
var liArr = ul.children;//所有的li的集合
light();
// 4 点击left按钮，看上一张，点亮小圆点
prev.onclick = function () {
num--;
point--;
// li的索引的临界点
if (num < 0) {
ul.style.left = -(liArr.length - 1) * width + 'px';
num = liArr.length - 2;
}
// point的索引的临界点
point = point < 0 ? pointArr.length - 1 : point;
// ul进行移动
animate(ul, { left: -num * width });
// 点亮小圆点
light();
}
// 5 点击right按钮，看下一张，点亮小圆点
next.onclick = autoplay;
// 6 点击小圆点，看相应图片，点亮小圆点
for (var i = 0; i < pointArr.length; i++) {
pointArr[i].onclick = function () {
//可以获取当前被点击的小圆点的索引
var next = this.index;
animate(ul, { left: -next * width });
// 更新当前索引，并点亮小圆点
num = next;
point = next;
light();
}
}
// 7 可以自动轮播
var timer = setInterval(autoplay, 3000);
// 8 鼠标移入，停止轮播
box.onmouseenter = function () {
clearInterval(timer);
}
// 9 鼠标移出，开始轮播
box.onmouseleave = function () {
clearInterval(timer);
timer = setInterval(autoplay, 3000);
}
</script>
</body>
</html>
所用图片：
由于你们没有图片，直接复制代码，展示不出效果，大家可以自己找几张图片来代替，稍微修改下即可，只要能看得懂代码，修改起来莫得问题啦
扫一扫
1463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
