js实现轮播图特效

js实现轮播图特效

html代码：

<div class="slider" id="slider">
    <div class="slider-img">
        <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>
    <div class="slider-ctrl">
        <span class="prev" id="prev"></span>
        <span class="next" id="next"></span>
    </div>
</div>

css代码：

* {
    margin: 0;
    padding: 0;
}
.slider {
    width: 310px;
    height: 265px;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}
.slider-img {
    width: 310px;
    height: 220px;
}
ul {
    list-style: none;
}
li {
    position: absolute;
    top: 0;
    left: 0;
}
.slider-ctrl {
    text-align: center;
    padding-top: 10px;
}
.slider-ctrl-con {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../images/icon.png) no-repeat -24px -780px;
    text-indent: -99999px;
    margin: 0 5px;
    cursor: pointer;
}
.slider-ctrl-con.current {
    background-position: -24px -760px;
}
.prev,.next {
    position: absolute;
    top: 40%;
    width: 30px;
    height: 35px;
    background: url(../images/icon.png) no-repeat;
}
.prev {
    left: 10px;
}
.next {
    right: 10px;
    background-position: 0 -44px;
}

JavaScript代码：

<script type="text/javascript">
    /*
    需求分析:
    1 根据图片数量动态生成小圆点(document.createElement和appendChild)
    2 点亮第一个小圆点,显示第一幅图
    3 点击小圆点,点亮该小圆点,图片运动到指定图片
    4 点击左箭头,看上一张图片,点亮该小圆点
    5 点击右箭头,看下一张图片,点亮该小圆点
    6 鼠标移入slider,轮播图停止轮播
    7 鼠标移除slider,轮播图继续轮播
    8 轮播图可以自动轮播
    */


    //获取相关元素
    var slider = $id('slider');//总容器
    var liArr = slider.children[0].children[0].children;//所有的图片li
    var sliderCtrl = slider.children[1];//左右箭头和小圆点所在的容器
    var prev = $id('prev');//左箭头
    var next = $id('next');//右箭头
    var width = slider.offsetWidth ;//一个li的宽度
    //使用一个变量来记录当前是第几副图
    var index = 0;

    //1 根据图片数量动态生成小圆点
    for(var i=0;i<liArr.length;i++){
        var newSpan = document.createElement('span');
        newSpan.className = "slider-ctrl-con";
        //考虑到后期小圆点会被点击,需要知道被点击的是第几个
        newSpan.index = i;
        sliderCtrl.appendChild(newSpan);
    }

    //2 点亮第一个小圆点,显示第一幅图
    for(var i=0;i<liArr.length;i++){
        liArr[i].style.left = width+"px";
    }
    liArr[index].style.left = 0;
    light();


    //3 点击小圆点,点亮该小圆点,图片运动到指定图片(箭头和小圆点的事件都委托给sliderCtrl)
    sliderCtrl.onclick = function(e){
        var event = e||window.event;
        var target = event.target||event.srcElement;

        if(target.className.indexOf("slider-ctrl-con")>-1){
            //indexOf如果没有找到,返回值是-1,如果返回值不是-1,说明找到了,这就是小圆点
            //图片要变成响应的图片            
            if(target.index>index){
                //原来的索引是index,要看的图片的索引是target.index
                //瞬间把要看的图放到右边
                liArr[target.index].style.left = width+"px";
                //原来的index,去左边,要看的target.index进入中心
                animate(liArr[index],{left:-width});
                animate(liArr[target.index],{left:0});
            }
            if(target.index<index){
                //原来的索引是index,要看的图片的索引是target.index
                //瞬间把要看的图放到左边
                liArr[target.index].style.left = -width+"px";
                animate(liArr[index],{left:width});
                animate(liArr[target.index],{left:0})
            }
            //获取被点击的小圆点的索引
            index = target.index;
            light()

        }

        if (target.className=="prev") {
            //上一张
            prevFn();
        }

        if (target.className=="next") {
            //下一张
            nextFn();
        }
    }
    //自动轮播
    slider.timer = setInterval(nextFn,2000)


    //鼠标移入slider,停止轮播
    slider.onmouseenter = function(){
        clearInterval(slider.timer)
    }

    //鼠标移出slider,开始轮播
    slider.onmouseleave = function(){
        clearInterval(slider.timer);
        slider.timer = setInterval(nextFn,2000);
    }

    // 返回指定id的元素
    function $id(id){
        return document.getElementById(id);
}
    //light:点亮当前小圆点
    function light(){
        var spanArr = sliderCtrl.children;//所有的小圆点和左右箭头
        //干掉所有人
        for(var i=2;i<spanArr.length;i++){
            spanArr[i].className = "slider-ctrl-con";
        }
        //留下我一个
        spanArr[index+2].className = "slider-ctrl-con current";
    }

    //看上一张
    function prevFn(){
        var current = index - 1;
        if(current<0){
            //如果你在最前面一张还要看前一张,就是想看最后一张
            current = liArr.length-1
        }
        //把要看的图先放到左边
        liArr[current].style.left = -width+"px";
        animate(liArr[index],{left:width})
        animate(liArr[current],{left:0});

        //更新总的索引
        index = current;
        //点亮小圆点
        light()
    }

    //看下一张
    function nextFn(){
        var current = index +1;
        if(current>liArr.length-1){
            current = 0;
        }
        //把要看的图先放到右边
        liArr[current].style.left = width+"px";
        animate(liArr[index],{left:-width})
        animate(liArr[current],{left:0})

        //更新总的索引
        index = current;
        //点亮小圆点
        light()

    }

    function getStyle(dom,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(dom,null)[attr];
        }else{
            return dom.currentStyle[attr];
        }
    }

    function animate(dom,target,fn){
        clearInterval(dom.timer)
        dom.timer = setInterval(function(){
            var flag = true
            //每间隔20毫秒,width和left就缓动一段距离,直到他们都到达目标位置
            for(var attr in target){
                //1 获取元素原来位置
                if(attr=="opacity"){
                    var current = parseInt(getStyle(dom,"opacity")*100)
                }else{
                    var current = parseInt(getStyle(dom,attr))
                }					
                //2 计算速度
                var speed = (target[attr]-current)/10
                speed = speed>0?Math.ceil(speed):Math.floor(speed)
                //3 计算元素当前位置					
                if(attr=="zIndex"){
                    current = target.zIndex;											
                }else{
                    current = current+speed
                }
                //4 判断是否到达目标
                if(current!=target[attr]){
                    flag = false;
                }
                //5 定位元素
                if(attr=="zIndex"){
                    dom.style.zIndex = current;
                }
                else if(attr=="opacity"){
                    dom.style.opacity = current/100;
                    dom.style.filter = "alpha(opacity="+current+")";
                }
                else{
                    dom.style[attr] = current+"px";
                }			
                
            }
            if(flag){
                clearInterval(dom.timer)
                if(fn) {
                    fn()
                }
            }

        },20)

    }
</script>