JS+DIV 实现轮播图(三)

最新推荐文章于 2024-07-24 21:47:58 发布

geekzsp

最新推荐文章于 2024-07-24 21:47:58 发布

阅读量5.3k

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/mixi9760/article/details/52073455

版权

前端专栏收录该内容

25 篇文章 2 订阅

订阅专栏

效果图

这里写图片描述

原理：

这里写图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            margin: 0;
            padding: 0;
            -webkit-text-size-adjust: none;
            color: #000;

        }

        img {
            border: 0;
            vertical-align: bottom;
        }

        .slider {
            width: 470px;
            height: 150px;
            overflow: hidden;
            position: relative;
        }
        .ctrl{
            position: absolute;
            z-index: 11;
            bottom: 0px;
        }
        .ctrl li{
            margin-left: 5px;
            text-align: center;
            list-style: none;
            float: left;
            width: 50px;
            background-color: aquamarine;
            color: #94ceff;
        }
        #box {
            width: 470px;
            height: 750px;
        }
    </style>
</head>
<body>
<!--slider里面嵌套一个大div  设置slider 的 overflow属性不让大div溢出-->
<div class="slider">
    <div id="box" style="position: absolute;left: 0px;top: 0px">
        <img src="images/1.jpg" alt="" >
        <img src="images/2.gif" alt="" >
        <img src="images/3.gif" alt="" >
        <img src="images/4.gif" alt="" >
        <img src="images/5.jpg" alt="" >
    </div>
    <div class="ctrl">
        <ul>
            <li onclick="select(0)" id="li_0">1</li>
            <li onclick="select(1)" id="li_1">2</li>
            <li onclick="select(2)" id="li_2">3</li>
            <li onclick="select(3)" id="li_3">4</li>
            <li onclick="select(4)" id="li_4">5</li>

        </ul>
    </div>
</div>

<script>
    //    //动态改变 .box 的top使其 改变图片显示
    //    var box = document.getElementById("box");
    //    function run() {
    //
    //        box.style.top = parseInt(box.style.top) - 1 + "px";
    //    }
    //    setInterval(run,16);

    //切换
    function select(i) {
        var box = document.getElementById("box");
        if(i==0){
            box.style.top=0;
        }else {

            var pp = parseInt(box.style.top) || 0;
            animate(box, {top: pp}, {top: (-i * 150) - pp}, 500, Quad);
        }
        //切换时 改变按钮颜色
//        先重置所有的按钮颜色
        var lias=document.getElementsByTagName("li");
        for(var j=0;j<lias.length;j++){
            lias[j].style.background="aquamarine";
        }
        document.getElementById("li_"+i).style.background="#FF0";
    }
    //自动切换
    function autoslect() {
        var a = 0;
        setInterval(function () {
            select(a);
            if (a < 4) {
                a++;
            } else {
                a = 0;
            }
        }, 1000);
    }
    window.onload = function () {
        autoslect();
    }
    /*
     参数说明
     curTime:当前时间,即动画已经进行了多长时间,开始时间为0
     start:开始值
     dur:动画持续多长时间
     alter:总的变化量
     */
    //left 从100 增加到150，增加了50
    function animate(o, start, alter, dur, fx) {
        var curTime = 0;
        var t = setInterval(function () {
            if (curTime >= dur) clearInterval(t);
            for (var i in start) {
                o.style[i] = fx(start[i], alter[i], curTime, dur) + "px";
            }
            curTime += 50;

        }, 50);
    }
    function Quad(start, alter, curTime, dur) {
        return start + Math.pow(curTime / dur, 2) * alter;
    }
</script>
</body>
</html>