jquery实现轮播图特效
(编辑：jimmy 日期: 2025/11/3 浏览：3 次 )
本文实例为大家分享了jquery实现轮播图的具体代码，供大家参考，具体内容如下
一、实现功能：
1、通过定时实现图片自我轮播
2、当图片轮播到最后一张时，会从第一张开始继续轮播
3、点击小圈圈图标能自动切换到对应图片
4、鼠标悬浮图片上停止图片轮播，当鼠标移开图片，会继续轮播
5、鼠标悬浮图片上会显示左右键图标，鼠标离开，会隐藏左右键图标
6、点击左键图标会切换到上一张图片，当切换到第一张图片时，再次点击左键图标会切换到最后一张图片；点击右键图标会显示到下一张图片，当切换到最后一张图片时，再次点击右键图标会切换达到第一张图片。
二、实现代码：
1、css代码：
<style>
/*设置body*/
body{
margin:0;
padding:0;
font:16px "微软雅黑",sans-serif;
}
/*设置轮播图的边框相对定位*/
.play-box{
position:relative;
width:500px;
height:313px;
margin:100px auto;
border:1px solid #ccc;
}
/*设置边框下的图片*/
.play-box img{
width:500px;
height:313px;
border:0;
}
/*设置超链接下的所有图片不显示*/
.play-box a{
display:block; /*现在是文本状态，要修改为块状*/
overflow:hidden; /*隐藏超过边框高度的图片*/
opacity:0; /*默认图片为全透明*/
height:0; /*默认高度为0*/
transition:opacity .5s; /*默认透明度过渡时间为0.5s*/
}
/*设置当前图片显示*/
#imgList a.current{
opacity:1; /*默认图片显示*/
height:auto; /*默认高度为自动*/
}
/*设置列表ul*/
ul{
margin:0;
padding:0;
list-style:none;
}
/*设置列表ul下的li*/
ul li{
width:10px;
height:10px;
margin:0 4px;
font-size:0;
border-radius:50%;
background-color:#fff;
cursor:pointer;
float:left;
}
/*当图片变化时，图标也跟着变化*/
ul li.current{
background-color:red;
}
/*设置图标绝对定位*/
.iconList{
position:absolute;
bottom:10px;
left:50%;
margin-left:-45px;
}
/*设置向左向右图标*/
.sliderbar{
position:absolute;
top:50%;
margin-top:-25px;
width:30px;
height:50px;
font-family:simsun;
color:#fff;
text-align:center;
line-height:50px;
background-color:#000;
opacity:.6;
display:none;
cursor:pointer;
}
/*设置向左图标*/
.slidebar-left{
left:0;
}
/*设置向右图标*/
.slidebar-right{
right:0;
}
</style>
2、body代码
<!--轮播图边框--> <div id="playBox" class="play-box"> <!--图片列表--> <div id="imgList"> <a href="#" target="_blank" class="current"> <img src="/UploadFiles/2021-04-02/5.jpg">3、jquery代码：
<script src="/UploadFiles/2021-04-02/jquery-3.4.1.min.js">三、实现效果图
1、默认显示效果
2、鼠标悬浮效果
精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：用jQuery实现抽奖程序