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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jquery replace方法去空格
May 08 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 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
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
PHP 简单日历实现代码
2009/10/28 PHP
php $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
几行js代码实现自适应
2017/02/24 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
Python双链表原理与实现方法详解
2020/02/22 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
保时捷设计:Porsche Design
2019/03/30 全球购物
Android面试题及答案
2015/09/04 面试题
生物技术毕业生自荐信
2013/10/23 职场文书
餐饮业会计岗位职责
2013/12/19 职场文书
教师产假请假条范文
2014/04/10 职场文书
心理健康活动总结
2014/04/30 职场文书
大跃进口号
2014/06/16 职场文书
殡葬服务心得体会
2014/09/11 职场文书
中秋节随笔
2015/08/15 职场文书
讨论nginx location 顺序问题
2022/05/30 Servers