jQuery fader dots交互功能
jQuery fader dots interactivity function
如何在音量控制器中实现可点击的指示点,其功能与下面的代码类似。也就是说,当点击相应的点时,它会褪色为它绑定的相应图像?我已经创建了这些点,它们可以转换为按钮以实现可点击性,但我如何创建一个函数,该函数是什么?
function cycleImages() {
var $active = $('.image.active'); //get the active tab
var $next = $active.next().length > 0 ? $active.next() : $('.image:first');
//check next length if not present just get the first .image div
//fade out the top image and remove active class from it in callback
$active.animate({
opacity: '0'
}, 400, function() {
$active.removeClass('active')
$next.animate({
opacity: '1'
}, 400, function() {
$next.addClass('active');
})
});
}
// run every 5s
setInterval(cycleImages, 5000);
div.image div.caption {
display: visible;
position: absolute;
overflow: hidden;
z-index: 20;
color: white;
background-color: rgba(0,0,0,0.35);
height: 20%;
width: 100%;
bottom: 0;
}
.fader {
border-radius: 1em;
height: 25vw;
width: 74vw;
max-height: 100%;
min-height: 10vw;
margin: 0 auto;
border-left: 1.5em solid #aa917d;
border-right: 1.5em solid #aa917d;
position: relative;
overflow: hidden;
}
.fader div.image img {
display: block;
width: 100%;
margin: 0 auto;
z-index: 1;
position: absolute;
}
div.image img {
z-index: 5;
}
div.image{
opacity:0;
transition:all 1s ease-in;
}
div.image.active{
opacity:1;
}
div.image:not(.active){
display:none;
}
.dots {
float: right;
background-color: rgba(65,45,30,0.5);
border: none;
border-radius: .85vw;
display: inline-block;
height: .85vw;
width: .85vw;
margin: .2em .2em .2em .2em;
}
.dots.active {
background-color: #aa917d;
}
.dot-container {
width: 20%;
float: right;
margin-right: .5em
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fader">
<div class="image active">
<img class="" src="https://images.contentful.com/256tjdsmm689/2T0QeKcvR6MSsckuKoYIwS/b57d12107fc5eb635e294ed1c76cbbac/feature-gettyimages.jpg" alt="" style="height: 100%; width:auto; object-fit: contain">
<div class="caption">
<span class="image-info">Lorem ipsum dolor sit amet</span>
<div class="dot-container">
<span class="dots"></span>
<span class="dots"></span>
<span class="dots"></span>
<span class="dots"></span>
<span class="dots active"></span>
</div>
</div>
</div>
<div class="image">
<img class="" src="http://www.livemint.com/rf/Image-621x414/LiveMint/Period2/2016/04/09/Photos/DNAnocredit-kuAC--621x414@LiveMint.jpg" alt="" style="height: 100%; width:auto; object-fit: contain">
<div class="caption">
<span class="image-info">Lorem ipsum dolor sit amet</span>
<div class="dot-container">
<span class="dots"></span>
<span class="dots"></span>
<span class="dots"></span>
<span class="dots active"></span>
<span class="dots"></span>
</div>
</div>
</div>
<div class="image">
<img class="" src="http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738CEB00000578-3504412-image-a-4_1458654503277.jpg" alt="" style="height: 100%; width:auto; object-fit: contain">
<div class="caption">
<span class="image-info">Lorem ipsum dolor sit amet</span>
<div class="dot-container">
<span class="dots"></span>
<span class="dots"></span>
<span class="dots active"></span>
<span class="dots"></span>
<span class="dots"></span>
</div>
</div>
</div>
<div class="image">
<img lass="" src="http://static.bigstockphoto.com/images/homepage/2016_bigstock_video.jpg" alt="" style="height: 100%; width:auto; object-fit: contain">
<div class="caption">
<span class="image-info">Lorem ipsum dolor sit amet</span>
<div class="dot-container">
<span class="dots"></span>
<span class="dots active"></span>
<span class="dots"></span>
<span class="dots"></span>
<span class="dots"></span>
</div>
</div>
</div>
<div class="image">
<img class="" src="http://media.tinmoitruong.vn/public/media/media/picture/03/kh4.jpg" alt="" style="height: 100%; width:auto; object-fit: contain">
<div class="caption">
<span class="image-info">Lorem ipsum dolor sit amet</span>
<div class="dot-container">
<span class="dots active"></span>
<span class="dots"></span>
<span class="dots"></span>
<span class="dots"></span>
<span class="dots"></span>
</div>
</div>
</div>
</div>
您需要做一些事情才能浏览带点的幻灯片:
- 循环浏览点元素,将属性应用于每个点(从0或1开始的数字),并为每个点递增一
- 循环浏览图像,对每个图像应用一个属性(一个数字,从0或1开始),并为每个点递增一。(就像圆点一样)
- 向点添加一个点击事件处理程序,它将获得该特定点的数字属性,并显示具有相同数字属性的图像
- 删除每张幻灯片上的点标记,而所有幻灯片只有一组点(这需要调整HTML/CSS)
我建议查看具有此功能的现有旋转木马,以更好地理解代码。看看Barrel的这篇题为"从头开始构建响应式jQuery旋转木马插件"的博客文章。它具有你想要的功能。
相关文章:
- 添加文字和评论功能更新Div
- JavaScript打印功能使日历停止工作
- 在Windows 10中自动执行例行程序(主要与浏览器交互)
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 如何防止网页加载后自动启动功能
- 除修剪外的其他功能
- 悬停功能触发器
- 使用angularjs向浏览器发送servlet响应(下载功能)
- 删除CKEditor工具栏按钮,但不删除功能
- 异步facebook功能
- 如何将chrome扩展功能移植到移动设备(特别是jquery和trello)
- jQuery滚动功能只工作一次
- Graphiti中是否有任何工具提示功能
- React redux初始化功能,无论状态变化如何
- 交互2个单选按钮2个不同的功能Javascript
- 选择交互:仅在单击功能时切换
- 开发3D交互图像功能的方向是什么?
- jQuery ui's的调整大小功能无法与chrome中的flexbox模型正确交互,但在FF和IE中取得了成功
- 具有用户交互功能的三维绘图
- jQuery fader dots交互功能