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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
jquery实现广告上下滚动效果
Mar 04 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一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
php修改数组键名的方法示例
2017/04/15 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
firefox插件Firebug的使用教程
2010/01/02 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
python使用建议与技巧分享(一)
2020/08/17 Python
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
一些Solaris面试题
2013/03/22 面试题
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
通息工程毕业生自荐信
2013/10/16 职场文书
应征英语教师求职信
2013/11/27 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
《角的度量》教学反思
2016/02/18 职场文书
《打电话》教学反思
2016/02/22 职场文书
用Python创建简易网站图文教程
2021/06/11 Python