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实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
PHP 金额数字转换成英文
2010/05/06 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
PHP内核探索:变量概述
2014/01/30 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
往光标所在位置插入值的js代码
2013/09/22 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
python复制文件的方法实例详解
2015/05/22 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
python 读取修改pcap包的例子
2019/07/23 Python
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
类的核心特性有哪些
2014/01/01 面试题
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
销售行业个人求职自荐信
2013/09/25 职场文书
编辑找工作求职信范文
2013/12/16 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
党员政治学习材料
2014/05/14 职场文书
幸福家庭标语
2014/06/27 职场文书
法制主题班会教案
2015/08/13 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL