一个关于JS实现图片轮换的期末大作业

雨落の等待

已于 2023-06-17 18:35:32 修改

阅读量173

点赞数 1

文章标签：课程设计 html css javascript

于 2023-06-17 18:27:48 首次发布

本文链接：https://blog.csdn.net/weixin_64313535/article/details/131262887

版权

文章展示了如何创建一个简单的登录界面，包括账号密码的校验和3D模型的集成。接着，详细说明了图片轮播界面的构建，包括图片切换逻辑、类别选择和背景变化。每个类别切换后，下一张图片会相应变化，同时提供了手动和自动切换图片的功能。

摘要由CSDN通过智能技术生成

一、登录界面

首先就是登录界面，主要是因为不会连数据库，所以就只写了个登录，注册和忘记密码之类的都没写，账号和密码都是12345678，之前在看别人代码时发现了一个3D模型，很喜欢就直接copy过来了，登录界面的Javascript代码比较简单，就一个校验功能，校验成功就跳转页面，否则账号和密码自动清空。

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        
        body {
            width: 100%;
            height: 100%;
            background-image: url(image/loginBg.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }
     
        .header {
            width: 400px;
            height: 380px;
            background: rgba(0, 0, 0, .2);
            border-radius: 14px;
            display: flex;
            flex-direction: column;
            margin: 100px 0 0 200px;
            padding: 20px;
        }
     
        h1 {
            font-size: 30px;
            color: #fff;
        }
     
        label {
            margin-top: 40px;
            width: 350px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
     
        label>span {
            font-size: 24px;
            color: #fff;
        }
     
        label>input {
            border-radius: 20px;
            border: 1px solid #ccc;
            padding: 0 20px;
            background-color: rgba(255, 255, 255, .6);
            box-sizing: border-box;
            outline: none;
            width: 240px;
            height: 30px;
            font-size: 18px;
        }
     
        .del {
            margin-top: 30px;
            display: flex;
            justify-content: space-around;  /*实现水平居中对齐*/
            width: 380px;
        }
     
     
        .pwsd {
            display: flex;
            margin-top: 45px;
        }
     
        .pwsd>input {
            width: 24px;
            height: 24px;
     
        }
     
        .pwsd>span {
            font-size: 18px;
            color: #fff;
            margin-left: 20px;
        }
     
        button {
            width: 110px;
            height: 60px;
            background: rgba(0, 0, 0, .6);
            border: none;
            border-radius: 12px;
            letter-spacing: 5px;
            font-size: 22px;
            color: #fff;
     
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>用户登录</h1>
        <label for="username"><span>账号：</span><input type="text" id="user"></label>
        <br>
        <label for="password"><span>密码:</span><input type="password" id="pwd"></label>
        <br>
        <div class="del">
            <button onclick="login()">登录</button>
        </div>
    </div>
     
    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
    <script>
	    L2Dwidget.init({
	        "model": {
	            jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
	            "scale": 1
	        },
	        "display": {
	            "position": "right", //看板娘的表现位置
	            "width": 120,  //小萝莉的宽度
	            "height": 280, //小萝莉的高度
	            "hOffset": 0,//小萝莉的X偏移量
	            "vOffset": -100//小萝莉的Y偏移量
	        },
	        "mobile": {
	            "show": true,
	            "scale": 0.5
	        },
	        "react": {
	            "opacityDefault": 0.9,//小萝莉的透明度
	        }
	    });
	</script>
    <script>
        //默认账号和密码
        var dateUse = "12345678";
        var dateObj = "12345678";
        function login() {
            //登录
            var user = document.getElementById('user');
            var pwd = document.getElementById('pwd');
            if (user.value == dateUse && pwd.value == dateObj) {
                alert('登陆成功');
                location.href = "picture.html";//登录成功则跳转到图片轮换页面

            } else {
                alert('用户名或者密码错误')
                user.value="";
                pwd.value="";
            }
        }

    </script>
</body>
</html>

二、图片轮播界面

图片轮播界面主要就是图片展示页面，每隔5秒自动切换图片，或者点击图片两边的按钮切换，图片变换时背景也会一起转变，图片类型总共分为5大类，点击即可切换类别，类别切换后，图片不会立即切换，下一张才会是类别切换后的图片。

图片轮播页面主要由导航栏和显示栏，导航栏用无序列表来实现，点击想要的类别后，先令所有类别字体颜色为浅蓝色，后将点击的类别字体颜色改为橙色，并改变图片地址，而显示栏则主要就是由div盒子组成，盒子最中心为<img>，通过定时器不断改变图片地址来实现图片轮换。

<!DOCTYPE html>
<html lang="en">
<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>Head</title>
    <link href="formdemos.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="header">
        <img src="image/Logo.png" class="logo">
        <nav class="navbar">    
            <ul>
                <li><button id="btn1" onclick="btn1Event()">自然风光</button></li>
                <li><button id="btn2" onclick="btn2Event()">野生动物</button></li>
                <li><button id="btn3" onclick="btn3Event()">传统文化</button></li>
                <li><button id="btn4" onclick="btn4Event()">人物写真</button></li>
                <li><button id="btn5" onclick="btn5Event()">二次元</button></li>
            </ul>
        </nav>
    </div>
    <div class="backgroundImg">
        <div class="banner">
            <div class="warp">
                <div class="item"><img id="picture" src="image/nature/33.jpg" alt=""></div>
            </div>
            <div><button id="left"><</button></div> 
            <div><button id="right">></button></div>
        </div>
    </div>
    <script>
        var i=Math.round(Math.random()*49+1);    //图片自变量
        var photoAddress="nature";    //默认图片地址
        var lastClick;
        var banner=document.getElementsByClassName('banner');
        var leftBtn=document.getElementById('left');
        var rightBtn=document.getElementById('right');
        document.getElementById("btn1").style.color="#009933";
        //按钮颜色初始化
        function btnInit(){
            document.getElementById("btn1").style.color="#cfccf6";
            document.getElementById("btn2").style.color="#cfccf6";
            document.getElementById("btn3").style.color="#cfccf6";
            document.getElementById("btn4").style.color="#cfccf6";
            document.getElementById("btn5").style.color="#cfccf6";
        }

        //自然风光
        function btn1Event(){
            btnInit();
            document.getElementById("btn1").style.color="#009933";
            photoAddress="nature"; 
            i=Math.round(Math.random()*49+1); 
        }
        //野生动物
        function btn2Event(){
            btnInit();
            document.getElementById("btn2").style.color="#009933";
            photoAddress="animals";  
            i=Math.round(Math.random()*49+1);
        }
        //传统文化
        function btn3Event(){
            btnInit();
            document.getElementById("btn3").style.color="#009933";
            photoAddress="tradition";  
            i=Math.round(Math.random()*49+1);
        }
        //人物写真
        function btn4Event(){
            btnInit();
            document.getElementById("btn4").style.color="#009933";
            photoAddress="portrait";  
            i=Math.round(Math.random()*49+1);
        }
        //二次元
        function btn5Event(){
            btnInit();
            document.getElementById("btn5").style.color="#009933";
            photoAddress="cartoon";  
            i=Math.round(Math.random()*49+1);
            
        }
        
        //为左右按钮添加事件
        leftBtn.addEventListener('click',function(){
            lastFn();
            clearInterval(t1);
            t1 = setInterval(nextFn, 5000);
        });
        rightBtn.addEventListener('click',function(){
            nextFn();
            clearInterval(t1);
            t1 = setInterval(nextFn, 5000);
        });

        //下一张图片
        function nextFn()
        {
            i++;
            if(i==51){
                i=1;
            }
            var tempAddress="image/"+photoAddress+"/"+i+".jpg";
            document.getElementById("picture").src=tempAddress;
            document.getElementsByClassName("backgroundImg")[0].style.backgroundImage ="url("+tempAddress+")";
        }
        
        //上一张图片
        function lastFn(){
            i--;
            if(i==0){
                i=50;
            }
            var tempAddress="image/"+photoAddress+"/"+i+".jpg";
            document.getElementById("picture").src=tempAddress;
            document.getElementsByClassName("backgroundImg")[0].style.backgroundImage ="url("+tempAddress+")";
        }

        //设置定时器，自动向下播放图片

        var t1 = setInterval(nextFn, 5000);
        banner.onmouseover = function () {
           clearInterval(t1);}    
        banner.onmouseout = function () {
            t1 = setInterval(nextFn, 5000)      
         } 
    </script>
    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
    <script>
	    L2Dwidget.init({
	        "model": {
	            jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
	            "scale": 1
	        },
	        "display": {
	            "position": "right", //看板娘的表现位置
	            "width": 120,  //小萝莉的宽度
	            "height": 280, //小萝莉的高度
	            "hOffset": 0,//小萝莉的X偏移量
	            "vOffset": -100//小萝莉的Y偏移量
	        },
	        "mobile": {
	            "show": true,
	            "scale": 0.5
	        },
	        "react": {
	            "opacityDefault": 0.5,//小萝莉的透明度
	            "opacityOnHover": 0.2
	        }
	    });
	</script>
</body>
</html>

CSS样式修饰代码

        /* css样式初始化 */
        * {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            outline: none;
            border: none;
            text-decoration: none;
            text-transform: capitalize;
            transition: .2s linear;
        }
        
        html {
            font-size: 62.5%;
        }
        /* header样式初始化*/
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background:rgba(240,240,240);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        /* 导航样式 */
        .navbar ul{
            display: flex;
            
        }
        
        .navbar ul li{
            font-weight: bold;
            width: 180px;
            list-style: none;
            text-align:center;
        }
        .navbar ul li button {
            width: 180px;
            line-height: 45px;
            font-size: 30px;
            font-weight: bold;
            border: none;
            color: #cfccf6;
        }
        .navbar ul li button:hover{
            color: #009933;
        }
        
        /*图片轮换*/
        .backgroundImg{
            position:fixed; 
            top: 0; 
            left: 0;
            width:100%; 
            height:100%;
            background-size: 120%;
            background-repeat: no-repeat;
            background-image: url(image/nature/33.jpg);
        }
        /*背景滤镜*/
        .backgroundImg:before {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: rgba(211, 211, 244, 0.317);
                content: "";
                }
        
        .banner {
            width: 900px;
            height: 600px;
            position: relative;
            margin: 150px auto;
        }
        .banner .wrap {
            width: 100%;
        }
        .banner .wrap .item {
            width: 100%;
        }
        .item img {
            width: 900px;
            height: 600px;
            vertical-align: top;
            position: absolute;
            transition: 0.3s ease 0s;
        }
        #left {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translatey(-50%);    /*将元素在垂直方向上向上平移50%的高度*/
            cursor: pointer;    /*光标形状更改为指针形状*/
            width: 50px;
            height: 80px;
            font-size: 50px;
            line-height: 70px;
            text-align: center;
            color: #D6D8D4;
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
        }
        #right {
            position: absolute;
            right: 0px;
            top: 50%;
            transform: translatey(-50%);
            cursor: pointer;
            width: 50px;
            height: 80px;
            font-size: 50px;
            line-height: 70px;
            text-align: center;
            color: #D6D8D4;
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
        }

PS：图片可以自己找自己喜欢的放入到文件里，而如果需要源程序的话可以直接私信作者哦，觉得对你有用的话，可以送我一个赞吗