美味甜点网页选择更改图片练习

最新推荐文章于 2025-08-03 17:02:33 发布

筱陌呀

最新推荐文章于 2025-08-03 17:02:33 发布

阅读量557

点赞数 2

CC 4.0 BY-SA版权

分类专栏： DW 文章标签： DW html js

本文链接：https://blog.youkuaiyun.com/qq_44419470/article/details/103506624

DW 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的美味甜点图片轮播效果，展示了如何通过代码创建吸引人的视觉展示，包括黑森林、马卡龙、木材蛋糕等甜点的图片切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本博客链接：
https://blog.youkuaiyun.com/qq_44419470/article/details/103506624
在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播切换</title>
<link rel="stylesheet" type="text/css" href="../css/tupianlunboxiaoguo.css"/>
<link rel="stylesheet" type="text/css" href="../css/mycss.css"/>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>

<body>
<div id="box" class="box">
  <h1>美味甜点</h1>
  <div class="flex_box">
    <div id="img_box" class="img_box"> <img src="../images/heisenlin.jpg" alt="黑森林"> <span>黑森林</span></div>
      <ul id="img_list" class="img_list">
        <li><a href="#"> <img src="../images/heisenlin.jpg" alt="黑森林"/> <span>黑森林</span> </a></li>
        <li><a href="#"> <img src="../images/makalong.jpg" alt="马卡龙"/> <span>马卡龙</span> </a></li>
        <li><a href="#"> <img src="../images/mucaidangao.jpg" alt="木材蛋糕"/> <span>木材蛋糕</span> </a></li>
        <li><a href="#"> <img src="../images/paofu.jpeg" alt="泡芙"/> <span>泡芙</span> </a></li>
        <li><a href="#"> <img src="../images/shahedangao.jpg" alt="沙河蛋糕"/> <span>沙河蛋糕</span> </a></li>
        <li><a href="#"> <img src="../images/tilamisu.jpg" alt="提拉米苏"/> <span>提拉米苏</span> </a></li>
      </ul>
  </div>
</div>
<script src="../js/tupianlunboxiaoguo.js"></script>
</body>
</html>

@charset "utf-8";
/* CSS Document */
body{
	display: flex;
    justify-content: center;
}
.box{
    background-color:aquamarine;
    height: 800px;
    flex-basis: 1000px;/*设置第二个弹性盒元素的初始长度*/
}
.box h1{
    padding: 20px 0;
    text-align: center;
    color:#CC5AF3;
    letter-spacing: 6px;/*设置为h1元素的字母间距*/
}
.flex_box{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    background-color:aqua;
    padding-bottom: 20px;
}
.img_box{
    flex-basis: 800px;
    height: auto;
    position: relative;
}
.img_box img{
    width: 100%;
    height: auto;
}
.img_box span{
    position: absolute;
    bottom: -20px;
    left: -30px;
    color:#000000;
    font-size: 30px;
    text-shadow: 5px 5px 5px #181617;/*基本文字阴影*/
}
.img_list{
    margin: 50px;
    /*border: 1px solid #000;*/
    flex-basis: 1000px;
    justify-content: space-around;
    align-items: center;
    display: flex;
}
.img_list li{
    flex-basis: 180px;
    height: auto;
    /*border: 1px solid #000;*/
}
.img_list li a{
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #c4c4c4;
    background-color: #ff5a37;
    color: white;
}
.img_list li a img{
    width: 100%;
    height: auto;
}
.img_list li a span{
    display: block;
    /*border: 1px solid #000;*/
    text-align: center;/*设置文本的对齐方式*/
}



@media (max-width: 800px) {
    .img_box{
        order: 0;
        margin:0 10px;
    }
    .img_list{
        order: 0;
		margin: 0 10px 0 0;
        flex-direction: column;
        flex-basis: 300px;
        margin-top: 0;
    }
    .flex_box{
        flex-flow: row nowrap;
    }
    .img_box span{
        bottom: -20px;
        left: -5px;
    }
}

@charset "utf-8";
/* CSS Document */

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;border-width: 0;}
body{
	font-family:"楷体","黑体";
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
    color: black;
}

$(function () {

    var $as = $("#img_list").find("a");
    var $imgs = $as.find("img");
    var $bigImg = $("#img_box img");
    var $bigImgSpan = $("#img_box span");

    //设置每一个小图的监听事件
    $as.each(function (index) {
        $(this).on('click', function () {
            $bigImg.fadeOut(1000, function () {
                $bigImg.attr("src", $imgs.eq(index).attr("src"));
       $bigImgSpan.text($imgs.eq(index).attr("alt"));
            });
			
            $bigImg.fadeIn(1000);
        });
    });
});