焦点图

最新推荐文章于 2025-07-29 14:42:41 发布

原创最新推荐文章于 2025-07-29 14:42:41 发布 · 403 阅读

0 ·

CC 4.0 BY-SA版权

01前端基础教程html_css_js 专栏收录该内容

78 篇文章

订阅专栏

注意：获取当前小点的序列号,olLis[i].index = i;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            vertical-align: top; //清除图片下侧的3像素缝隙 或者 display:block;
        }
        ul,ol{
            list-style: none;}
        .slider{
            width: 300px;
            height: 200px;
            border: 1px solid #cccccc;
            margin: 100px auto;
            padding: 5px;
            position: relative;
        }
        .inner{
            width: 100%;
            height: 100%;
            background-color: pink;
            overflow: hidden;
            position: relative;
        }
        .inner ul{
            width: 1000%;
            position: absolute;
            left: 0;
        }
        .inner ul li{
            float: left;
        }
        .slider ol{
            position: absolute;
            left: 50%;
            margin-left:-50px;
            bottom: 10px;
        }
        .slider ol li{
            float: left;
            width: 18px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            margin-right: 10px;
            background-color: #fff;
            cursor: pointer;
        }
        .slider ol .current{
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="slider" id="slider">
        <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/2.jpg" alt=""/></a></li>
            </ul>
        </div>
        <ol>
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
</body>
</html>
<script>
    var slider = document.getElementById("slider");
    var ul = slider.children[0].children[0];
    var ol = slider.children[1];
    var olLis = ol.children;
    var index = 0;
    for(var i=0;i<olLis.length;i++){
        olLis[i].index = i; //得到每个Li的索引号
        olLis[i].onmouseover = function () {
            for(var j=0;j<olLis.length;j++){
                olLis[j].className = "";
            }
            this.className = "current";
            end = -this.index * 300; //目标位置就是用当前索引号乘以一个图片的宽度
        }
    }
    var start= 0,end=0;
    setInterval(function(){
        start = start + (end-start)/10;
        ul.style.left = start + "px";
    },10);
</script>