javaScript攻克轮播图之轮播图完整步骤

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">&lt;</span><span id="right">&gt;</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.οnmοuseοver=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.οnmοuseοver=function () {
arr.style.display=“block”;
clearInterval(timeId);
}
//鼠标移出隐藏,同时添加滚动播放效果
box.οnmοuseοut=function () {
arr.style.display=“none”
timeId=setInterval(leftMove,2000);
}

(2).左右按钮功能添加

//右按钮–>左移
my$(“right”).οnclick=leftMove;

//左按钮–>右移
my$(“left”).οnclick=rightMove;

大功告成!
具体思路步骤图:
准备工作------底部按钮------滚动播放------左右按钮
难点:
1.准备工作中的图片移动函数animate
2.左右移函数

结语:javaScript之攻克轮播图,就此完结!
ps:本系列纯属原创,抄袭必究!