jQuery实现简单轮播图效果
更新时间：2020年12月27日 10:45:43 作者：阡禧
这篇文章主要为大家详细介绍了jQuery实现简单轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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 mobile库,需要的朋友可以参考下2015-12-12
jQuery调用WebService的实现代码,需要的朋友可以参考下。2011-06-06
这篇文章主要介绍了jQuery中hasClass()方法用法,实例分析了hasClass()方法的功能、定义及验证匹配元素是否包含指定类的使用技巧,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了jQuery函数的第二个参数获取指定上下文中的DOM元素,需要的朋友可以参考下2014-05-05
节点的移动在应用中比较常见，如何动态移动某一节点来实现某一特殊效果，下面有个不错的示例，希望对大家有所帮助2014-01-01
这篇文章主要为大家详细介绍了用jQuery实现抽奖程序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-04-04
这篇文章主要介绍了jquery+ajax直接提交表单的方法,涉及jQuery调用ajax进行表单提交所涉及的表单序列化、数值传递与处理、回调函数等相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06
这篇文章主要为大家详细介绍了jquery实现表格行拖动排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
本文是小编根据bootstrap的折叠设计的树状图显示效果，只有二级显示，可以用在简单的目录等。对实现代码感兴趣的朋友可以参考下本文2016-11-11
jQuery源码解读之extend()与工具方法、实例方法详解
这篇文章主要介绍了jQuery源码解读之extend()与工具方法、实例方法,分析了jQuery中extend()源码、功能与相关使用技巧,需要的朋友可以参考下2017-03-03
最新评论