jquery实现简单自动轮播图效果


Posted in jQuery onJuly 29, 2020

本文实例为大家分享了jquery实现简单自动轮播图的具体代码,供大家参考,具体内容如下

jquery实现简单自动轮播图效果

代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="author" content="Jxz">
  <title></title>
  <script src="../jquery-3.1.1.js"></script>
  <style>
    ul,li{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    #box{
      width: 520px;
      height: 280px;
      margin: 100px auto;
      position: relative;
    }
    #box .list li{
      position: absolute;
      top: 0;
      left: 0;
      display: none;
    }
    #box .list li.current{
      display: block;
    }
    #box .count{
      position: absolute;
      left: 10px;
      bottom: 10px;
    }
    #box .count li{
      float: left;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fa0;
      text-align: center;
      line-height: 20px;
      margin-left: 10px;
      color: #fff;
      opacity: 0.8;
      cursor: pointer;
    }
    #box .count li.current{
      background-color: #f60;
      opacity: 1;
    }
    #box .btn{
      position: absolute;
      bottom:10px;
      right: 15px;
    }
    
    #box .btn li{
      width: 50px;
      height: 50px;
      background-color: #ccc;
      float: right;
      margin-left: 15px; 
      opacity: 0.8;
      cursor: pointer;
      text-align: center;
      line-height: 50px;
    }
  </style>
</head>
<body>
  <div id="box">
    <ul class="list"> 
      <li class="current"><img src="img/01.jpg" alt=""></li>
      <li><img src="img/02.jpg" alt=""></li>
      <li><img src="img/03.jpg" alt=""></li>
      <li><img src="img/04.jpg" alt=""></li>
      <li><img src="img/05.jpg" alt=""></li>
    </ul>
    <ul class="count">
      <li class="current">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <ul class="btn">
      <li class="right">></li>
      <li class="left"><</li>
    </ul>
  </div>
</body>
</html>
<script>
  
  // var aLi=$('.list li');
  // var aNum=$('.count li');
  // 记录当前显示的图片的索引
  var current=0;
  // 保存定时器
  var timer=null;
  timer=setInterval(autoPlay,1000)
  // 自动播放
  function autoPlay(){
    current<$('.count li').length-1?current++:current=0;
    show()
  }
  function show(){
    // aLi.hide()
    $('.list li').hide()
    .eq(current).show();
    // aNum.removeClass()
    // .eq(current).addClass('current')
    $('.count li').eq(current).toggleClass('current').siblings().removeClass('current');   
  }
  // 手动
  $('.count li').mouseenter(function(){
    current=$(this).index()
    show()
  })
  // 按钮控制选图
  $('#box .left').click(function(){
    current>0?current--:current=4;
    show()
  })
  $('#box .right').click(function(){
    current<$('.count li').length-1?current++:current=0;
    show()
  })
  // 鼠标进图自动暂停
  $('#box').hover(function(){
    clearInterval(timer);
  },function(){
    timer = setInterval(autoPlay,1000);
  })


</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery加载单文件vue组件的方法
Jun 20 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 #jQuery
jquery实现简单拖拽效果
Jul 20 #jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 #jQuery
jquery实现有过渡效果的tab切换
Jul 17 #jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 #jQuery
jQuery 添加元素和删除元素的方法
Jul 15 #jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 #jQuery
You might like
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
JavaScript的Function详细
2006/11/14 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
python实现的一个p2p文件传输实例
2014/06/04 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
python版本的读写锁操作方法
2016/04/25 Python
python非递归全排列实现方法
2017/04/10 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
python 多线程重启方法
2019/02/18 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
六年级学生期末评语
2014/12/26 职场文书
出国留学自荐信模板
2015/03/06 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL