javaScript轮播图由三小部分组成:
1.底部按钮悬停显示对应图片
2.左右按钮点击跟换图片
3.定时器滚动更换图片
首先是css的基本样式:
<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>
然后是Html:
<div class="screen"><!--相框-->
<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>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
然后是将常用函数封装
function my$(id) {
return document.getElementById(id);
}
function myA(TagName) {
return document.getElementsByTagName(TagName);
}
function animate(element, target) {
//先清理定时器
clearInterval(element.timer);
//目标位置 元素
element.timer = setInterval(function () {
//获取当前的位置
var current = element.offsetLeft;
//设置一个div每次移动多少像素
var step = 10;
step = current < target ? step : -step;
//每次移动后的距离
current += step;
if (Math.abs(target-current)>Math.abs(step)) {
element.style.left = current + “px”;
} else {
clearInterval(element.timer);
element.style.left=target+“px”;
}
},1)
}
其中animate为图片移动函数
准备工作做完后开始逐步完成轮播图;
1.底部小按钮;
(1)创建小按钮
var index=0;
for (var i=0;i<list.length;i++){
var liObj=document.createElement(“li”);
olObj.appendChild(liObj);
liObj.innerHTML=i+1;
liObj.setAttribute(“index”,i);
liObj.onmouseover=function () {
//将所有按钮变成默认状态
for (var j=0;j<olObj.children.length;j++){
olObj.children[j].removeAttribute(“class”)
}
//将鼠标悬停的按钮变成红色(选定状态)
this.className=“current”;
//获取鼠标悬停的按钮的index值
index=this.getAttribute(“index”);
//显示对应索引的图片
animate(ulObj,-index*imgWidth);
}
}
//将第一个按钮的默认状态设置成红色;
olObj.children[0].className=“current”;
2.滚动播放(ul整体左移):
(1).将第一张图片复制追加到ul的最后面
ulObj.appendChild(ulObj.children[0].cloneNode(true));
(2).设置左移函数
function leftMove() {
if (index==list.length-1){
index=0;
ulObj.style.left=-indeximgWidth+“px”;
}
index++;
animate(ulObj,-indeximgWidth);
if (index == list.length-1){
olObj.children[olObj.children.length-1].className="";
olObj.children[0].className=“current”;
}else{
for (var i=0;i<olObj.children.length;i++){
olObj.children[i].removeAttribute(“class”);
}
olObj.children[index].className=“current”;
}
}
设置右移函数
//右移函数
function rightMove() {
if (index==0){
index=5;
ulObj.style.left=-indeximgWidth+“px”;
}
index–;
animate(ulObj,-indeximgWidth);
for (var i=0;i<olObj.children.length;i++){
olObj.children[i].removeAttribute(“class”);
}
olObj.children[index].className=“current”;
}
(3).设置新的定时器调用左移函数整体
var timeId=setInterval(leftMove,2000);
3.左右按钮点击更换图片
(1)左右按钮显示与隐藏
//鼠标移入显示,同时清除滚动播放效果
box.onmouseover=function () {
arr.style.display=“block”;
clearInterval(timeId);
}
//鼠标移出隐藏,同时添加滚动播放效果
box.onmouseout=function () {
arr.style.display=“none”
timeId=setInterval(leftMove,2000);
}
(2).左右按钮功能添加
//右按钮–>左移
my$(“right”).onclick=leftMove;
//左按钮–>右移
my$(“left”).onclick=rightMove;
大功告成!
具体思路步骤图:
准备工作------底部按钮------滚动播放------左右按钮
难点:
1.准备工作中的图片移动函数animate
2.左右移函数
结语:javaScript之攻克轮播图,就此完结!
ps:本系列纯属原创,抄袭必究!