jQuery轮播图功能制作方法详解


Posted in jQuery onDecember 03, 2019

本文实例讲述了jQuery轮播图功能制作方法。分享给大家供大家参考,具体如下:

在写轮播图之前我们先看看这个轮播图完成后的样式是怎样的
jQuery轮播图功能制作方法详解
素材图片 :jQuery轮播图功能制作方法详解
jQuery轮播图功能制作方法详解
jQuery轮播图功能制作方法详解

jQuery轮播图功能制作方法详解

jQuery轮播图功能制作方法详解

代码

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/index.css" rel="external nofollow" >
</head>
<body>
  <div class="banner">
    <ul class="banner-img">
      <li class="show"><img src="img/1.jpg" alt="" class="src"></li>
      <li><img src="img/2.jpg" alt="" class="src"></li>
      <li><img src="img/3.jpg" alt="" class="src"></li>
      <li><img src="img/4.jpg" alt="" class="src"></li>
      <li><img src="img/5.jpg" alt="" class="src"></li>
    </ul>
    <div class="banner-body">
      <ul class="banner-body-img" id="bannerUl">
        <li class="active"><img src="img/1.jpg" alt="" class="src"></li>
        <li><img src="img/2.jpg" alt="" class="src"></li>
        <li><img src="img/3.jpg" alt="" class="src"></li>
        <li><img src="img/4.jpg" alt="" class="src"></li>
        <li><img src="img/5.jpg" alt="" class="src"></li>
      </ul>
      <div class="banner-text">
        <div class="text-active">
          <p>山河</p><p>一个人</p><p>我眺望远方</p>
        </div>
        <div>
          <p>夕阳</p><p>平静的湖水</p><p>美丽不可方物</p>
        </div>
        <div>
          <p>沙漠</p><p>广袤</p><p>一往无前</p>
        </div>
        <div>
          <p>温泉</p><p>游客</p><p>魂牵梦绕</p>
        </div>
        <div>
          <p>大海</p><p>一棵树</p><p>紫气东来</p>
        </div>
      </div>
    </div>
  </div>
  <script src="../js/jquery-2.1.1.js"></script>
  <script src="js/index.js"></script>
</body>
</html>

CSS代码

*{
  padding: 0;
  margin: 0;
}
body{
  background: #000;
}
.banner{
  margin-left: 15%;
  width: 70%;
  position: relative;
}
.src{
  max-width: 100%;
}
.banner-img{
  list-style: none;
}
.banner-body{
  width: 100%;
  position: absolute;
  bottom: 0;
  background: #fff;
}
.banner-img>li{
  display: none;
}
.banner-img>.show{
  display: block;
  animation: opcaty 2s;
}
@keyframes opcaty {
  from{
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}
.banner-body-img{
  margin: 5px;
  max-width: 60%;
  list-style: none;
}
.banner-body-img>li{
  display: inline-block;
  max-width: 18%;
}
.banner-body-img>.active{
  border-bottom: 2px solid #000;
  animation: left 2s;
}
@keyframes left {
  from{
    width : 0;
  }
  to{
    width: 100%
  }
}
.banner-text{
  width: 25%;
  position: absolute;
  bottom: 0;
  left: 70%;
  background: #493e56;
  color: #fff;
}
.banner-text>div{
  overflow:auto;
  width: 100%;
  margin: 10px;
  display: none;
}
.banner-text>.text-active{
  display: block;
}
.banner-text>div>p{
  margin: 10px 0px;
}

JS代码

// 构建索引值
var currIndex = 0;
// 初始化点击事件
initClick();
function initClick() {
  $(".banner-img li").hover(function () {
    $(".banner-body").stop().slideUp();
    clearInterval(timer);
  },function () {
    timer = setInterval("banner()",3000);
    $(".banner-body").stop().slideDown();
  })
  $('#bannerUl li').click(function(){
    $(this).addClass("active");
    $(this).siblings().removeClass("active");
    $(".banner-img li").eq($(this).index()).addClass("show");
    $(".banner-img li").eq($(this).index()).siblings().removeClass("show");
    $(".banner-text div").eq($(this).index()).addClass("text-active");
    $(".banner-text div").eq($(this).index()).siblings().removeClass("text-active");
    currIndex = $(this).index();
    clearInterval(timer);
    timer = setInterval("banner()",3000);
  });
}
//构建定时器
var timer = setInterval("banner()",3000);
function banner() {
  if (currIndex > 3) {
    currIndex = 0;
  } else {
    currIndex ++;
  }
  $(".banner-img li").eq(currIndex).addClass("show");
  $(".banner-img li").eq(currIndex).siblings().removeClass("show");
  $("#bannerUl li").eq(currIndex).addClass("active");
  $("#bannerUl li").eq(currIndex).siblings().removeClass("active");
  $(".banner-text div").eq(currIndex).addClass("text-active");
  $(".banner-text div").eq(currIndex).siblings().removeClass("text-active");
}

如上。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
jQuery实现影院选座订座效果
Apr 13 jQuery
jQuery实现弹幕特效
Nov 29 #jQuery
jquery实现直播弹幕效果
Nov 28 #jQuery
jQuery实现简单弹幕效果
Nov 28 #jQuery
jQuery实现轮播图效果
Nov 26 #jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 #jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 #jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 #jQuery
You might like
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
JS实现分页导航效果
2020/02/19 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
python动态视频下载器的实现方法
2019/09/16 Python
基于python监控程序是否关闭
2020/01/14 Python
python识别验证码图片实例详解
2020/02/17 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
如何提高python 中for循环的效率
2020/04/15 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
资源工程专业毕业生求职信
2014/02/27 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android