- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我正在尝试制作滑动 DIV。
我成功地使第一个 DIV 转到第二个 DIV,反之亦然。但是,我无法将 2nd DIV 滑动到 3rd DIV。
代码如下:
$(function(){
var slideW = $('#slides').width();
// Next slide
$('#next-slide').click(function( e ){
e.preventDefault();
$('#slides').animate({scrollLeft: slideW}, 600);
});
//previous slide
$('#back-slide').click(function( e ){
e.preventDefault();
$('#slides').animate({scrollLeft: -slideW }, 600);
});
});
#slides{
position:relative;
overflow:hidden;
margin:0 auto;
background:#cf5;
width:100%;
height:200px;
white-space:nowrap;
}
#slides div{
position:relative;
display:inline-block;
margin-right:-4px;
white-space:normal;
vertical-align:top;
*display:inline;
background:#eee;
width:100%;
height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slides">
<div>
Content 1
<a href="#" id="next-slide">Show Content 2 .. it works!</a>
</div>
<div>
Content 2
<a href="#" id="back-slide">Show Content 1 .. it works!</a>
<br>
<a href="#" id="next-slide">Show Content 3 .. not working!!</a>
</div>
<div>
Content 3
<a href="#" id="back-slide">Show Content 2 .. not working!!</a>
</div>
</div>
最佳答案
使用 CSS display: flex
对齐元素,使用 transition
和 transform
进行动画处理。
JS 用于递增/递减 Current Slide 索引并设置父级的 CSS 转换:
const ELS = (sel, EL) => (EL || document).querySelectorAll(sel);
const EL = (sel, EL) => (EL || document).querySelector(sel);
const carousel = (EL_carousel) => {
const EL_mover = EL('.carousel-mover', EL_carousel);
const ELS_slide = ELS('.carousel-slide', EL_carousel);
const ELS_prev = ELS('.prev', EL_carousel);
const ELS_next = ELS('.next', EL_carousel);
const tot = ELS_slide.length;
let c = 0; // Current slide index
const anim = () => {
EL_mover.style.transform = `translateX(-${c * 100}%)`;
};
const prev = () => {
c -= 1;
if (c < 0) c = tot - 1;
anim();
};
const next = () => {
c += 1;
if (c > tot - 1) c = 0;
anim();
};
ELS_prev.forEach(el => el.addEventListener("click", prev));
ELS_next.forEach(el => el.addEventListener("click", next));
};
// Init carousel
ELS(".carousel").forEach(carousel);
.carousel {
position: relative;
overflow: hidden;
}
.carousel-mover {
display: flex;
background: #eee;
transition: transform 0.5s;
}
.carousel-slide {
flex: 1 0 100%;
min-height: 100px;
background: #eee;
}
<div class="carousel">
<div class="carousel-mover">
<div class="carousel-slide">
Page 1 Home
<button type="button" class="next">NEXT</button>
</div>
<div class="carousel-slide">
Page 2
<button type="button" class="prev">PREV</button>
<button type="button" class="next">NEXT</button>
</div>
<div class="carousel-slide">
Page 3 End
<button type="button" class="prev">PREV</button>
<button type="button" class="next">GO HOME</button>
</div>
</div>
</div>
另一个使用 jQuery 的不太好的例子,你的命名(因为使用了 ID)和标记有点死板:
$(function(){
var $slide = $("#slides"); // Cache the elements you plan to reuse!
var $pages = $slide.children(); // Get the actual slides pages
var slideW = $slide.width();
var c = 0; // Use a counter
// Use classes instead of ID!
$('.prev, .next').click(function( e ){
c = $(this).is(".next") ? ++c : --c; // incr/decr. counter
$slide.animate({scrollLeft: slideW * c }, 600); // Anim by multiplying
});
});
#slides{
position:relative;
overflow:hidden;
margin:0 auto;
background:#cf5;
width:100%;
height:200px;
white-space:nowrap;
}
#slides div{
position:relative;
display:inline-block;
margin-right:-4px;
white-space:normal;
vertical-align:top;
*display:inline;
background:#eee;
width:100%;
height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slides">
<div>
Content 1
<a href="#" class="next">Show Content 2</a>
</div>
<div>
Content 2
<a href="#" class="prev">Show Content 1</a>
<br>
<a href="#" class="next">Show Content 3</a>
</div>
<div>
Content 3
<a href="#" class="prev">Show Content 2</a>
</div>
</div>
回顾一下:
上面的代码使用了一个变量 c
,而不是总是以固定的 +- 宽度设置动画 slideW
,它在每次上一次/下一次点击时分别递增/递减。乘以幻灯片宽度,您将获得 scrollLeft
位置,或者,如果您使用 CSS,则为 transform: translateX
百分比。
关于javascript - 使用 JavaScript 制作轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41181555/
我在我的应用程序中使用开源 iCarousel 来实现轮播控件。我使用的轮播类型是 iCarouselTypeRotary 并且图像在这种类型中线性排列。但是,我需要图像像所附图像中的旋转木马一样带来
有人看过像这样的 jQuery 3D 轮播教程吗? http://web.enavu.com/demos/3dcarouselwip/ 没有给出来源,但想知道是否有人有关于如何连续圈出 DIV 并调整
我正在开发一种使用相机自动拍摄照片的软件。我希望用户能够设置照片间隔。我希望它看起来和工作起来像某种轮播。 它应该是这样的: 当我滑动(或用鼠标拖动)时,它应该沿给定方向移动: 所选项目应始终位于中间
抱歉问了个愚蠢的问题。我正在寻找带有按钮的旋转木马。我在 Bootply 上找到了这个模板,它完全符合我的要求。我在开发方面还很陌生。 也许有人可以向我解释如何摆脱侧面滚动效果。我知道我必须向 Jav
我正在寻找一个可以处理表单元素的 jQuery 轮播风格插件。 这是我需要做的。 我有三个表单元素:两个常规文本框和一个文本区域。还有两个按钮,上一个和下一个。 单击下一步按钮时,文本框/文本区域会切
我想构建一个包含两个图像轮播的网页,并且我希望能够将图像从一个轮播拖动到另一个。 我已经有了与 jCarouselLite 一起使用的图像轮播:它使用两个 UL 元素来指定轮播的图像。这工作得很好。
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭 1
我有这段代码可以从数据库中获取轮播图片或视频 $stmt = $con->prepare("SELECT * FROM `Main`"); $stmt->execut
我需要做这个 slider ,我找到了一些代码并尝试了,但没有一个完全是 LIKE THIS .bloco03 img {
我的任务是制作 3 张图片的轮播/幻灯片,只能在移动设备上使用。在桌面上,这些图像将显示在 3 列中。有没有一种方法可以自动转换,而无需我创建两个不同的模块并根据屏幕尺寸隐藏/显示一个? 最佳答案 你
我需要在卡片轮播上创建这种效果。我使用 Owl Carousel ,我给了元素框阴影。但我坚持制作不同位置元素的效果,例如 3d 或任何名称。 这是我想做的 http://www.awesomescr
我已经盯着这段相同的代码看了大约 4 个小时,并尝试观看一些不同的教程。问题是 slider 加载,有 3 张幻灯片的空间,但它只显示第一张幻灯片。 所有图像加载良好(在浏览器中验证),但轮播不会更改
我的 carouse/slider 有问题,我已经做到了,上一张和下一张图片每边各占 25%,中央图片占 50% 宽度。问题是我能够更改左右图像的背景,但我似乎无法将相同的颜色应用于中间图像。我已经尝
我想一次放 5 张图片作为页面的背景,即一张图片会显示一小段时间(比如每张一秒钟),然后重复它们。 我想知道有没有办法用 CSS 或 JS 来做到这一点? 预先感谢您的帮助! 最佳答案 这也许就是您正
我正在寻找一个支持触摸、可拖动、响应式 jQuery 滚动条/幻灯片/轮播/ slider ,用于显示水平可滚动项目列表(例如, eshop、最近将照片添加到数据库等)。 它看起来类似于苹果应用程序商
我想要夹层画廊的 Bootstrap 轮播。基本上;我正在拉入所有图像,并且我想要单行三张图像轮播。这是我非常讨厌的一段工作代码;我真的很想让它适用于无限数量的图像。 {% if page.d
大家好,我有这段代码,我一直在为我的网站编写代码。我正在尝试实现一个轮播功能,其中一张图片在另一张图片之后滑动。我遇到的问题是图片不会滑动。这是我的代码在欢迎 Controller 的索引页面中的样子
我正在构建一个简单的轮播,一旦用户水平滚动,事件点就会改变事件状态。但是,当我滚动时,jQuery 左侧位置返回值没有改变: li_left = li.position().left; // this
我正在尝试将文本放在轮播 slider 中的图像下方,但现在文本出现在图像上,而不是下方。 它看起来像这样: 但我希望它看起来像这样: 这是我的代码: final CarouselSlider aut
我在使用 boostrap carousel 时遇到 CSS 问题 我只是想让它更高,我已经尝试了几个 css 但没有任何效果。代码是在这个 jsFiddle 中,http://jsfiddle.ne
我是一名优秀的程序员,十分优秀!