本博客链接:
https://blog.csdn.net/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);
});
});
});