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实现文字打印动态效果
Apr 21 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 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下使用SimpleXML 处理XML 文件
2010/02/27 PHP
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
使用javascipt---实现二分查找法
2013/04/10 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
vue实现分页组件
2020/06/16 Javascript
Python数组条件过滤filter函数使用示例
2014/07/22 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
Django之模板层的实现代码
2019/09/09 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
python 实现性别识别
2020/11/21 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
英语老师推荐信
2014/02/26 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
行政处罚告知书
2015/07/01 职场文书
Python中itertools库的四个函数介绍
2022/04/06 Python