Jquery实现轮播图效果（fadeIn()和fadeOut()方法的应用）

2019独角兽企业重金招聘Python工程师标准>>>

1.jquery.js从官网上下载最新的，使用外链导入到html中，

下载地址：

http://jquery.com/download/

2.图片可以自行准备，我这里的图片是用的京东的轮播图片，左右按钮是随便在网上扒的。(本来代码有注释，上传代码段，自动给去掉了，郁闷)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>轮播图</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}div {position: relative;margin: 0 auto;width: 590px;height: 470px;overflow: hidden;top: 50px;}.btn_leftBtn {position: absolute;width: 55px;height: 55px;top: 207px;left: 0px;}.btn_rightBtn {position: absolute;width: 55px;height: 55px;top: 207px;right: 0px;}</style><script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
</head>
<body><div class="wrapper"><ul class="sliderPage"><li><a href=""><img src="img/jd01.jpg"></a></li><li><a href=""><img src="img/jd02.jpg"></a></li><li><a href=""><img src="img/jd03.jpg"></a></li><li><a href=""><img src="img/jd04.jpg"></a></li><li><a href=""><img src="img/jd05.jpg"></a></li><li><a href=""><img src="img/jd06.jpg"></a></li><li><a href=""><img src="img/jd07.jpg"></a></li><li><a href=""><img src="img/jd08.jpg"></a></li></ul><div class="btn_leftBtn"><img src="./img/slide-btnl.png"></div><div class="btn_rightBtn"><img src="./img/slide-btnR.png"></div></div><script>$(function() {var cnt = 0;    $(".wrapper .btn_leftBtn").click(function() {cnt++;if (cnt == $(".wrapper li").length) {cnt = 0;}$(".wrapper li").eq(cnt).fadeIn("fast").siblings("li").fadeOut();});$(".wrapper .btn_rightBtn").click(function(){cnt--;if (cnt == -1) {cnt = $(".wrapper li").length - 1;}$(".wrapper li").eq(cnt).fadeIn("fast").siblings("li").fadeOut();});    })</script>
</body>
</html>

3.执行效果图：

第一张图片

点击向左的按钮

点击向右的按钮

转载于:https://my.oschina.net/korabear/blog/1807878

Jquery实现轮播图效果（fadeIn()和fadeOut()方法的应用）相关推荐

Jquery实现轮播图效果
Jquery实现轮播图效果首先是html <div id="box"><img src="./day6/am/轮播图/img/1.jpg" ...
用jQuery实现轮播图效果（自动播放，能手动切换）
大家好,今天我和大家分享一下轮播图的实现,下面是我做的轮播图效果首先我们看到,它是由背景图片.方向图标和指示器组成.**我们发现背景图片.方向图标和指示器是层叠在一起的,所以布局时我们要用绝对定位. ...
高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下: http://www.demodashi.com/demo/12302.html 插件介绍这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公 ...
jQuery实现常见的轮播图效果
1.在网页中常见的一类轮播图如下图所示, 此处以小米官网(www.mi.com)为例进行说明说明:红色箭头标注的是左.右箭头:右下角蓝色箭头标注的是可以控制图片播放顺序的小圆点: 2.轮播图的特点 ...
用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
html轮播台袋效果,css3百叶窗轮播图效果
标题 #Con{width:900px; /*宽度*/ height:500px;/*高度*/ background:#9933FF;/*背景颜色*/ position:relative;} #con ...
网页直播源码，JQuery实现轮播图方法
网页直播源码,JQuery实现轮播图方法 html <!DOCTYPE html> <html> <head lang="en"><met ...
基于JQuery 编写轮播图插件
基于JQuery 编写轮播图插件不管是实际开发还是平时的小项目中 ,页面一定有且多个的轮播图,那么为了效率大家可以考虑封装这样的小插件.下面一起看看他的使用方法吧使用需要准备(往下滑动会看到): ...
html 图片轮播实例,简单实现轮播图效果的实例
一.要点: 1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播; ...

Jquery实现轮播图效果（fadeIn()和fadeOut()方法的应用）

Jquery实现轮播图效果（fadeIn()和fadeOut()方法的应用）相关推荐

最新文章

热门文章