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实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jquery检测上传文件大小示例
Apr 26 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/08/30 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
纯js实现背景图片切换效果代码
2010/11/14 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
js实现文字截断功能
2016/09/14 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
大众服装店创业计划书范文
2014/01/01 职场文书
写给老师的表扬信
2014/01/21 职场文书
要账委托书范本
2014/09/15 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
2015年消防工作总结
2015/04/24 职场文书
债务追讨律师函
2015/06/24 职场文书
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA