原生js + css3 仿渡一首页（轮播图 + 炫酷导航栏 ）

最新推荐文章于 2022-06-01 00:07:09 发布
最新推荐文章于 2022-06-01 00:07:09 发布
阅读量2.4k 收藏 25
点赞数 6
分类专栏： js实战案例 文章标签： 原生js css3炫酷导航栏 轮播图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41257129/article/details/90475964
版权

大致是效果图（录屏鼠标位置可能有点错位）在这里插入图片描述

这个首页原版是用jQuery写的，小柒用原生js仿写这个首页（涉及简单的ES6箭头函数语法），例如jQuery里的淡入淡出语法转为原生js的实现过程等。

整个js代码是由简单的函数模块实现

导航栏用到主要涉及到css3的animation、关键帧、transition、伸缩盒子
轮播图就是分为 点击小圆点切换 ，以及自动播放

代码都有详细注释：

html部分：

<body>
    <div class="wrapper">
        <!-- 头部 -->
        <div class="circle-box" id="_circle-box">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </div>
        <header id="header">
            <nav class="navbar">
                <div class="logo-box" id="_logo-box">
                    
                </div>
                <div class="container">
                    <ul class="nav-right" id="_nav-right">
                        <li class="active"> 
                            <a href="#" >首页</a>
                        </li>
                        <li>
                            <a href="#">HTML5</a>
                        </li>
                        <li>
                            <a href="#">CSS3</a>
                        </li>
                        <li>
                            <a href="#">javaScript</a>
                        </li>
                        <li>
                            <a href="#">关于我们</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
        <div class="swiper-box" id="_swiper">
            <ul class="img-box" id="_img-box">
                <li>
                    <a href="#">
                        <img src="img/5.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/2.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/6.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/5.png" alt="">
                    </a>
                </li>
            </ul>
            <dic class="order-box" id="_order-box">

            </dic>
        </div>
    </div>
</body>

css部分：

 *{
    padding:0;
    margin: 0;
    list-style: none;
}
body {
    overflow-x: hidden;
}

/* 头部 */
.wrapper .circle-box {
    width: 42px;
    height: 42px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    opacity: 0;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    /* 元素在主轴方向对齐的方式 */
    justify-content: center;
    /* 元素在侧轴方向对齐的方式 */
    align-items: center;
    /* 调整主轴为侧轴 */
    flex-direction: column;
    margin-top: 33px;
    transition: all 1.5s ease-in-out;

}
.wrapper .circle-box>.bar{
    background-color: #000;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    margin: 2px 0;
}
.wrapper header {
    position: fixed;
    top: 0;
    z-index: 5;
    width: 100%;
    height: 110px;
    background-color: #222;
    /* animation: fade 1s ease-in-out forwards; */
    /* animation-play-state: paused; */
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
header .navbar {
    position: relative;
    padding: 0 15px;
    height: 110px;
}
header .logo-box {
    position: absolute;
    top:50%;
    left: 20%;
    margin-top: -21px;
    display: inline-block;
    width: 42px;
    height: 45px;
    background: url('img/wan.jpg');
    background-size: 100% 100%;
    margin-left: -15px;
    transition: all 1s ease-in-out;
}
 
header .container {
    padding: 0 15px;
}
header .container .nav-right {
    float: right;
    margin-right: 110px;
    height: 110px;
}
header .container .nav-right>li {
    float: left;
    height: 110px;
    position: relative;
    /*超出部分隐藏  */
    overflow: hidden;
}

header .container .nav-right li::after {
    content: "";
    position: absolute;
    width: 0%;
    bottom: 4px;
    transition: width 0.8s ease-in-out;
    border-bottom: 2px solid #ccc;
}
/* li hover之后 伪元素的变换*/
header .container .nav-right li:hover::after {
    /* 宽度撑满*/
    width: 100%;
}

header .container .nav-right>li>a {
    position: relative;
    display: inline-block;
    width: 116px;
    line-height: 110px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    left:0;
    transition: all 0.5s ease-in-out;
}
header .container .nav-right li.active a {
    color: burlywood;
}

/* banner部分 */
.swiper-box {
    width: 100%;
    height: 600px;
    margin-top: 110px;
    position: relative;
}
.swiper-box .img-box {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0; 
    height: 100%;
}
.swiper-box .img-box>li {
    display: inline-block;
    height: 100%;;
}

.swiper-box .img-box>li img {
     vertical-align: middle;
     width: 100%;
     height: 100%;
}
.swiper-box .order-box {
    position: absolute;
    bottom: 2%;
    width: 100%;
    text-align: center;
    height: 30px;
}
.swiper-box .order-box  li{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 15px;
    border-radius: 50%;
    cursor: pointer;
    background-color: lightgray;
}
.swiper-box .order-box  li.active{
    background-color: #be926f;
}

js部分：

 window.onload = function() {
    var imgBox = document.getElementById('_img-box');
    var swiper = document.getElementById('_swiper');
    var ul  = document.createElement('ul');
    var header = document.getElementById('header');
    var circle = document.getElementById('_circle-box');
    var nav_right = document.getElementById('_nav-right');
    var logo_box = document.getElementById('_logo-box');
    var as = nav_right.getElementsByTagName('a');
    var imglis = imgBox.children;
    var leader = 0;
    var target = 0;
    var current = 0; // 当前序列
    var autoTimer = null;
    init();
    function init() {
        // 头部
        animate();
        navClick();
        // banner部分
        setBanner();
        // 创建小圆点
        createSquare();
        // 自动播放
        autoPlay();
        swiper.addEventListener('mouseleave',function() {
            clearInterval(autoTimer);
            autoPlay();

        });
        swiper.addEventListener('mouseenter',function(){
            clearInterval(autoTimer);
            autoTimer = null;
        })      
    }
    function animate() {
       // 页面滚动大于0时触发
        window.onscroll =  () => {
            var scrollTop = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if(scrollTop > 0){
                fadeIn();
            }            
            if(scrollTop <= 0){
                fadeOut();
            }
        }
        // 头像被点击时显示
        circle.addEventListener("click",() => {
                fadeOut();
         });
    }
    // 淡入
    function fadeIn() {
        header.style.animation = " fadeOut 1s ease-in-out forwards";
        circle.style.left =  (window.innerWidth - 60)+ 'px';
        circle.style.opacity = 1;
        logo_box.style.left =  (window.innerWidth - 60)+ "px";
        logo_box.style.opacity = 0;
        for(let i = 0;i < as.length;i++){
            as[i].style.left = 90 +'px';
        }
    }
    // 淡出
    function fadeOut() {
        header.style.animation = " fadeIn 1s ease-in-out forwards";
        circle.style.left =  0 + 'px';
        circle.style.opacity = 0;
        logo_box.style.left =  20 + '%';
        logo_box.style.opacity = 1;
        for(let i = 0;i < as.length;i++){
            as[i].style.left = 0 +'px';
        }
    }
    // 点击导航条li文字颜色改变
    function navClick() {
        var nav_right = document.getElementById('_nav-right');
        var lis = nav_right.children;
        for(let i = 0;i < lis.length;i++)
        {
            lis[i].onclick = function() {
                for( let j = 0;j < lis.length;j++)
                {
                    lis[j].className = '';
                }
                this.classList.add('active');
        }
        }
    }
    // 设置banner的ul宽度以及每个li的宽度
    function setBanner() {
        var clientWidth = document.documentElement.clientWidth;// 检测屏幕宽度
        imgBox.style.width = clientWidth*4 + 'px';
        for(let i = 0;i < imglis.length;i++)
        {
            imglis[i].style.width = clientWidth + 'px';
        }
        
    }
    // 生成小圆点
    function createSquare() {
        var orderBox = document.getElementById('_order-box'); 
        orderBox.appendChild(ul);
        for( let i = 0; i < imglis.length -1;i++)
        {
            var temp = document.createElement('li');
            ul.appendChild(temp);
        }
        ul.children[0].classList.add('active');
        let lis  = ul.children;
        for(let i = 0;i < lis.length;i++)
        {
            lis[i].addEventListener('mouseover',() => {
                for(let j = 0;j < lis.length;j++){
                    lis[j].classList.remove('active');
                }
            this.className = 'active';
            // 轮播图
            slider(i);
            });
        }
    }
          
    // 轮播图
    function slider(index) {
         current = index;
        if(current === imglis.length)// 当current = 4时，让imgBox的left立即等于 - imgBox.offsetWidth / 4
        {
            imgBox.style.left = - imgBox.offsetWidth / 4 + 'px' ;
            target = leader  = 0;// 一定要重新记录，否则会发生回溯的现象
            current = 1;// 设置为1，播放的下一张为第二张
        }
        for(let i = 0; i < ul.children.length;i++) // 根据序列值调整 小圆点的背景色
        {
            const element = ul.children[i];
            if (i === current )
            {
                element.style.backgroundColor = '#be926f';
            }
            else {
                element.style.backgroundColor = 'lightgray';
            }
        }
        //  这个if判断一定要放在for循环的后面 
        if(current === imglis.length -1)// 当current = 3时，第一个小圆点的背景亮起来
        {
            ul.children[0].style.backgroundColor = '#be926f';
        }
        target = imgBox.offsetWidth / 4 * current;
        clearInterval(imgBox.timer);
        imgBox.timer = setInterval(() => {
            leader = leader + (target - leader) / 10;
            imgBox.style.left = -leader + 'px';
            if(Math.abs(imgBox.offsetLeft - target) < 1)
            {
                clearInterval(imgBox.timer);
                imgBox.style.left = target+ 'px';
            }
          
        },30);
    }
    
    function autoPlay() {
        autoTimer = setInterval(function() {
                slider(current + 1);
        },3000);
    }
     
}
crazy的蓝色梦想
关注
  • 6
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现简单的轮播图（非常简单，一看就懂）
风丶不会停息
03-15 12万+
主要思路：先将需要轮播的4张图使用绝对定位让其重叠在banner这个盒子中，然后遍历所有的图片将其隐藏，再获取当前图片的index值，根据当前的index值设置当前的图片显示出来。设置间歇定时器setInterval每隔1秒使得index的值加1，如果大于图片个数则index=0，每隔1秒调用changeImg()函数，改变图片的显示。li项的实现原理一样，总的来说就是围绕index的值来进行设置...
纯CSS3炫酷圆形导航菜单特效
01-10
纯CSS3炫酷圆形导航菜单特效~~~~~~~~~~~~~~~~~~~~~~~~~~
js 特效，超炫酷的
03-14
超炫酷特效，js的，要的速去，
js轮播图，带导航
清新de菜的博客
06-27 369
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
js实现可切换轮播图（附有导航条）
m0_55411748的博客
08-27 2905
利用原生js实现轮播图，可以自动轮播可暂停，为了展示效果还利用bootstrap.css实现了导航栏
使用原生JS实现轮播图（导航点联动）
FATCATS博客
12-18 1755
原生JS实现简单轮播1.思路2.布局3.实现 1.思路 轮播图的实现，实际上是操作ul的边距值（本质就是操作可视范围的显示隐藏），使用盒子装着这个较长的图片画廊，盒子的宽度，就是图片的宽度，画廊的长度，可以动态设置，但是作为讲解就直接给出固定的大小了。 2.布局 1.div（盒子） <!-- 基本模型搭建，最后一张图片应该是第一张图片的 这样看起来连贯比较丝滑--> <div class="jd_banner"> <ul>
JavaScript实战 轮播图（底部导航栏方式切图）
关北道.
11-26 1121
先上效果图： 也可自行进入网站查看效果：轮播图 (导航栏切图)(点我查看效果) 话不多说，直接上代码，有问题可私信或者评论！ <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>轮播图</title> <meta name="viewport" content="width=device-width"> <style>
HTML/CSS/JS实现二级菜单导航+轮播图
热门推荐
轻风起自远东
02-05 1万+
学习了HTML、CSS和JavaScript后，总得做点东西练练手，于是干脆跟着效果做了个类似于慕课网的轮播效果，配上一个二级菜单导航，具体效果如下： 首先来说说这个项目中用的比较多的知识点： CSS定位——绝对定位和相对定位的搭配使用，用的非常多 JavaScript——实现三秒换图、按下按钮换图、按下小圆点换图、鼠标移动到主菜单上即显示二级菜单等功能 div块标签 首先是整个页面
原生javascript实现二级联动导航菜单和轮播图动画特效
阿花的博客
01-27 1029
Javascript实现二级菜单和轮播图特效并不麻烦主要是要把思路理清楚，需要实现什么功能，实现这些功能需要做些什么，怎么做。
JS原生之-----带导航的轮播图jq版
欣欣博客
09-29 1145
带导航的轮播图jq版
动态粒子
Ryeol的博客
09-10 428
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html, bod.
带有导航条和轮播图效果的网站设计.zip
08-05
使用DW工具，带有轮播图效果和导航条的网站设计工程实训，有十余个静态网页组成，制作较为精美，可以评论进行了解查看
js 炫酷网站你看了绝对惊讶
hyshucom
04-13 411
http://dhtmlx.com/
jquery酷炫js特效个人主页
ICode联盟
12-16 219
下载地址 dd:
原生js封装transformCSS.js
拎着壳儿跑的蜗牛
09-16 3860
原生transformCSS.js方法封装 transform属性 CSS3中，transform属性允许盒子模型被进行二维或三维空间坐标的变换。使用该属性之后，元素主要可以进行以下变换： 旋转(rotate) 平移(translate) 缩放(scale) 倾斜(skew) 开始transform原生封装 transform函数可以获取 我们自己设置的transform属性 tran...
网页设计期末大作业-景点旅游网站（含导航栏，轮播图，样式精美）
weixin_43474701的博客
06-01 830
页设计期末结课的作业（资源链接在文末），样式很精美，链接基本正常，详细情况入下图所示：
web 完整轮播图 前端 轮播图 详细
qq_40305022的博客
12-20 2065
web 完整轮播图 前端 轮播图预览：应用 HTML + CSS + JSHTMLCSSJS 预览： 应用 HTML + CSS + JS JS代码分析如下： html代码比较简短，这里用js生成标签元素，init函数 btnChange函数主要是实现底部的按钮的动态效果 focusControl函数用于设置左右焦点 animate函数用于实现轮播图动画效果 HTML <html lang="en"> <head> <meta charset="UTF-8">
网站banner导航条轮播图
ICode联盟
09-27 324
下载地址 网站顶部导航菜单带轮播图效果，适合模块比较多的网站，带有左侧和顶部导航菜单。 dd:
Bootstrap（导航栏&轮播图&按钮组&画像）
weixin_56996467的博客
04-01 1408
目录 准备工作 一、导航栏 二、轮播图 三、按钮组 准备工作 将Bootstrap的js库和css样式都导入到项目中 一、导航栏 HTML代码： <!-- 导航条组件 --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <!-- 固定容器 --> <div class="container"> <a class="navbar...
用原生js，css，html写一个轮播图
最新发布
06-03
好的，以下是一个简单的轮播图的HTML、CSS和JavaScript代码： HTML代码： ```html <div class="carousel"> <div class="slide"> <img src="image1.jpg" alt="Image 1"> </div> <div class="slide"> <img src="image2.jpg" alt="Image 2"> </div> <div class="slide"> <img src="image3.jpg" alt="Image 3"> </div> </div> ``` CSS代码： ```css .carousel { position: relative; width: 100%; height: 400px; overflow: hidden; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .slide.active { opacity: 1; } ``` JavaScript代码： ```javascript const slides = document.querySelectorAll('.slide'); let currentSlide = 0; function nextSlide() { slides[currentSlide].classList.remove('active'); currentSlide = (currentSlide + 1) % slides.length; slides[currentSlide].classList.add('active'); } setInterval(nextSlide, 3000); ``` 这里的轮播图采用了绝对定位和透明度过渡来实现图片的切换。JavaScript代码中使用setInterval函数定时切换图片，每隔3秒执行一次nextSlide函数，该函数会将当前图片的active类删除，然后将currentSlide指向下一张图片，最后给下一张图片添加active类。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值