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实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery实现电梯导航模块
Dec 22 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+dbfile开发小型留言本
2006/10/09 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python生成验证码实例
2014/08/21 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
详解Python3 pickle模块用法
2019/09/16 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
Python 私有化操作实例分析
2019/11/21 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
C语言笔试集
2012/07/24 面试题
新年晚会主持词
2014/03/24 职场文书
学生期末评语大全
2014/04/30 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
导游词之无锡东林书院
2019/12/11 职场文书