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 21 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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
基于Zend的Captcha机制的应用
2013/05/02 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
复习Python中的字符串知识点
2015/04/14 Python
python中的tcp示例详解
2018/12/09 Python
深入解析神经网络从原理到实现
2019/07/26 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
给排水专业应届生求职信
2013/10/12 职场文书
《四季》教学反思
2014/04/08 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
安全标兵事迹材料
2014/08/17 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
公司租房协议书范本
2014/10/08 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
电视新闻稿
2015/07/17 职场文书