JavaScript滚动轮播图制作原理详解 |
您所在的位置：网站首页 › 前端轮播图原理 › JavaScript滚动轮播图制作原理详解 |
JavaScript滚动轮播图制作原理详解
|
本文实例为大家分享了JavaScript滚动轮播图制作原理，供大家参考，具体内容如下 滚动轮播图滚动轮播图布局关键：是所有图片并排在一起，所以unit的宽要足够宽。克隆第一张图片追加到最后一张右按钮拉动策略：先拉动，再瞬移左按钮拉动策略：先瞬移，再拉动与呼吸轮播图一样，需要做防流氓策略 复制代码：将我代码中的图片更换为你的图片，注意图片路径，还需要引入js库，我引入的是jquery-1.12.3.min.js的版本，需要js这个库的同学可以去我上传的资料中下载，引入的时候注意路径 举例： Document * { 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; }
;
;
// 获取元素
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 |
【本文地址】
今日新闻 |
推荐新闻 |