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+Ajax实现用户名重名实时检测
Jun 01 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jquery实现手风琴案例
May 04 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
jQuery实现日历效果
Sep 11 jQuery
html中两种获取标签内的值的方法
Jun 16 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
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
如何使用php输出时间格式
2013/08/31 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
python 实现归并排序算法
2012/06/05 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
详解CSS3:overflow属性
2020/11/17 HTML / CSS
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
旅游管理专业生自荐信范文
2014/01/02 职场文书
违反学校规定检讨书
2014/01/18 职场文书
教学实验楼管理制度
2014/02/01 职场文书
基层党员对照检查材料
2014/08/25 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
身份证丢失证明
2015/06/19 职场文书