js轮播图之点击小圆点滑动图片

首先设置好html和css的样式,如下:

html代码 :

<div class="box" id="box">
    <div class="inner"><!--相框-->
        <ul>
            <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>
        <div class="square">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
        </div>
    </div>
</div>

css代码 :

<style>
    * {
        margin: 0;
        padding: 0
    }

    ul {
        list-style: none
    }

    img {
        vertical-align: top
    }

    .box {
        width: 730px;
        height: 454px;
        margin: 100px auto;
        padding: 5px;
        border: 1px solid #ccc;
    }

    .inner {
        width: 730px;
        height: 454px;
        background-color: pink;
        overflow: hidden;
        position: relative;
    }

    .inner ul {
        width: 1000%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .inner li {
        float: left;
    }
    .square {
        position: absolute;
        right: 10px;
        bottom: 10px;
    }
    .square span {
        display: inline-block;
        width: 16px;
        height: 16px;
        background-color: #fff;
        text-align: center;
        line-height: 16px;
        cursor: pointer;
    }

    .square span.current {
        background-color: orangered;
        color: #fff;
    }

</style>

静态效果图如下 : 

 

js的代码 : 

封装一个根据id值获取元素的函数 : 

function f(id) {
    return document.getElementById(id);
}

//封装一个函数  移动任意元素到任意位置
function animate(element,target) {
    //先清理定时器
    clearInterval(element.timeId);
    //定时器
    element.timeId = setInterval(function () {
        var current = element.offsetLeft;  //获取当前的元素的位置
        var step = 10;  //元素每次移动的像素
        step = current > target ? -step : step;  //判断向右移动还是向左移动
        current += step;  //当前位置的元素加上移动的像素
        //判断当前元素位置与目标位置的差距
        if (Math.abs(current - target) > Math.abs(step)) {
            element.style.left = current + "px";  //设置div的left值
        } else {
            clearInterval(element.timeId);
            element.style.left = target + "px";  //将目标位置设置为div的left值
        }
    },20)
 }

var box = f("box");   //获取box
var inner = box.children[0];  //获取相框
var imgWidth = inner.offsetWidth;  //获取相框的宽度
var ulObj = inner.children[0];  //获取ul
var list = ulObj.children;  //获取所有的li
var spanObjs = inner.children[1].children;   //获取所有的span标签

//遍历所有的span，添加鼠标移入事件
for (var i = 0; i < spanObjs.length; i++) {
    //给每个span标签添加一个自定义的属性，用于存储索引
    spanObjs[i].setAttribute("index", i);
    //鼠标移入事件
    spanObjs[i].onmouseover = function () {
        for (var j = 0; j < spanObjs.length; j++) {
            spanObjs[j].removeAttribute("class");
        }

        this.className = "current";

        //获取当前元素的hhh属性
        var hhh = this.getAttribute("index");
        //移动的是ul，目标位置：-每个图片的宽度*鼠标放上去的按钮的索引
        animate(ulObj, -imgWidth * hhh);
    }
}

动态效果图如下 :