jQuery实现轮播图效果


Posted in jQuery onNovember 26, 2019

使用jQuery实现轮播图,废话不多说,直接上代码了。

HTML部分

其中,图片和路径是我电脑中的,你需要自己准备好图片,然后写你自己图片的路径。

<div class="slider">
 <ul>
 <li><a href="#" ><img src="images/1.jpg" alt=""></a></li>
 <li><a href="#" ><img src="images/2.jpg" alt=""></a></li>
 <li><a href="#" ><img src="images/3.jpg" alt=""></a></li>
 <li><a href="#" ><img src="images/4.jpg" alt=""></a></li>
 <li><a href="#" ><img src="images/5.jpg" alt=""></a></li>
 </ul>
 
 <div class="arrow">
 <span class="left"><</span>
 <span class="right">></span>
 </div>

 <div class="box">
 <ul>
 <li class="show"></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </div>
</div>

CSS部分

* {
margin: 0;
padding: 0;
list-style: none;
}

.slider {
width: 790px;
height: 340px;
margin: 100px auto;
position: relative;
}

.slider>ul>li {
display: none;
position: absolute;
}

.slider li:first-child {
display: block;
}

.arrow {
display: none;
}

.slider:hover .arrow,
.slider:hover .box {
display: block;
}

.left,
.right {
width: 30px;
height: 60px;
font-size: 30px;
background-color: rgba(0, 0, 0, 0.1);
color: white;
position: absolute;
top: 50%;
margin-top: -30px;
line-height: 60px;
text-align: center;
cursor: pointer;
}

.left:hover,
.right:hover {
background-color: rgba(0, 0, 0, .5);
}

.left {
left: 0;
}

.right {
right: 0;
}

.box {
width: 150px;
height: 20px;
position: absolute;
left: 50%;
margin-left: -75px;
bottom: 20px;
display: none;
}

.box li {
width: 12px;
height: 12px;
background-color: white;
border-radius: 50%;
display: inline-block;
float: left;
margin-left: 12px;
}

.show{
background-color: orangered !important;
}

JS部分

你要引入jQuery这个库,然后才能使用它。我这里的jQuery库版本是jquery-1.12.4。

$(function() {
var num = 0;
$(".right").click(function() {
num++;
if (num === $(".slider>ul>li").length) {
num = 0;
}
$(".slider li").eq(num).fadeIn().siblings("li").fadeOut();
$(".box li").eq(num).addClass("show").siblings("li").removeClass("show");
});

$(".left").on("click", function() {
num--;
if (num === -1) {
num = $(".slider>ul>li").length - 1;
}
$(".slider li").eq(num).fadeIn().siblings("li").fadeOut();
$(".box li").eq(num).addClass("show").siblings("li").removeClass("show");
});

$(".box li").on("click", function() {
var idx = $(this).index();
$(".slider li").eq(idx).fadeIn().siblings("li").fadeOut();
$(".box li").eq(idx).addClass("show").siblings("li").removeClass("show");
});
});

效果图

jQuery实现轮播图效果

以上就是jQuery实现轮播图效果的所有代码,希望对您有帮助!

更多关于轮播图效果的专题,请点击下方链接查看学习

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

jQuery 相关文章推荐
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jQuery树插件zTree使用方法详解
May 02 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 #jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 #jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 #jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 #jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 #jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 #jQuery
Jquery让form表单异步提交代码实现
Nov 14 #jQuery
You might like
解读PHP中的垃圾回收机制
2015/08/10 PHP
php中__toString()方法用法示例
2016/12/07 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
理解AngularJs指令
2015/12/10 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
javascript简易画板开发
2020/04/12 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
python能做哪方面的工作
2020/06/15 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
法学专业本科生自荐信范文
2013/12/17 职场文书
努力工作保证书
2015/02/28 职场文书
爱心募捐通知范文
2015/04/27 职场文书
HAM-2000摩机图
2021/04/22 无线电
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS