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仿京东商品放大浏览页面
Jun 06 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jquery图片放大镜效果
Jun 23 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
dojo 之基础篇
2007/03/24 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
使用Python横向合并excel文件的实例
2018/12/11 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
原料仓管员岗位职责
2014/04/12 职场文书
纪检监察建议书
2014/05/19 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
网络管理员岗位职责
2015/02/12 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书