jQuery实现淘宝轮播图
我爱撸码，撸码使我感到快乐
大家好，我是Counter
今天给大家分享的是利用jQuery来实现淘宝轮播图，揭开这层神秘的面纱，CSS样式就不做过多的赘述了，主要就是实现的原理，也就是jQuery，老样子，每行基本都打上了我理解的注释，表达的可能不是很好，但是理解理解就OK，欢迎一起技术探讨，一起成长。
再讲讲轮播图的需求吧，一打开网址，轮播图就会自己每3秒切换到下一张，总共5张，一直轮播，当你鼠标进入图片区域，那么图片不再自动轮播，你可以点击向左的按钮，也可以点击向右的按钮，你点左图片就切到上一张，点右就切到下一张，并且你可以点击下面的小原点，点哪跑那张，并且鼠标离开，轮播图又会自己每3秒跑起来，好了，废话不多说，先上效果，可以试试哦，应该没bug，嘿嘿。。。
效果如下：
ps：如果效果出不来，那么请刷新下页面
代码给出:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>淘宝轮播图</title>
<!-- CSS样式 -->
<style>
body, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.wrapper {
width: 520px;
margin: 50px auto 0;
font-size: 0;
}
.box {
position: relative;
width: 520px;
height: 280px;
overflow: hidden;
}
.box .img-list {
position: absolute;
top: 0;
left: 0;
width: 3120px;
height: 280px;
}
.box .img-list li {
display: inline-block;
width: 520px;
height: 280px;
}
.box .img-list img {
width: 520px;
}
.wrapper .box span {
position: absolute;
display: inline-block;
top: 50%;
margin-top: -25px;
width: 30px;
height: 50px;
line-height: 47px;
text-align: center;
cursor: pointer;
font-size: 18px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
z-index: 999;
user-select: none;
}
.wrapper .box .left {
left: 0;
border-radius: 0 10px 10px 0;
}
.wrapper .box .right {
right: 0;
border-radius: 10px 0 0 10px;
}
.box .dot {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
.dot .dot-list {
display: inline-block;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
.dot-list .item {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
margin: 2px;
cursor: pointer;
}
.dot-list .active {
background-color: #ff6700;
} </style>
</head>
<body>
<div class="wrapper">
<div class="box">
<span class="left"><</span>
<span class="right">></span>
<ul class="img-list">
<li>
<a href="javascript:;">
<img src="http://img1.imgtn.bdimg.com/it/u=3094246468,617437449&fm=26&gp=0.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://ftp.nowamagic.net/librarys/images/92.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://img.mp.itc.cn/upload/20170706/88c62ffcfe8748a78e6b2d66c77ebbef_th.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://pic.58pic.com/58pic/16/17/72/24858PIC3hD_1024.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554278929&di=31b49ed3ef2bde4304c49a8632c79456&imgtype=jpg&er=1&src=http%3A%2F%2Fimages.ali213.net%2Fpicfile%2Fpic%2F2013%2F12%2F15%2F584_20131215140559601.png" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://img1.imgtn.bdimg.com/it/u=3094246468,617437449&fm=26&gp=0.jpg" alt="">
</a>
</li>
</ul>
<div class="dot">
<ul class="dot-list">
<li class="item active"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</div>
</div>
</div>
<!-- jQuery已在线移入,这边注释 -->
<!-- <script src="../jquery-3.3.1.js"></script> -->
<!-- jQuery -->
<script>
// 设置比较索引的最小值0，5
var minNum = 0;
var maxNum = 5;
// 刚开始索引为0
var index = 0;
// 设置一个计时器为空
var counter = null;
// 设置最小移动距离520，因为这边每张图片都为宽度520px，高度280px
var limWidth = 520; // 设置自动轮播函数
function autoMove() {
// 如果计时器不为空的话那么跳出，计时器不为空，说明当前有计时器在跑，那么你就老老实实的跑当前的计时器，别给搞事
if (counter != null) {
return;
}
// 如果计时器为空的话，那么开启一个每3秒执行一次autoPlay的函数
counter = setInterval(autoPlay, 3000);
} // 自动轮播函数，其实很简单，向函数cliMove传递参数right，就好比，一个人每3秒点击一次右边的小按钮，不过这变有电脑去执行
function autoPlay() {
cliMove('right');
}
// 执行函数，传递形参，代表方向
function cliMove(direction) {
// 因为在这边有涉及到整个ul宽度的变化的动画，stop()函数有两个参数，涉及到jQuery动画，第一个参数意思是，是否还要保留动画队列，false不保留，true保留。第二个参数意思是，是否立即执行完当前的动画，true是，false不是，那这边选择true的原因是我需要你立即响应当前用户的操作，防止用户快速点击左右按钮，移开鼠标，而动画却还在移动。这边第一个参数填false或者true，已经影响不了什么了，因为当前动画立即执行，动画队列肯定是没有了，所有第一个参数填false或者true，已经不打紧了
$('.img-list').stop( false, true );
// 如果用户点击的是右边的按钮
if ( direction == "right" ) {
// 那么索引值加1，没点击一次在原有基础上加一次
index++;
// 如果索引值大于5了
if ( index > 5) {
// 意味着用户浏览到第六张了，而这边第六张正是第一张，为了实现无缝连接，所以这样处理，看着只有5张，实际上头尾两张是一样的，所以有六张
// 那么将ul的left设置为0，又回到了第一张，注意这边是迅速移动到第一张，因为用了css属性，而不是animate移动动画
$('.img-list').css({
left: 0
})
// 同时将索引值设置为1，注意这边的1为第二张，在大多数编程语言中，数组都是从0开始，JS也是一样的
index = 1;
}
}
// 如果传递用户点击的是左边的按钮
else if ( direction == "left") {
// 那么索引值减1
index--;
// 如果索引值小于0的话，运用的原理跟上面雷同，意味着迅速移到第六张
if ( index < 0 ) {
$('.img-list').css({
left: maxNum * -limWidth
})
// 同时索引值变为4，意味着变为第五张
index = 4;
}
}
// 每次index变换时小原点的背景也跟着变换,与图片一一对应,但是图片一共是6张,小原点就5个,所有这边进行判断,如果index大于4的话就返回0即代表着第一个小原点,否则的话图片就随着index变化而变化
dotMove($('.item').eq(index > 4 ? 0 : index)); // 不关点击的是左边的还是右边的，最后结果都是要执行这句话的，这步是动画移动的关键，
// ul的left值设为当前索引与每张图片最小宽度的乘积，这边的负值是意味着，这个ul定位相对于父级left的负值
$('.img-list').animate({
left: index * -limWidth
});
} // 绑定ul父级的鼠标进入，离开事件，jQuery链式调用，如果鼠标进入，那么清空当前自动轮播的计时器，如果鼠标离开，那么重新执行自动轮播的函数
$('.box').mouseenter(function () {
clearInterval(counter);
counter = null;
}).mouseleave(function () {
autoMove();
}) //绑定点击事件，如果点击了右边按钮，那么触发函数cliMove，这个函数在上面已经详细注释了，并传入right，图片就会跟你按的次数，进行移动播放
$('.right').click(function () {
cliMove('right');
})
$('.left').click(function () {
cliMove('left');
}) // 绑定下面小原点事件，如果点击了其中任意一个小原点，那么获取到当前点击的小原点的索引，并且赋值给index，并且执行函数cliMove，不传入参数，因为此时，希望图片与小原点一一对应
$('.item').click(function () {
index = $(this).index();
cliMove('');
}) // 点击小原点后将会触发cliMove函数，并且在这个函数中，执行了dotMove，移除当前小原点的CSS样式，向dotMove函数传入当前点击的小原点所在的位置，并且设置其CSS样式，即点击的小原点背景变为橘黄色
function dotMove(dom) {
$('.active').removeClass('active');
dom.addClass('active');
} // 当页面刷新，先执行一边自动轮播的函数，这个时候图片就会自己轮播起来了
autoMove(); </script>
</body>
</html>
是不是感觉用jQuery实现比原生JS方便太多了，便捷太多了，没错就是这样滴。
jQuery实现淘宝轮播图的更多相关文章
- 原生JavaScript之“淘宝轮播图”
轮播图是我们学习原生js的必经之路 它包含很多基本知识的运用,像this的使用,DOM的操作,还有setInterval的使用和清除,浮动与定位等等,很好的考察了我们的基础知识牢不牢固, 话不多说,直 ...
- JS学习笔记 - 运动 - 淘宝轮播图
<script> window.onload=function () { var oDiv=document.getElementById('play'); var aBtn=oDiv.g ...
- jQuery淡入淡出轮播图实现
大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...
- 用jQuery写的轮播图
效果图: GitHub地址:https://github.com/123456abcdefg/Javascript 大家可以下载源码查看. 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的, ...
- jQuery实现简易轮播图的效果
(图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...
- jQuery自适应-3D旋转轮播图
3D旋转轮播图 本例源于(站长之家实例http://sc.chinaz.com/jiaoben/170215391070.htm) 其他相似示例(https://www.cnblogs.com/inc ...
- 用纯css、JavaScript、jQuery简单的轮播图
完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为 img ...
- Android使用Path实现仿最新淘宝轮播广告底部弧形有锯齿的问题以及解决办法
在前面一篇博文<Android高仿京东淘宝自动无限循环轮播控件的实现思路和过程>中已经基本介绍了实现轮播广告的基本思路和过程,但是仔细观察淘宝的轮播广告栏,发现在轮播广告栏的底部有个小小的 ...
- JQuery实现一个轮播图
1.HTML <div class="banner"> <div class="b_main"> <div class=" ...
随机推荐
- 小Q系列故事——屌丝的逆袭
小Q系列故事——屌丝的逆袭 Problem Description 毕业于普通本科的小Q一直自称是资深屌丝,不仅学校不知名,甚至他自己在这个普通学校也是默默无闻——直到临近毕业的时候,班里5朵金花中的 ...
- php 删除空格 和 回车
//删除空格 和 回车 function trimall($str){ $oldchar=array(""," ","\t","\ ...
- swp文件已存在
vim编辑某个文件时,提示.xxx.sh.swp文件已存在是因为异常退出后,linux会生成一个swp文件,无论选择什么,下次进入还是会提示ll 命令无法看到文件使用 rm -rf .xxx.sh.s ...
- P1_jemeter安装--jdk安装
学习的python,需要下载jemter做接口测试. 一..jMeter介绍 Apache组织开发的基于JAVA压力测试工具 100%纯JAVA开发,完全可移植性 可用于测试静态和动态资源 多协议-- ...
- Codeforces 1089E - Easy Chess - [DFS+特判][2018-2019 ICPC, NEERC, Northern Eurasia Finals Problem E]
题目链接:https://codeforces.com/contest/1089/problem/E Elma is learning chess figures. She learned that ...
- SQL Fundamentals: 子查询 || 分析函数(PARTITION BY,ORDER BY, WINDOWING)
SQL Fundamentals || Oracle SQL语言 子查询(基础) 1.认识子查询 2.WHERE子句中使用子查询 3.在HAVING子句中使用子查询 4.在FROM子句中使用子查询 5 ...
- redis问题与解决思路
问题现象: 集群状态 1主 2从,主没有开启bgsave,从开启bgsave.现象所有redis可以访问,进行操作.主不断开始bgsave 1从停止bgsave. 主日志报错# Connection ...
- odoo中self的使用
一:self是什么 目前新版的Odoo中使用到的self,是对 游标cr.用户ID.模型.上下文.记录集.缓存 的封装. 我们可以通过 self.XX 获取到这些封装的东西,比如:self.cr. ...
- odoo二次开发 tips
1.model属性 每个对象(即class)一般由字段(变量)和函数组成,每个对象对应着数据库中的一张表,驼峰命名方式 models.Model 基础模块,会根据字段和模型名在后台数据库生成对应得表文 ...
- winform做的excel与数据库的导入导出
闲来无事,就来做一个常用的demo,也方便以后查阅 先看效果图 中间遇到的主要问题是获取当前连接下的所有的数据库以及数据库下所有的表 在网上查了查,找到如下的方法 首先是要先建立一个连接 _connM ...