前端实战小案例--升级版自适应宽度无缝轮播图

最新推荐文章于 2023-02-20 20:49:33 发布

朽木自雕xmzd

最新推荐文章于 2023-02-20 20:49:33 发布

阅读量876

点赞数 1

分类专栏：前端实战案例文章标签：轮播图前端实战

本文链接：https://blog.csdn.net/qq_16687863/article/details/101320339

版权

前端实战案例专栏收录该内容

20 篇文章 52 订阅

订阅专栏

想练习更多前端案例，请进个人主页，点击前端实战案例->传送门

觉得不错的记得点个赞?支持一下我0.0！谢谢了！

不积跬步无以至千里，不积小流无以成江海。

该轮播图可以自适应设备的宽度变化，（由于图片大小有限制，故没演示其他效果：无缝轮播、小圆点控制轮播、鼠标放在图片上停止轮播，移出则开始轮播等）效果如下：

代码如下：

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>分销系统|公众号开发|商城系统|小程序分销商城开发 德云网络科技</title>
    <script src="./js/index.js"></script>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="header">
        <div class="top-menu">
            <ul>
                <li><img src="./images/logo.png" style="padding-right: 92px;"></li>
                <li>首页</li>
                <li>分销系统</li>
                <li>消费全返</li>
                <li>系统O2O</li>
                <li>系统渠道商</li>
                <li>价格与服务</li>
                <li>售后服务</li>
                <li>关于我们</li>
                <li class="btn">
                    <input type="button" value="登录"><input type="button" value="免费试用">
                </li>
            </ul>
        </div>
    </div>
    <div id="banner">
        <div class="slide">
            <a href="#"><img src="./images/banner1.jpg"></a>
            <a href="#"><img src="./images/banner2.jpg"></a>
            <a href="#"><img src="./images/banner3.jpg"></a>
            <a href="#"><img src="./images/banner1.jpg"></a>
        </div>
        <ul class="slick-dots">
            <li><label></label></li>
            <li><label></label></li>
            <li><label></label></li>
        </ul>
    </div>
    <div id="content">

    </div>
    <div id="footer">

    </div>
</body>
</html>

index.js

// 轮播图js代码
window.onload = function () {
    var slide = document.getElementsByClassName('slide')[0];
    var imgs = document.getElementsByClassName('slide')[0].getElementsByTagName('img');
    var slick_dots = document.getElementsByClassName('slick-dots')[0].getElementsByTagName('label');
    // 切换图片的速度
    var margin_left = 0;
    //定义定时器timer
    var timer;
    //屏幕的宽度,根据屏幕的宽度自适应图片的宽度，（即自适应轮播图）
    var winWidth = document.documentElement.scrollWidth || document.body.scrollWidth;
    run();
    // 绑定轮播图图片鼠标移入移出事件
    for(let i=0;i<imgs.length;i++){
        imgs[i].onmousemove = function () {
            clearTimeout(timer);
            margin_left = -i*100;
            slide.style.marginLeft = margin_left + "%";
        };
        imgs[i].onmouseleave = function () {
            run();
        }
    }
    // 绑定轮播图小圆点鼠标移入移出事件
    for(let i=0;i<slick_dots.length;i++){
        slick_dots[i].onmousemove = function () {
            clearTimeout(timer);
            margin_left = -i*100;
            slide.style.marginLeft = margin_left + "%";
            changeDots(i);
        };
        slick_dots[i].onmouseleave = function () {
            run();
        }
    }
    // 运行轮播图滚动
    function run() {
        var n = (-margin_left%100 === 0)?1500:10;
        timer = setTimeout(run,n);
        if(margin_left === -300){
            margin_left = 0;
            slide.style.marginLeft = 0;
        }
        var index = Math.floor(-margin_left/100);
        if(index<3){
            changeDots(index);
        }
        slide.style.marginLeft = margin_left + "%";
        margin_left -= 1;
    }
    // 小圆点的背景色随轮播图滚动而滚动
    function changeDots(m) {
        // 改代码用于初始化所有原点长度
        for(let i=0;i<slick_dots.length;i++){
            slick_dots[i].style.width = "10px";
        }
        slick_dots[m].style.width = "35px";
    }
};

index.css

/*header：导航栏开始*/
#header{
    width: 100%;
    height: 88px;
    display: flex;
    justify-content: center;
}
.top-menu{
    width: 1200px;
    height: 88px;
}
.top-menu ul{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 19px;
    font-size: 14px;
    color: #333;
}
.top-menu .btn input{
    outline: none;
    height: 30px;
    border: 1px solid #4381ff;
    border-radius: 4px;
    cursor: pointer;
}
.top-menu .btn input:nth-child(1){
    width: 62px;
    color: #4381ff;
    background-color: #FFFFFF;
    margin-left: 25px;
    margin-right: 10px;
    cursor: pointer;
}
.top-menu .btn input:nth-child(2){
    width: 80px;
    color: #FFFFFF;
    background-color: #4381ff;
}
/*header：导航栏结束*/

/*banner：轮播图开始*/
#banner{
    height: 490px;
    width: 100%;
    position: relative;
    overflow: hidden;
}
#banner .slide{
    height: 100%;
    width: 400%;
}
#banner .slide a{
    display: inline-block;
    height: 100%;
    width: 25%;
    float: left;
}
#banner .slide img{
    height: 100%;
    width: 100%;
}
.slick-dots{
    position: absolute;
    width: 75px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    left: 50%;
    bottom: 21px;
    transform: translateX(-50%);
}
.slick-dots li label{
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: #DAE6FF;
    border-radius: 5px;
}

/*banner：轮播图结束*/

base.css

/*可以共用的样式*/
*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

朽木自雕xmzd

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端实战小案例--升级版自适应宽度无缝轮播图

想练习更多前端案例，请进个人主页，点击前端实战案例->传送门觉得不错的记得点个赞????支持一下我0.0！谢谢了！不积跬步无以至千里，不积小流无以成江海。该轮播图可以自适应设备的宽度变化，（由于图片大小有限制，故没演示其他效果：无缝轮播、小圆点控制轮播、鼠标放在图片上停止轮播，移出则开始轮播等）效果如下：代码如下：index.html <!DOCTYPE html...
复制链接

扫一扫