JavaScript滚动轮播图制作原理详解
更新时间：2022年03月29日 18:52:02 作者：周帅帅Love
这篇文章主要为大家详细介绍了JavaScript滚动轮播图制作原理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript滚动轮播图制作原理，供大家参考，具体内容如下
滚动轮播图
滚动轮播图布局关键：是所有图片并排在一起，所以unit的宽要足够宽。
克隆第一张图片追加到最后一张
右按钮拉动策略：先拉动，再瞬移
左按钮拉动策略：先瞬移，再拉动
与呼吸轮播图一样，需要做防流氓策略
复制代码：将我代码中的图片更换为你的图片，注意图片路径，还需要引入js库，我引入的是jquery-1.12.3.min.js的版本，引入的时候注意路径
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
}
.carousel {
width: 560px;
height: 300px;
margin: 50px auto;
border: 5px solid red;
position: relative;
overflow: hidden;
}
/* 滚动轮播图布局关键，是所有图片并排在一起
unit的宽要足够宽
*/
.carousel .unit {
position: absolute;
width: 9999px;
left: 0;
top: 0;
}
.carousel .unit li {
float: left;
width: 560px;
height: 300px;
}
.btns a {
position: absolute;
width: 30px;
height: 60px;
top: 50%;
margin-top: -30px;
background-color: rgba(0, 0, 0, .5);
color: #fff;
font-size: 20px;
line-height: 60px;
text-align: center;
}
.btns a:first-child {
left: 10px;
}
.btns a:last-child {
right: 10px;
}
.circles {
position: absolute;
width: 140px;
height: 20px;
left: 50%;
margin-left: -70px;
bottom: 30px;
}
.circles ol {
width: 150px;
}
.circles ol li {
float: left;
width: 20px;
height: 20px;
margin-right: 10px;
background-color: orange;
border-radius: 50%;
}
.circles ol li.cur {
background-color: yellow;
}
</style>
</head>
<body>
<div class="carousel" id="carousel">
<ul class="unit" id="unit">
<li><img src="images/0.jpg" alt=""></li>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
</ul>
<div class="btns">
<a href="javascript:void(0)" id="leftBtn"><</a>
<a href="javascript:void(0)" id="rightBtn">></a>
</div>
<div class="circles" id="circles">
<ol>
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
// 获取元素
var $unit = $("#unit");
var $leftBtn = $("#leftBtn");
var $rightBtn = $("#rightBtn");
var $circles = $("#circles ol li");
var length = $circles.length;
// console.log(length);
// 定义信号量 有效范围: 0, 1, 2, 3, 4
var idx = 0;
// 克隆第一张图片追加到最后一张
$unit.children("li:first").clone().appendTo($unit);
// 右按钮的点击事件
$rightBtn.click(function() {
// 防流氓
if ($unit.is(":animated")) {
return;
}
// 拉动策略: 先拉动， 再瞬移
idx++;
console.log(idx);
// 信号量 有效值是: 0, 1, 2, 3, 4, 5(5是猫腻图)
$unit.animate({"left": -560 * idx}, 1000, function() {
// 当猫腻图完全显示之后验证信号量
if (idx > length - 1) {
// idx 归零
idx = 0;
// 瞬间移动到真图
$unit.css("left", 0);
}
})
// 小圆点在1000ms之内，对应的是idx = 5 是猫腻图
// 0 - 4 是有效值， 5对应的是猫腻图
// 定义一个变量用于中转信号量
var i = idx <= 4 ? idx : 0;
$circles.eq(i).addClass("cur").siblings().removeClass("cur");
})
// 左按钮点击事件
$leftBtn.click(function() {
// 防流氓
if ($unit.is(":animated")) {
return;
}
// 左按钮的拉动策略: 先瞬移， 再拉动
idx--;
// 边界判断
if (idx < 0) {
idx = length - 1;
// 瞬间移动到猫腻图
$unit.css("left", -560 * length);
}
console.log(idx);
// 拉动
$unit.animate({"left": -560 * idx}, 1000);
// 当前小圆点加cur
$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
})
// 小圆点事件
$circles.mouseenter(function() {
// 改变信号量
idx = $(this).index();
console.log(idx);
// 拉动
$unit.stop(true).animate({"left": -560 * idx}, 600);
// 小圆点加cur
$(this).addClass("cur").siblings().removeClass("cur");
})
</script>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了uniapp 封装组件的方法,结合实例形式分析了uniapp父级页与子页面组件封装与传参交互相关实现技巧,需要的朋友可以参考下2023-06-06
这篇文章主要给大家介绍了关于前端uniapp封装网络请求以及实际应用的相关资料,在uniapp中进行网络测试请求可以通过封装网络请求来实现,文中给出了详细的代码实例,需要的朋友可以参考下2024-01-01![16个最流行的JavaScript框架[推荐]](//img.jbzj.com/images/xgimg/bcimg2.png)
这篇文章列举了当下最流行的16个 JavaScript 框架，既包含 jQuery 和 Mootools 等常规框架，也有Zepo这种支持智能手机触摸功能的移动JavaScript框架，如果你有更好的框架推荐，欢迎与我们分享。2011-05-05
使用SyntaxHighlighter实现HTML高亮显示代码的方法
syntaxhighlighter是一个小开源项目，它可以在网页中对各种程序源代码语法进行加亮显示。2010-02-02
这篇文章主要介绍了JS一次前端面试经历,结合具体案例形式分析了JS前端面试过程中遇到的问题以及响应的注意事项,需要的朋友可以参考下2020-03-03
这篇文章主要为大家详细介绍了JavaScript中常用的几个DOM事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-04-04
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
这篇文章主要介绍了javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法,涉及javascript表格操作及按钮实现表格切换的技巧,需要的朋友可以参考下2015-05-05
本文记录一下自己手动实现的一个前端常见的短信验证码输入组件，从需求到实现逐步优化的过程。具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
很多朋友需要使用到cookies操作，脚本之家以前也发表了不少相关的文章。这篇文章，虽然乱了点，但知识点比较多。2010-07-07
这篇文章主要介绍了详解JavaScript 浮点数运算的精度问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
![16个最流行的JavaScript框架[推荐]](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论