jquery实现轮播图效果

(编辑：jimmy 日期: 2024/10/1 浏览：2)

效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>slider</title>
 <style type="text/css">
 *{
 margin: 0;
 padding: 0;
 }
 #slideshow{
 position: relative;
 width: 512px;
 height: 384px;
 margin: 0 auto;
 overflow: hidden;
 }
 #slideshow>ul,#slideshow>ul>li,#slideshow-nav{
 position: absolute;
 }
 #slideshow>ul>li{
 list-style: none;
 }
 #slideshow-nav{
 bottom: 20px;
 width: 100%;
 text-align: center;
 }
 #slideshow-nav>span{
 display: inline-block;
 width: 15px;
 height: 15px;
 margin: 0 7px;
 font-size: 0;
 background-color: rgba(255,255,255,.3);
 border-radius: 50%;
 user-select: none;
 -webkit-user-select: none;
 transition: all .5s;
 -webkit-transition: all .5s;
 cursor: pointer;
 }
 #slideshow-nav>span.active{
 background-color: #fff;
 }
 </style>
</head>
<body>
 <div id="slideshow">
 <ul>
 <li><img src="/UploadFiles/2021-04-02/231154e8ab2zanwd59a2w2.jpg">

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

上一篇：jQuery中 bind的用法简单介绍

下一篇：JS中解决谷歌浏览器记住密码输入框颜色改变功能

jquery实现轮播图效果

一句话新闻

最新资源