JavaScript实现简单的图片轮播（通过点击数字切换）

来源：互联网发布：oracle数据库cache 编辑：程序博客网时间：2024/05/27 21:50
最终实现效果图

这里写图片描述
点击下标切换到该图片上
代码块

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>         <style>        * {            margin: 0;            padding: 0        }        ul {            list-style: none        }        img {            vertical-align: top        }        .box {            width: 490px;            height: 170px;            margin: 100px auto;            padding: 5px;            border: 1px solid #ccc;        }        .inner {            width: 490px;            height: 170px;            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>    </head>    <body>        <div class="box" id="box">            <div class="inner">                <ul>                    <li><a href="#"><img src="images/01.jpg" /></a></li>                    <li><a href="#"><img src="images/02.jpg" /></a></li>                    <li><a href="#"><img src="images/03.jpg" /></a></li>                    <li><a href="#"><img src="images/04.jpg" /></a></li>                    <li><a href="#"><img src="images/05.jpg" /></a></li>                </ul>                <div class="square">                    <span class="current">1</span>                    <span>2</span>                    <span>3</span>                    <span>4</span>                    <span>5</span>                </div>            </div>        </div>    <script type="text/javascript">        //鼠标经过按钮 按钮排他        var box = document.getElementById("box");        var inner = box.children[0];            //获取box下的第一个元素，也就是inner        var ul = inner.children[0];             //获取inner下的ul        var squareList = inner.children[1];     //获取inner下的第二个元素        var squares = squareList.children;      //获取所有的按钮        var imgWidth = inner.offsetWidth;//      alert(imgWidth);        //给每个按钮注册鼠标经过事件        for(var i=0; i<squares.length; i++){            squares[i].index = i;           //把索引保存在自定义属性中            squares[i].onmouseover = function(){    //鼠标经过事件                //排他  干掉所有人                 for(var j=0; j<squares.length; j++){                    squares[j].className = "";                }                //留下我自己                this.className = "current";                //以动画的方式把ul移动到指定的位置                //目标 和当前按钮索引有关，和图片宽度有关 而且是负数                var target = -this.index * imgWidth;    //获取到索引                animate(ul,target);            }        }        function animate(obj, target) {            clearInterval(obj.timer);            obj.timer = setInterval(function () {                var step = 20;                var step = obj.offsetLeft < target ? step : -step;                if (Math.abs(obj.offsetLeft - target) > Math.abs(step)) {                    obj.style.left = obj.offsetLeft + step + "px";                } else {                    obj.style.left = target + "px";                    clearInterval(obj.timer);                }            }, 15)        }    </script>    </body></html>
阅读全文
2 0