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+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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创建PDF中文文档
2006/10/09 PHP
PHP4引用文件语句的对比
2006/10/09 PHP
一个简易需要注册的留言版程序
2006/10/09 PHP
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
PHP编程函数安全篇
2013/01/08 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
javascript表单正则应用
2017/02/04 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
iview实现图片上传功能
2020/06/29 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
python定时截屏实现
2020/11/02 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
知名企业招聘广告词大全
2014/03/18 职场文书
布达拉宫的导游词
2015/02/02 职场文书
同事打架检讨书
2015/05/06 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书