使用JavaScript启用CSS幻灯片自动播放 [英] Enable CSS slideshow autoplay with JavaScript
本文介绍了使用JavaScript启用CSS幻灯片自动播放的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我仅使用CSS制作了一个简单的幻灯片，在单选按钮上单击，元素的边距发生变化，因此可以显示所需的幻灯片.您可以在下面的代码段中查看其工作方式.我还使用JavaScript自动播放了此幻灯片.该脚本每3秒检查一次列表中的下一个单选按钮.
现在，我需要帮助来使幻灯片播放自动循环，并且当您手动选中任何单选按钮时也停止自动播放.
$(document).ready(function(){函数autoplay(){$("input [name = radio-button]:checked").nextAll(':radio:first').prop('checked'，true);};setInterval(autoplay，3000);}); body {边距:0;填充:0;}.slider {宽度:300％;过渡:边距1s；高度:100px；}#radio-button1:选中〜.slider {左边距:0％；}#radio-button2:选中〜.slider {左边距:-100％;}#radio-button3:已选中〜.slider {左边距:-200％;}.slider-item {向左飘浮;宽度:33.33％;高度:100％;} < script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js></script><输入类型="radio"名称="radio-button" id ="radio-button1"已选中/><输入type ="radio" name ="radio-button" id ="radio-button2"/><输入type ="radio" name ="radio-button" id ="radio-button3"/>< div class ="slider">< div class ="slider-item" style ="background:#F00"></div>< div class ="slider-item" style ="background:#0F0"></div>< div class ="slider-item" style ="background:#00F"></div></div> 解决方案
创建一个 curr 变量，在间隔内对其进行递增，然后使用Modulo ％将其循环回0:
jQuery(function($){//DOM就绪且$范围内的别名var curr = 0;函数autoplay(){curr = ++ curr％3;//递增并在3时重置为0$("[name = radio-button]")[curr] .checked = true;}setInterval(autoplay，3000);}); body {边距:0;填充:0;}.slider {宽度:300％;过渡:边距1s；高度:100px；}#radio-button1:checked〜.slider {左边距:0％；}#radio-button2:checked〜.slider {左边距:-100％;}#radio-button3:checked〜.slider {左边距:-200％;}.slider-item {向左飘浮;宽度:33.33％;高度:100％;} <输入类型="radio" name ="radio-button" id ="radio-button1"已选中/><输入type ="radio" name ="radio-button" id ="radio-button2"/><输入type ="radio" name ="radio-button" id ="radio-button3"/>< div class ="slider">< div class ="slider-item" style ="background:#F00"></div>< div class ="slider-item" style ="background:#0F0"></div>< div class ="slider-item" style ="background:#00F"></div></div>< script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 更好的方法:
- 溢出超级父对象，这样您就不会获得滚动条
- 使用
display:flex;而不是 ugly 浮点数. - 使用
$('.slider').each(，这样您就可以在单个页面中包含多个滑块！ - 创建
anim()play()和stop()函数以控制发生的情况. - 使用
transform:和transition进行动画处理，因为过渡是GPU加速的.边距不是，并且需要重排和重涂. - 使用
curr * -100％ 对转换进行动画处理 - 在需要时使用
curr％= tot(模运算符)将curr索引环回为0. - 为什么要手动创建按钮?手动创建幻灯片，然后让JS为您创建按钮.
- 通过将
setInterval存储到变量itv中来使用 - 要停止自动动画，请使用
clearInterval(itv) - 使用
.hover(停止播放)在mouseenter上停止播放，并在mouseleave上自动播放
$('.slider').each(function(slider_idx){//使用每个，因此可以有多个滑块令curr = 0;//设置当前索引让itv = null;//间隔持有人const $ slider = $(this);const $ nav = $('.slider-nav'，$ slider);const $ items = $('.slider-items'，$ slider);const $ item = $('.slider-item'，$ slider);const tot = $ item.length;//多少const btns = [... new Array(tot)].map((_，i)=> $('< input>'，{类型:"radio"，名称:`slider-btn-$ {slider_idx}`，已检查:curr == i，change(){//按钮更改事件curr = i;//将当前索引设置为此按钮索引anim();}})[0]);函数anim(){$ items.css({transform:`translateX(-$ {curr * 100}％)}});//动画btns [curr] .checked = true;//更改导航btn状态}函数play(){itv = setInterval(()=> {curr = ++ curr％总吨；//增加curr，如果超过tot则重置为0anim();//并设置动画！}，3000)；//每3秒执行一次}函数stop(){clearInterval(itv);}$ nav.empty().append(btns);//插入按钮$ slider.hover(停止播放);//处理悬停状态玩();//开始自动播放！}); /* QuickReset */* {保证金:0;框大小:border-box;}.slider {职位:相对高度:100px；}.slider-overflow {溢出:隐藏；/*使用溢出父项！您不需要滚动条*/身高:继承；}.slider-items {显示:flex;/*使用flex */flex-flow:行nowrap;身高:继承；过渡:转换1s；/*不使用边距，使用变换*/}.slider-item {flex:0 0 100％;身高:继承；}.slider-nav {位置:绝对；宽度:100％;底部:0;文本对齐:居中；} < div class ="slider">< div class ="slider-overflow">< div class ="slider-items"><！-这将过渡->< div class ="slider-item" style ="background:#0bf;"> curr = 0</div>< div class ="slider-item" style ="background:#fb0;"> curr = 1</div>< div class ="slider-item" style ="background:#f0b;"> curr = 2</div></div></div>< div class ="slider-nav"><！-JS将在此处填充按钮-></div></div>< script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 因此，DIV元素 .slider-nav 和 .slider-overflow 都必须位于公共父元素 .slider 内-这样在与这些元素进行任何互动之后，我们会适当地停止(暂停)自动动画.
I made a simple slideshow using only CSS, where on the radio button click, the margin of the element changes so it displays the desired slide. You can see how it works in the code snippet below. I also made this slideshow auto play with JavaScript. The script checks the next radio button in the list every 3 seconds.
Now I need help to make the slideshow auto play in a loop and to also stop auto play when you check any radio button manually.
$(document).ready(function() {
function autoplay() {
$("input[name=radio-button]:checked").nextAll(':radio:first').prop('checked', true);
};
setInterval(autoplay, 3000);
});
body {
margin: 0;
padding: 0;
}
.slider {
width: 300%;
transition: margin 1s;
height: 100px;
}
#radio-button1:checked ~ .slider {
margin-left: 0%;
}
#radio-button2:checked ~ .slider {
margin-left: -100%;
}
#radio-button3:checked ~ .slider {
margin-left: -200%;
}
.slider-item {
float: left;
width: 33.33%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<input type="radio" name="radio-button" id="radio-button1" checked />
<input type="radio" name="radio-button" id="radio-button2" />
<input type="radio" name="radio-button" id="radio-button3" />
<div class="slider">
<div class="slider-item" style="background: #F00"></div>
<div class="slider-item" style="background: #0F0"></div>
<div class="slider-item" style="background: #00F"></div>
</div>
解决方案
Create a curr variable, increment it inside the interval and use Modulo % to loop it back to 0:
jQuery(function($) { // DOM ready and $ alias in scope
var curr = 0;
function autoplay() {
curr = ++curr % 3; // Increment and Reset to 0 when 3
$("[name=radio-button]")[curr].checked = true;
}
setInterval(autoplay, 3000);
});
body {
margin: 0;
padding: 0;
}
.slider {
width: 300%;
transition: margin 1s;
height: 100px;
}
#radio-button1:checked~.slider {
margin-left: 0%;
}
#radio-button2:checked~.slider {
margin-left: -100%;
}
#radio-button3:checked~.slider {
margin-left: -200%;
}
.slider-item {
float: left;
width: 33.33%;
height: 100%;
}
<input type="radio" name="radio-button" id="radio-button1" checked />
<input type="radio" name="radio-button" id="radio-button2" />
<input type="radio" name="radio-button" id="radio-button3" />
<div class="slider">
<div class="slider-item" style="background: #F00"></div>
<div class="slider-item" style="background: #0F0"></div>
<div class="slider-item" style="background: #00F"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
The better way:
- Overflow a super parent so you don't get scrollbars
- Use
display: flex;instead of ugly floats. - Use
$('.slider').each(so you can have multiple sliders in a single page! - Create a
anim()play()andstop()function to control what happens. - Animate using
transform:andtransition, since transition is GPU accelerated. Whilst margins are not, and require reflow and repaint. - Animate the transform by using
curr * -100% - Use
curr %= tot(Modulo operator) to loopback thecurrindex to 0 when needed. - Why create buttons manually? Create your slides manually and let JS create the buttons for you.
- Use
setIntervalby storing it into a variableitv - To stop your auto-animation use
clearInterval(itv) - Use
.hover(stop, play)to stop on mouseenter and autoplay on mouseleave
$('.slider').each(function(slider_idx) { // Use each, so you can have multiple sliders
let curr = 0; // Set current index
let itv = null; // The interval holder
const $slider = $(this);
const $nav = $('.slider-nav', $slider);
const $items = $('.slider-items', $slider);
const $item = $('.slider-item', $slider);
const tot = $item.length; // How many
const btns = [...new Array(tot)].map((_, i) => $('<input>', {
type: 'radio',
name: `slider-btn-${slider_idx}`,
checked: curr == i,
change() { // On button change event
curr = i; // Set current index to this button index
anim();
}
})[0]);
function anim() {
$items.css({transform: `translateX(-${curr*100}%)`}); // Animate
btns[curr].checked = true; // Change nav btn state
}
function play() {
itv = setInterval(() => {
curr = ++curr % tot; // increment curr and reset to 0 if exceeds tot
anim(); // and animate!
}, 3000); // Do every 3sec
}
function stop() {
clearInterval(itv);
}
$nav.empty().append(btns); // Insert buttons
$slider.hover(stop, play); // Handle hover state
play(); // Start autoplay!
});
/*QuickReset*/ * {margin: 0; box-sizing: border-box;}
.slider {
position: relative;
height: 100px;
}
.slider-overflow {
overflow: hidden; /* use an overflow parent! You don't want scrollbars */
height: inherit;
}
.slider-items {
display: flex; /* Use flex */
flex-flow: row nowrap;
height: inherit;
transition: transform 1s; /* Don't use margin, use transform */
}
.slider-item {
flex: 0 0 100%;
height: inherit;
}
.slider-nav {
position: absolute;
width: 100%;
bottom: 0;
text-align: center;
}
<div class="slider">
<div class="slider-overflow">
<div class="slider-items"> <!-- This one will transition -->
<div class="slider-item" style="background:#0bf;">curr = 0</div>
<div class="slider-item" style="background:#fb0;">curr = 1</div>
<div class="slider-item" style="background:#f0b;">curr = 2</div>
</div>
</div>
<div class="slider-nav">
<!-- JS will populate buttons here -->
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
So both DIV elements .slider-nav and .slider-overflow need to be inside of the common parent .slider - so that we properly stop (pause) the auto-animation after any interaction with those elements.
这篇关于使用JavaScript启用CSS幻灯片自动播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
