jQuery实现简单轮播图效果


Posted in jQuery onDecember 27, 2020

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

介绍:这里是我使用了计时器的方式实现图片每隔几秒切换然后添加了两个按钮用于上一张和下一张的切换

1、导入jQuery文件

<script src="jquery-3.5.1.js"></script>

2、设置图片的样式

<style>
  *{
   margin: 0;
   padding: 0;
  }
  #box{
   width: 300px;
   height: 300px;
   border: 2px solid red;
  }
  #box img{
   position: absolute;
   display: none;
  }
  #box :first-child{
   display: block;
  }
  .page{
   list-style: none;
   display: flex;
   width: 300px;
   justify-content: space-around;
  }
  .page li{
   border: 1px solid red;
   border-radius: 50%;
   width: 20px;
   height: 20px;
   text-align: center;

  }
  .active{
   background: red;
  }
 </style>
 <script src="./jquery.js"></script>
</head>
<body>
 <div id="box">
  <img src="./img/1.jpg" alt="">
  <img src="./img/2.jpg" alt="">
  <img src="./img/3.jpg" alt="">
  <img src="./img/4.jpg" alt="">
 </div> 
 <ul class="page" id="page" >
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
 </ul>
<button id="next">下一张</button>
<button id="prev">上一张</button>

3 进行图片的轮播实现方式

/*
 绝对定位 -- 摞起来
 通过下标 -- 显示当前 --其他兄弟 隐藏
*/
  <script>
   var index=0;
    // 移动方法
   function move(){
    index++;
    if (index>=$("#box img").length) {
     index=0;
    }
    $("#box img").eq(index).show().siblings().hide();
    $("#page li").eq(index).addClass("active").siblings().removeClass("active");
   }
   //计时器的实现方法
   var t=setInterval(move,2000);
   //鼠标移动到图片会停止离开继续轮播
   $("#box").hover(function(){
    clearInterval(t)
   },function(){
    t=setInterval(move,2000)
   })

   $("#page li").click(function(){
    index= $(this).index() ;
    $("#box img").eq(index).show().siblings().hide();
    $("#page li").eq(index).addClass("active").siblings().removeClass("active");
   })
   //下一张的点击
   $("#next").click(function(){
    move();
   })
   //上一张的点击
   $("#prev").click(function(){
    index--;
    // 判断如果下标超过固有图片的数量时,从头开始轮播
    if (index<0) {
     index=$("#box img").length-1;
    }
    $("#box img").eq(index).show().siblings().hide();
    $("#page li").eq(index).addClass("active").siblings().removeClass("active");
   })

</script>

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

jQuery 相关文章推荐
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 #jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 #jQuery
jquery实现图片放大镜效果
Dec 23 #jQuery
jQuery实现增删改查
Dec 22 #jQuery
jQuery实现本地存储
Dec 22 #jQuery
jQuery实现电梯导航模块
Dec 22 #jQuery
jQuery实现tab栏切换效果
Dec 22 #jQuery
You might like
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
对Python 数组的切片操作详解
2018/07/02 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
Python操作Jira库常用方法解析
2020/04/10 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
美国家居装饰店:Pier 1
2019/09/04 全球购物
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
党员公开承诺书范文
2014/03/25 职场文书
公民授权委托书范本
2014/09/17 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
师范生教育见习总结
2015/06/23 职场文书
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
美元符号 $
2022/02/17 杂记