幽灵资源网 Design By www.bzswh.com

本文实例为大家分享了jQuery实现轮播图展示的具体代码,供大家参考,具体内容如下

设计:

jQuery实现轮播图源码

根据上图可以看出,轮播图需要以下元素:外面的盒子div、放置图片集合的盒子ul、放置两侧按钮的盒子div、下侧顺序按钮div

源代码如下:

一、html源码如下:

<div class="outer">
 
 <ul class="img">
 <li><a><img src="/UploadFiles/2021-04-02/1.jpg">

二、css样式实现:

<style>
 /*去掉默认浏览器样式*/
 *{
 margin: 0;
 padding: 0;
 }
 /*去掉li标签默认样式*/
 li{
 list-style: none;
 }
 /*最外层盒子样式处理:
 1.设置与轮播图高宽一致
 2.设置纵向距顶部50px,水平居中
 3.设置自己为固定位置
 */
 .outer{
 height: 470px;
 width: 590px;
 margin: 50px auto;
 position:relative;
 }
 /*轮播图片集合处理:
 1.将其设置为脱离文档流
 2.设置距顶部和左侧都为0
 */
 .img li{
 position: absolute;
 top: 0;
 left: 0;
 }
 /*顺序按钮区域处理:
 1.设置脱离文档流
 2.通过设置text-align、width使其整体水平居中
 3.设置距离底部20px
 */
 .num{
 position: absolute;
 text-align: center;
 width: 100%;
 bottom: 20px;
 }
 /*顺序按钮处理:
 1.将其设置为行级及块级兼容显示
 2.设置其宽高
 3.设置背景色及字体颜色
 4.设置字体水平居中
 5.通过设置line-height与height一致,使其字体纵向居中
 6.设置其样式为圆形
 7.增加按钮左右间距
 */
 .num li{
 display: inline-block;
 width: 20px;
 height: 20px;
 background-color: darkgray;
 color: white;
 text-align: center;
 line-height: 20px;
 border-radius: 50%;
 margin: 0 20px;
 }
 /*左、右按钮相同部分处理:
 1.设置其脱离文档流
 2.设置其宽高
 3.设置背景色及字体颜色
 4.设置字体水平居中
 5.通过设置line-height与height一致,使其字体纵向居中
 6.通过设置top、margin-top使其整体纵向居中
 7.默认不显示
 */
 .btn{
 position: absolute;
 width: 20px;
 height: 50px;
 background-color: darkgray;
 color: white;
 text-align: center;
 line-height: 50px;
 top: 50%;
 margin-top: -25px;
 display: none;
 }
 /*左侧按钮处理:
 设置左侧为0
 */
 .left_btn{
 left: 0;
 }
 /*右侧按钮处理:
 设置右侧为0
 */
 .right_btn{
 right: 0;
 }
 /*鼠标悬浮至轮播图区域时左、右按钮处理:
 1.设置左右按钮显示样式为行级块级兼容
 2.设置鼠标放置在左右按钮时样式为小手
 */
 .outer:hover .btn{
 display: inline-block;
 cursor: pointer;
 }
 /*设置顺序按钮初始按钮样式:
 设置为红色(由于样式级别问题会导致设置无效,可通过两种方式解决:
 1.后面加上!important
 2.将css定位写详细,比如:.outer .num .current{……
 )
 */
 .current{
 background-color: red!important;
 }
 
</style>

三、JQuery实现:

<script src="/UploadFiles/2021-04-02/jquery-3.3.1.min.js">

完整源码下载:jQuery轮播图源码

更多关于轮播图效果的专题,请点击下方链接查看学习

javascript图片轮播效果汇总

jquery图片轮播效果汇总

Bootstrap轮播特效汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
jQuery,轮播图

幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com