jquery实现轮播图特效

网络编程 2024/12/23 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

本文实例为大家分享了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图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。