简易的图片轮播

最新推荐文章于 2024-04-12 13:50:56 发布

原创最新推荐文章于 2024-04-12 13:50:56 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#图片轮播

本文介绍了一种使用HTML、CSS和jQuery实现的简易图片轮播效果，包括自动播放、手动切换和导航点功能。

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简易的图片轮播</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
* {
   margin:0px;
   padding:0px;
}
ul li {
   list-style:none
}
#slide {
   margin:0px auto;
   position:relative;
}
.slide_img li {
   position:absolute;
   display:none;
   top:0px;
   left:0px
}
.dotted {
   width:100%;
   position:absolute;
   bottom:10px;
   left:0px;
   font-size:0px;
   text-align:center;
}
.dotted li {
   width:16px;
   height:16px;
   background:rgba(255,255,255,0.5);
   font-size:14px;
   line-height:16px;
   text-align:center;
   display:inline-block;
   margin:0px 5px;
   cursor:pointer;
   border-radius:50%;
}
.dotted li span {
   display:inline-block;
   width:8px;
   height:8px;
   margin-top:4px;
   background:rgba(255,255,255,0.8);
   border-radius:50%;
}
.dotted .active {
   background:rgba(255,255,255,0.8);
}
.left,.right {
   height:50px;
   width:30px;
   background:rgba(255,255,255,0.5);
   position:absolute;
   top:0px;
   display:none;
   cursor:pointer;
   text-align:center;
   line-height:50px;
   font-family:"宋体";
   font-weight:bold;
}
.right {
   right:0px;
}
</style>
</head>
<body>
<div id="slide">
<ul class="slide_img">
<li><img src="http://www.jq22.com/img/cs/500x300-1.png"></li>
<li><img src="http://www.jq22.com/img/cs/500x300-2.png"></li>
<li><img src="http://www.jq22.com/img/cs/500x300-3.png"></li>
<li><img src="http://www.jq22.com/img/cs/500x300-4.png"></li>
</ul>
</div>