- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如何让幻灯片上的三个点可点击以显示相应的幻灯片?
我希望旋转木马底部的三个点可以点击,以便显示相应的幻灯片。我如何使用 jQuery 实现此目的?
有人建议获取当前幻灯片的索引,然后使用索引将类应用于正确的点...但我不确定如何去做。
http://slideshow-test-22.superhi.com/
var currentSlide = 0
var totalSlides = $('.holder div.slide').length
var moveSlide = function(slide) {
var leftPosition = -(slide * 100) + 'vw'
$('.holder').css('left', leftPosition)
}
// Next Slide Function
var nextSlide = function() {
currentSlide = currentSlide + 1
if (currentSlide >= totalSlides) {
currentSlide = 0
}
moveSlide(currentSlide)
}
// Previous Slide Function
var previousSlide = function() {
currentSlide = currentSlide - 1
if (currentSlide < 0) {
currentSlide = totalSlides - 1
}
moveSlide(currentSlide)
}
// Auto Slide Function
var autoSlide = setInterval(function() {
nextSlide()
}, 5000)
// Arrows Function
$('.next').on('click', function() {
clearInterval(autoSlide)
nextSlide()
})
$('.prev').on('click', function() {
clearInterval(autoSlide)
previousSlide()
})
/* Base Carousel Styling */
.slideshow {
position: relative;
overflow: hidden;
width: 100vw;
height: 550px;
}
.holder {
position: relative;
top: 0;
left: 0;
width: 10000vw;
height: 550px;
transition: left 2s;
}
.holder div.slide {
float: left;
width: 100vw;
height: 550px;
}
.slide {
background-color: #f1f1f2;
position: relative;
}
a.prev,
a.next {
color: #eee;
text-decoration: none;
font-size: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 20px;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
/* End Of Base Carousel Styling */
/*Slide Styling*/
.slide {
background-repeat: no-repeat;
background-size: cover;
}
/*Slide Copy + CTA Styling*/
h1 {
font-family: Oswald;
font-size: 60px;
line-height: 1.2;
text-transform: uppercase;
color: white;
}
/* p{
font-family: Open Sans;
font-size:18px;
line-height: 1.2;
text-transform: capitalize;
}
a.cta{
font-family: Open Sans;
font-size:12px;
line-height: 1.2;
padding:16px 8px;
text-transform: uppercase;
} */
.copy-cta-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*Slide One Styling*/
.slide-1 {
background-color: #101820;
}
.slide-2 {
background-color: #283c50;
}
.slide-3 {
background-color: #426385;
}
/* The dots/bullets/indicators */
.carousel-dots {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #fff;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="slideshow">
<div class="holder">
<div class="slide-1 slide">
<div class="copy-cta-container">
<h1>Slide 1</h1>
</div>
</div>
<div class="slide-2 slide">
<div class="copy-cta-container">
<h1>Slide 2</h1>
</div>
</div>
<div class="slide-3 slide">
<div class="copy-cta-container">
<h1>Slide 3</h1>
</div>
</div>
</div>
<a href="#" class="prev"><</a>
<a href="#" class="next">></a>
<section class="carousel-dots">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</section>
</div>
最佳答案
您可以使用现有的 moveSlide()
函数来更改事件幻灯片。您需要做的就是将单击的 .dot
元素的索引关联到幻灯片,这可以通过获取其 index()
来完成。试试这个:
$('.dot').click(function() {
currentSlide = $(this).index();
moveSlide(currentSlide);
});
完整示例:
var currentSlide = 0
var totalSlides = $('.holder div.slide').length
$('.dot').click(function() {
currentSlide = $(this).index();
moveSlide(currentSlide);
});
var moveSlide = function(slide) {
var leftPosition = -(slide * 100) + 'vw'
$('.holder').css('left', leftPosition)
}
// Next Slide Function
var nextSlide = function() {
currentSlide = currentSlide + 1
if (currentSlide >= totalSlides) {
currentSlide = 0
}
moveSlide(currentSlide)
}
// Previous Slide Function
var previousSlide = function() {
currentSlide = currentSlide - 1
if (currentSlide < 0) {
currentSlide = totalSlides - 1
}
moveSlide(currentSlide)
}
// Auto Slide Function
var autoSlide = setInterval(function() {
nextSlide()
}, 5000)
// Arrows Function
$('.next').on('click', function() {
clearInterval(autoSlide)
nextSlide()
})
$('.prev').on('click', function() {
clearInterval(autoSlide)
previousSlide()
})
/* Base Carousel Styling */
.slideshow {
position: relative;
overflow: hidden;
width: 100vw;
height: 550px;
}
.holder {
position: relative;
top: 0;
left: 0;
width: 10000vw;
height: 550px;
transition: left 2s;
}
.holder div.slide {
float: left;
width: 100vw;
height: 550px;
}
.slide {
background-color: #f1f1f2;
position: relative;
}
a.prev,
a.next {
color: #eee;
text-decoration: none;
font-size: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 20px;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
/* End Of Base Carousel Styling */
/*Slide Styling*/
.slide {
background-repeat: no-repeat;
background-size: cover;
}
/*Slide Copy + CTA Styling*/
h1 {
font-family: Oswald;
font-size: 60px;
line-height: 1.2;
text-transform: uppercase;
color: white;
}
/* p{
font-family: Open Sans;
font-size:18px;
line-height: 1.2;
text-transform: capitalize;
}
a.cta{
font-family: Open Sans;
font-size:12px;
line-height: 1.2;
padding:16px 8px;
text-transform: uppercase;
} */
.copy-cta-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*Slide One Styling*/
.slide-1 {
background-color: #101820;
}
.slide-2 {
background-color: #283c50;
}
.slide-3 {
background-color: #426385;
}
/* The dots/bullets/indicators */
.carousel-dots {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #fff;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="slideshow">
<div class="holder">
<div class="slide-1 slide">
<div class="copy-cta-container">
<h1>Slide 1</h1>
</div>
</div>
<div class="slide-2 slide">
<div class="copy-cta-container">
<h1>Slide 2</h1>
</div>
</div>
<div class="slide-3 slide">
<div class="copy-cta-container">
<h1>Slide 3</h1>
</div>
</div>
</div>
<a href="#" class="prev"><</a>
<a href="#" class="next">></a>
<section class="carousel-dots">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</section>
</div>
关于jquery - 如何让幻灯片上的三个点可点击以显示相应的幻灯片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57415795/
我很困惑 ...作品。 tt = function(...) { return(x) } 为什么不tt(x = 2)返回 2 ? 相反,它因错误而失败: Error in tt(x = 2) :
展开运算符是否具有异常功能?喜欢: originalObject = { key1: '', key2: '', key3: '' } const clonedOr
这个问题在这里已经有了答案: text-overflow is not working when using display:flex (5 个答案) 关闭 3 年前。
我的问题是,为什么“text-overflow:ellipsis;”对我不起作用?我的页面上有表格,我想缩短单元格 (td) 中的一些文本。如您所见,我在 css 中没有宽度参数。我从 json 获取
不幸的是,我无法为 EditText 作品制作椭圆大小。当文本太长时,甚至可以在文本末尾放置三个点吗?它适用于 TextiView 但不适用于 EditText。有什么想法吗? android:id
这个问题在这里已经有了答案: What do 3 dots next to a parameter type mean in Java? (9 个回答) 关闭 6 年前。 三个点(...)在方法定义
我想使额外的文本成为三个点 (...) 省略号,当我单击这些点时,文本应该展开和收缩。但是使用代码时,文本只会收缩,不会在点击点时展开 .overflow{ display:inline
我不想在我的视频中显示播放速度,是否有任何控件或 controlList禁用该选项的属性,如 controls disablepictureinpicture controlslist="nodown
我需要从提示文本中删除省略号(三个点)并希望显示完整的文本。我正在使用 TextInputLayout 小部件。 向 TextInputEditText 添加 ellipsize 属性不起作用。 下面
我刚刚开始学习 Android,在应用中创建菜单时遇到了一些麻烦。 我尝试了所有选项来创建菜单,但没有一个适合我。 当我运行模拟器或真实设备菜单时没有出现。我试过“Ctrl+M”和不同的设备,但它不起
在 Javascript 中阅读这个语法真的让我感到困惑: router.route('/:id') .put((...args) => controller.update(...args)) .ge
我正在查看 jQuery 的 jScroll 插件的文档页面 (http://demos.flesler.com/jquery/scrollTo),我注意到了这一点: $(...).scrollTo(
我想把图标染成白色。 这是工具栏: 还有样式: @color/primary @color/primaryDark @color/accent @color/ba
这似乎是一个愚蠢的问题,但是当我尝试在 SOF 中查看这个答案时, Compile time generated tables 我注意到这样的陈述: template constexpr auto m
我是否使用 androidx.compose.foundation.text.BasicText或 androidx.compose.material.Text ,如果没有足够的空间放置文本,它将换行
我有一个带有 的 Xamarin.Forms UWP 应用程序用两个 toolbarItem 定义。在 UWP 中,此工具栏呈现但显示一个带有 3 个点的额外(或默认)按钮,该按钮展开但不包含任何按
如问题中所述,我正在尝试使用从 MySQL 的文本字段读取数据的 PHP 生成 XML 输出(用于 iPhone 应用程序)。 每当字段中出现水平省略号时... XML 生成不正确。 我已经尝试了几种
实际问题 是否可以为 的一组签名参数定义方法?包括 ... (相对于 专门 用于 ... )? “开箱即用”是不可能的,但理论上它会是 完全有可能 (涉及一些调整)或者这是由于 S4 机制的设计方式而
我想调用一个使用 ...(省略号)参数的 R 函数来支持未定义数量的参数: f f(1, a = 1, b = 2) [1] "a=1, b=2" 如何为 ... 传递我只在运行时知道的实际参数(例
假设我有两个分支,master 和 feature。 目标是在 Github 上以可视化方式查看 master 和 feature 之间的全部差异。默认情况下这是不可能的,因为 Github 使用 g
我是一名优秀的程序员,十分优秀!