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设置图片等比例缩小的方法
Apr 29 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 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的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
没有document.getElementByName方法
2013/08/19 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
js验证上传图片的方法
2015/05/12 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
python通过加号运算符操作列表的方法
2015/07/28 Python
在Python中使用正则表达式的方法
2015/08/13 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
Python构建图像分类识别器的方法
2019/01/12 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
python 写一个水果忍者游戏
2021/01/13 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
幼儿如何来做好自我评价
2013/11/05 职场文书
毕业实习评语
2014/02/10 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
《去年的树》教学反思
2014/04/11 职场文书
幼儿园评语大全
2014/04/17 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书