添加渐变过渡效果和自动图像更改
Adding fade transition effect and automatic image change
嗨,我是JavaScript新手,很难为我正在开发的代码创建解决方案。
我需要添加一个渐变过渡效果到我的幻灯片(一个图像改变到另一个)。除了已经存在的按钮外,图像应该自动更改。下面是完整的代码:
编辑:我(@albert)将代码放入片段中,只是抓取了我遇到的前两张图像…
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("slides");
var dots = document.getElementsByClassName("active");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " white";
}
.circle{
height:9px;
width:9px;
padding:0;
background-color:#000;
}
.container{
position:relative;
max-width:800px;
max-height:350px;
overflow:hidden;
}
.centered{
text-align:center;
margin-bottom:16px;
font-size:18px;
color:white;
position:absolute;
left:0;
bottom:0;
}
.left-arrow{
float:left;
padding-left:16px;
cursor:pointer
}
.right-arrow{
float:right;
padding-right:16px;
cursor:pointer
}
.arrow:hover{
color:#b4aa50;
}
.arrow{
-webkit-transition:background-color .3s,color .15s,box-shadow
.3s,opacity 0.3s;
transition:background-color .3s,color .15s,box-shadow
.3s,opacity 0.3s;
}
.circle-b{
border:1px solid #fff;
background-color:transparent;
-webkit-transition:background-color .3s,color .15s,box-shadow
.3s,opacity 0.3s;
transition:background-color .3s,color .15s,box-shadow
.3s,opacity 0.3s;
}
.circle-b:hover{
color:#000;
background-color:#fff;
}
.white{
color:#000;background-color:#fff}
}
<div class="container">
<img class="slides" src="https://i.stack.imgur.com/b9ukx.png" style="width:100%">
<img class="slides" src="https://i.stack.imgur.com/wx8jF.png" style="width:100%">
<div class="centered" style="width:100%">
<div class="left-arrow arrow" onclick="plusDivs(-1)">❮</div>
<div class="right-arrow arrow" onclick="plusDivs(1)">❯</div>
<span class="circle active circle-b " onclick="currentDiv(1)"> </span>
<span class="circle active circle-b " onclick="currentDiv(2)"> </span>
</div>
</div>
我从头开始写这个,并为您做了一个小提琴:https://jsfiddle.net/bartlomiej/kdg581sL/(您需要在javascript设置中将load type
设置为no wrap - in <body>
以查看其工作)
我希望这正是你想要达到的目标。
首先设置slideIndex
的初始值为0
。
var slideIndex = 0;
我将数组的图像元素保存到slides
变量,并设置该数组的长度为length
。
var slides = document.getElementById('slides').children
var length = slides.length
下一行设置类active
为stateIndex
中定义的图像元素。
setActiveSlide(slideIndex);
那么我们需要三个函数:
showPrevSlide()
,仅当幻灯片不是第一张时,将active
类设置为上一张幻灯片。
function showPrevSlide() {
if (slideIndex - 1 != -1) {
slideIndex -= 1;
}
setActiveSlide(slideIndex);
}
showNextSlide()
,只有当幻灯片不是最后一张时,才将active
类设置为下一张。
function showNextSlide() {
if (slideIndex + 1 < length) {
slideIndex += 1;
}
setActiveSlide(slideIndex);
}
最后是setActiveSlide()
,它遍历所有图像元素,并将active
类添加到index
中定义的图像元素。
function setActiveSlide(index) {
for (var i = 0; i < length; i++) {
if (index == i) {
slides[i].className += ' active';
} else {
slides[i].className = 'slide';
}
}
}
要在幻灯片上达到渐变过渡效果,您应该使用transition
和opacity
CSS属性。您还需要将position
设置为absolute
,以便图像将一个放置在另一个上。
.slide {
position: absolute;
opacity: 0;
transition: 1s;
}
和active
类样式。
.slide.active {
opacity: 1;
}
我希望我的回答对你有所帮助。
编辑:如果你想以无限的方式改变幻灯片,你必须编辑showPrevSlide()
和showNextSlide()
位。
function showPrevSlide() {
if (slideIndex - 1 == -1) {
slideIndex = length - 1;
} else {
slideIndex -= 1;
}
setActiveSlide(slideIndex);
}
function showNextSlide() {
if (slideIndex + 1 < length) {
slideIndex += 1;
} else {
slideIndex = 0;
}
setActiveSlide(slideIndex);
}
如果你想让图像自动改变,只需使用setInterval
。例如:setInterval(function() { showNextSlide() }, 1000);
,其中1000
为时间,单位为ms。
- 图像通过Youtube视频渐变
- JavaScript渐变幻灯片-图像链接
- 通过程序添加CSS渐变作为背景图像
- 如何使用for循环更改图像的不透明度以创建渐变照明效果
- 在具有动态高度的背景图像上创建渐变覆盖
- Jquery渐变图像与多张幻灯片的惰性加载程序
- 使用javascript更改背景图像时保持渐变不变
- 背景图像本身的 CSS 渐变
- 使用Javascript有没有办法抓取由线性或径向渐变渲染的背景图像
- 如何根据当前页面高度调整具有渐变的图像的大小
- IE8(Javascript和CSS)中带有拉伸BG的渐变图像背景
- JQUERY图像覆盖渐变in()在鼠标悬停时淡入淡出
- 使用我使用的当前基本JQuery图像库中的渐变图像
- 使用jquery动态追加和交叉渐变图像
- 将一个图像渐变为另一个图像
- jQuery:图像渐变为另一个图像
- 我在哪里可以找到一个图像渐变器/所有其他图像淡出
- HTML5画布上的图像渐变
- 添加图像渐变
- 如何使图像渐变过渡