本轮播图具体功能如下:
左右对焦,自动播放,底下小图标切换
首先是css代码
<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: #DB192A;
}
#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>
HTML代码如下:
<div class="all" id='box'>
<div class="screen"><!--相框-->
<ul>
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
</ul>
<ol>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
JS代码如下:
<script>
//获取需要的元素
var div = a("box");
//获取相框的宽度
var w = div.children[0].offsetWidth;
//图片 ul
var ul = div.children[0].children[0];
//获取ul下的所有li
var lis = ul.children;
//获取ol 按钮 1 2 3 4...
var ol = div.children[0].children[1];
//获取焦点
var arfocus = a("arr");
//全局变量 保存索引
var index = 0;
//按钮创建出来 按钮个数 与图片个数一致的 遍历li 去创建按钮
//创建完按钮 把这些按钮放到ol中 createElement
for (var i = 0; i < lis.length; i++) {
var olli = document.createElement("li");
olli.innerHTML = i+1;
ol.appendChild(olli);
//设置索引值 自定义属性
olli.setAttribute("index", i);
//给每个按钮绑定一个鼠标移入事件
olli.onmouseover = function(){
//排他 当前移入元素current 所有人清除样式
for (var j = 0; j < ol.children.length; j++) {
ol.children[j].removeAttribute("class");
}
this.className = "current";
//获取当前索引值
index = this.getAttribute("index");
dongHua(ul, -index*w);
};
}
//创建完按钮后 默认选中第一个
ol.children[0].className = "current";
//无缝 加一张图片 放到列表最后 这张图片和第一张是一样的 cloneNode(true) 返回值克隆出来的元素
ul.appendChild(ul.children[0].cloneNode(true));
//定时器
var timeId = setInterval(zidong, 2000);
//鼠标移入显示焦点
div.onmouseover = function(){
arfocus.style.display = "block";
clearInterval(timeId);
};
//鼠标移出隐藏焦点
div.onmouseout = function(){
arfocus.style.display = "none";
timeId = setInterval(zidong, 2000);
};
function zidong(){
//加判断 图片到用户看到的最后一张时 再点击应该显示第一张
if (index == ul.children.length-1) { //5
index = 0; //0 第一张
ul.style.left = 0+"px"; //0
}
index++; // 1出去一张 2出去两张 3 4 5
//console.log(index);
dongHua(ul, -index*w);
//按钮效果 同步 5
//到5的时候 最后一张的时候 5按钮清除样式 1按钮样式加上
//所有按钮样式 排他
if (index == ul.children.length-1) { //5
//最后一个按钮样式清除
ol.children[ol.children.length-1].removeAttribute("class");
//第一个按钮样式加上
ol.children[0].className = "current";
} else {
for (var i = 0; i < ol.children.length;i++) {
ol.children[i].removeAttribute("class");
}
ol.children[index].className = "current";
}
};
//给右焦点加点击事件
a("right").onclick = zidong;
//给左焦点加点击事件
a("left").onclick = function(){
if (index == 0) {
index = 5;
ul.style.left = -5*w+"px";
}
index--;
dongHua(ul, -index*w);
for (var i = 0; i < ol.children.length;i++) {
ol.children[i].removeAttribute("class");
}
ol.children[index].className = "current";
};
function a(id){
return document.getElementById(id);
}
function dongHua(ele, target){
//清理定时器 保证只有一个定时器
clearInterval(ele.timeId);
ele.timeId = setInterval(function(){
//获取当前位置
var current = ele.offsetLeft;
//步长 判断
var step = current < target ? 10 : -10;
//移动后位置
current += step;
//根据位置判断 是否继续向前移动 还是直接到达目标
//current target > step
if (Math.abs(current-target) > Math.abs(step)) {
ele.style.left = current+"px";
} else {
clearInterval(ele.timeId);
ele.style.left = target+"px";
}
},20);
}
</script>
完整代码如下:
轮播图.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta 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: #DB192A;
}
#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>
</head>
<body>
<div class="all" id='box'>
<div class="screen"><!--相框-->
<ul>
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
</ul>
<ol>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script>
//获取需要的元素
var div = a("box");
//获取相框的宽度
var w = div.children[0].offsetWidth;
//图片 ul
var ul = div.children[0].children[0];
//获取ul下的所有li
var lis = ul.children;
//获取ol 按钮 1 2 3 4...
var ol = div.children[0].children[1];
//获取焦点
var arfocus = a("arr");
//全局变量 保存索引
var index = 0;
//按钮创建出来 按钮个数 与图片个数一致的 遍历li 去创建按钮
//创建完按钮 把这些按钮放到ol中 createElement
for (var i = 0; i < lis.length; i++) {
var olli = document.createElement("li");
olli.innerHTML = i+1;
ol.appendChild(olli);
//设置索引值 自定义属性
olli.setAttribute("index", i);
//给每个按钮绑定一个鼠标移入事件
olli.onmouseover = function(){
//排他 当前移入元素current 所有人清除样式
for (var j = 0; j < ol.children.length; j++) {
ol.children[j].removeAttribute("class");
}
this.className = "current";
//获取当前索引值
index = this.getAttribute("index");
dongHua(ul, -index*w);
};
}
//创建完按钮后 默认选中第一个
ol.children[0].className = "current";
//无缝 加一张图片 放到列表最后 这张图片和第一张是一样的 cloneNode(true) 返回值克隆出来的元素
ul.appendChild(ul.children[0].cloneNode(true));
//定时器
var timeId = setInterval(zidong, 2000);
//鼠标移入显示焦点
div.onmouseover = function(){
arfocus.style.display = "block";
clearInterval(timeId);
};
//鼠标移出隐藏焦点
div.onmouseout = function(){
arfocus.style.display = "none";
timeId = setInterval(zidong, 2000);
};
function zidong(){
//加判断 图片到用户看到的最后一张时 再点击应该显示第一张
if (index == ul.children.length-1) { //5
index = 0; //0 第一张
ul.style.left = 0+"px"; //0
}
index++; // 1出去一张 2出去两张 3 4 5
//console.log(index);
dongHua(ul, -index*w);
//按钮效果 同步 5
//到5的时候 最后一张的时候 5按钮清除样式 1按钮样式加上
//所有按钮样式 排他
if (index == ul.children.length-1) { //5
//最后一个按钮样式清除
ol.children[ol.children.length-1].removeAttribute("class");
//第一个按钮样式加上
ol.children[0].className = "current";
} else {
for (var i = 0; i < ol.children.length;i++) {
ol.children[i].removeAttribute("class");
}
ol.children[index].className = "current";
}
};
//给右焦点加点击事件
a("right").onclick = zidong;
//给左焦点加点击事件
a("left").onclick = function(){
if (index == 0) {
index = 5;
ul.style.left = -5*w+"px";
}
index--;
dongHua(ul, -index*w);
for (var i = 0; i < ol.children.length;i++) {
ol.children[i].removeAttribute("class");
}
ol.children[index].className = "current";
};
function a(id){
return document.getElementById(id);
}
function dongHua(ele, target){
//清理定时器 保证只有一个定时器
clearInterval(ele.timeId);
ele.timeId = setInterval(function(){
//获取当前位置
var current = ele.offsetLeft;
//步长 判断
var step = current < target ? 10 : -10;
//移动后位置
current += step;
//根据位置判断 是否继续向前移动 还是直接到达目标
//current target > step
if (Math.abs(current-target) > Math.abs(step)) {
ele.style.left = current+"px";
} else {
clearInterval(ele.timeId);
ele.style.left = target+"px";
}
},20);
}
</script>
</body>
</html>
在这里我提一句,我们可以把重复利用的代码封装一下,以后就可以直接调用了,创建一个JS文件,common.js,代码如下:
//根据id获取元素对象
function my$(id) {
return document.getElementById(id);
}
//获取当前元素前一个元素
function getPreviousElement(element) {
if(element.previousElementSibling){
return element.previousElementSibling;
}else{
var ele=element.previousSibling;
while (ele&&ele.nodeType!==1){
ele=ele.previousSibling;
}
return ele;
}
}
//获取当前元素的后一个元素
function getNextElement(element) {
if(element.nextElementSibling){
return element.nextElementSibling;
}else{
var ele=element.nextSibling;
while(ele&&ele.nodeType!==1){
ele=ele.nextSibling;
}
return ele;
}
}
//获取父元素中的第一个元素
function getFirstElementByParent(parent) {
if(parent.firstElementChild){
return parent.firstElementChild;
}else{
var ele=parent.firstChild;
while (ele&&ele.nodeType!==1){
ele=ele.nextSibling;
}
return ele;
}
}
//获取父元素中的最后一个元素
function getLastElementByParent(parent) {
if(parent.lastElementChild){
return parent.lastElementChild;
}else{
var ele=parent.lastChild;
while(ele&&ele.nodeType!==1){
ele=ele.previousSibling;
}
return ele;
}
}
//获取兄弟元素
function getsiblings(ele) {
if(!ele)return;//判断当前的ele这个元素是否存在
var elements=[];//定义数组的目的就是存储当前这个元素的所有的兄弟元素
var el=ele.previousSibling;//当前元素的前一个节点
while (el){
if (el.nodeType===1){//元素
elements.push(el);//加到数组中
}
el=el.previousSibling;
}
el=ele.nextSibling;
while(el){
if(el.nodeType===1){
elements.push(el);
}
el=el.nextSibling;
}
return elements;
}
扫一扫
2806
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
