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插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
基于jQuery拖拽事件的封装
Nov 29 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相当简单的分页类
2008/10/02 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
php常用正则函数实例小结
2016/12/29 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
JS打印gridview实现原理及代码
2013/02/05 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
python实现代理服务功能实例
2013/11/15 Python
python的绘图工具matplotlib使用实例
2014/07/03 Python
python逆向入门教程
2018/01/15 Python
python入门教程 python入门神图一张
2018/03/05 Python
如何在python中写hive脚本
2019/11/08 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
python3 配置logging日志类的操作
2020/04/08 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
采购内勤岗位职责
2015/04/13 职场文书
红色影片观后感
2015/06/18 职场文书
2015年国培研修感言
2015/08/01 职场文书
干部外出学习心得体会
2016/01/18 职场文书
护士工作心得体会
2016/01/25 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
MongoDB数据库之添删改查
2022/04/26 MongoDB