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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
原生Js 实现的简单无缝滚动轮播图的示例代码
简单无缝滚动轮播图存在很多漏洞,就是后期增加图片时会很不方便,需要改动的地方也很多,耦合性也很强,只适用于一部分程序,所以我们可以通过改动图片结构和计算折算点的方式,升级代码. 原简单的滚动轮播代码 <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &
-
javascript实现异形滚动轮播
本文实例为大家分享了js异形滚动轮播的具体代码,供大家参考,具体内容如下 运动过程研究 让每个元素走到前一个标签的位置. 3走到2 2走到1 1走到0 0走到6 利用js动态获取每个类名对应的css样式对象,组成一个新数组. // 定义一个新数组,接收每个位置的css样式对象 var styleArr = []; // 遍历数组添加样式对象 for (var i =0; i <$('li').length; i++) { styleArr.push({ "width": $('l
-
JS实现排行榜文字向上滚动轮播效果
最近在一个抽奖活动中需要在页面上对中奖名单做排行榜的轮播,故根据下面的简单列子修改实现了滚动效果. 效果图(文字向上轮播): demo如下: <!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="
-
js轮播图无缝滚动效果
在做轮播图时如果首尾不能连起来的话,效果会有点丑,下面介绍一种我常用的方法: 先文字说明一下: 如果要展示5张图,分别为1,2,3,4,5 那么在代码的引入中是这样的:1,2,3,4,5,1 按顺序的轮播在此就不多说,重点说的是5>1和1>5的轮播 i 表示当前图片的索引 pre 表示上一张图片的按钮 next 表示下一张图片的按钮 ul 表示图片列表 (1) 5>1>2... 当"next"按钮从5到1时按顺序正常轮播,当前图片为第二个"1
-
JavaScript基于面向对象实现的无缝滚动轮播示例
本文实例讲述了JavaScript基于面向对象实现的无缝滚动轮播.分享给大家供大家参考,具体如下: 无缝轮播 面向对象 一.HTML及CSS部分同前文<原生JavaScript实现的无缝滚动功能>. JavaScript面向对象部分如下: function Seamless(obj) { this.obj = document.getElementById(obj); this.oXSlide = GLOBAL.Dom.getElementsByClassName('J_XSlide', th
-
JS简单的轮播的图片滚动实例
[javascript] 复制代码 代码如下: var forimg = function (foritem, hoverStop, defaultfor) { var _foritem = foritem.constructor == jQuery ? foritem : $(foritem); var imgarr = [ { "z-index": 1, "width": 100, "he
-
完美实现js焦点轮播效果(二)（图片可滚动）
本文在前一篇js焦点轮播效果的基础上,使用函数递归实现图片滑动切换,采用辅助图片实现图片无限滚动等技巧,具体内容如下 假如前后不加一张图片的话,图片顺序为[1,2,3,4,5],当你点到第 5 张图时,再点"下一张"(就是要回到第 1 张图那里),这时候,你想象下那个画面,会一瞬间"刷刷刷"地闪过中间那几张图片才能到第 1 张图那里,这样,太难看了吧. 为了解决这个问题,所以要在第 5 张那里加多一张 1 图,图片顺序为 [1,2,3,4,5,1].当你在第 5 张
-
如何使用JavaScript实现无缝滚动自动播放轮播图效果
在一些项目开发中,我们经常需要使用到轮播图,但是没有深入学习的情况下做轮播图是非常困难的. 思路 分成小问题来解决 1. 动态生成序号12345 页面有多少li(图片),就有多少序号 2. 点击序号.显示高亮.切换图片 2.1 给序号注册onclick事件 2.2 取消其他序号高亮显示,让当前点击的序号高亮显示 2.3 点击序号,动画的方式切换到当前点击的图片位置(设置自定义属性,记录当前索引,有了索引就可用动画进行移动) 3. 鼠标放到盒子上的时候显示左右箭头,移开时候隐藏 onmouseen
-
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊 布局什么的你们自己搞定吧 <div class="slider" id="circle"> <a href=""><img src="img/6p.jpg" alt="" /></a> ` <ul class="circle" > <li on
-
原生js实现轮播图的示例代码
很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea