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查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现滚动效果
Nov 17 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 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
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
vue实现选中效果
2020/10/07 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
Python实现的简单算术游戏实例
2015/05/26 Python
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
详解python中的文件与目录操作
2017/07/11 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
简单了解什么是神经网络
2017/12/23 Python
python如何删除文件、目录
2020/06/23 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
《骑牛比赛》教后反思
2014/04/22 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
2014年度党员自我评议
2014/09/13 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python