轮播图的实现，并且切换速度有快变慢

最新推荐文章于 2023-12-30 09:34:59 发布

gang456789

最新推荐文章于 2023-12-30 09:34:59 发布

阅读量6.6k

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/gang456789/article/details/78164493

版权

web 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

不多说，直接上代码


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0; padding: 0;}
        ul,ol{list-style:none;}
        img {
            display: block;  /* 清除图片底册 3像素缝隙*/
        }
        .slider {
            width: 490px;
            height: 170px;
            border:1px solid #ccc;
            margin: 100px auto;
            padding:5px;
            position: relative;
        }
        .inner {
            width: 100%;
            height: 100%;
            background-color: pink;
            position: relative;
            /*overflow: hidden*/
        }
        .inner ul {
            width: 1000%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .inner ul li {
            float: left;
        }
        .slider ol {
            position: absolute;
            left: 50%;
            margin-left: -80px;
            bottom: 10px;

        }
        .slider ol li{
            float: left;
            width: 18px;
            height: 18px;
            background-color: #fff;
            margin-right: 10px;
            text-align: center;
            line-height: 18px;
            cursor: pointer;
        }
        .slider ol li.current {
            background-color: orange;
        }
    </style>
</head>
<body>
<div class="slider" id="jd">
    <div class="inner">
        <ul>
            <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/05.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  jd = document.getElementById("jd");
    var ul = jd.children[0].children[0];
    var ol = jd.children[1];
    var olLis = ol.children;
    var leader = 0, target = 0;  // target 目标位置
    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";
            target = -this.index * 490; // 目标位置 就是用当前的索引号乘以  一个盒子的宽度
        }
    }
    setInterval(function() {
        leader = leader + (target - leader ) / 10;
        ul.style.left = leader + "px";
    },30);


</script>

其中，上面代码段中，实现轮播的主要思想是让轮播图片进行浮动即float: left;并且设其宽度为 width: 1000%;这里的宽度根据有几个li而定；让其父元素ul进行固定定位即position: absolute;其宽度是100%，并且会设置超出隐藏即overflow: hidden；不难想到ul的父元素也是需要相对定位的即 position: relative;上面就是通过浮动实现图片轮播的原理，下面将简述切换效果速度有快到慢的原理，代码如下：

setInterval(function() {
        leader = leader + (target - leader ) / 10;
        ul.style.left = leader + "px";
    },30);

这部分代码便是控制速度有快到慢进行切换的核心代码

gang456789

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
轮播图的实现，并且切换速度有快变慢

不多说，直接上代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin: 0; padding: 0;} ul,ol{list-style:none;} img {
复制链接

扫一扫