gpt4 book ai didi

javascript - 尝试用时间间隔更新幻灯片

转载 作者:行者123 更新时间:2023-11-28 00:12:38 27 4
gpt4 key购买 nike

我希望通过一个非常简单的请求(将每张幻灯片上的时间从 ~5 秒 -> 15 秒更改)为一些 friend 更新网站,但找不到我能够找到的参数更改时间长度。我无论如何都不是专家,但该网站是由不再在船上的人建立的,我们只是想修复这个元素...如果您能提供任何帮助,我们将不胜感激 --

这是与幻灯片放映相关的 CSS:

.slideshow{
position:relative;
background:#000;
}
.slideshow img,
.slidegallery img{
display:block;
width:100%;
height:auto;
}
.slideshow .slide {
width:100%;
position:absolute;
z-index:1;
left:0;
top:0;
}
.slideshow .slide.active { z-index:2; }
.pagination {
position:absolute;
bottom:28px;
left:0;
width:100%;
z-index:100;
text-align:center;
}
.pagination ul {
margin:0;
padding:0;
overflow:hidden;
line-height:0;
}
.pagination ul li {
margin:0 5px;
display:inline-block;
vertical-align:top;
list-style:none;
}
.pagination a {
width:13px;
height:13px;
text-indent:-9999px;
display:block;
border-radius:50%;
background:#fff;
overflow:hidden;
}
.pagination a:hover, .pagination li.active a { background:#ffcf00; }
.home .caption-holder{
max-width:1250px;
margin:0 auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
}
.slideshow .caption{
font-size:14px;
line-height:29px;
background:rgba(0,0,0,0.7);
color:#fff;
position:absolute;
left:40px;
bottom:118px;
padding:0 32px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.slideshow p { margin:0; }
.slideshow h2 {
margin:0 0 6px;
font-size:31px;
line-height:35px;
font-weight:300;
color:#ffca00;
letter-spacing:-1px;
}
.home .slideshow .slide .caption{
width:491px;
font-size:12px;
line-height:14px;
}
.slideshow .holder {
padding:3.2% 6.5% 4.3%;
line-height:18px;
overflow:hidden;
}
.slideshow .btn-next,
.slideshow .btn-prev {
width:32px;
height:100%;
position:absolute;
right:0;
top:0;
text-indent:-9999px;
background:#fc0;
overflow:hidden;
}
.slideshow .btn-prev {
right:auto;
left:0;
}
.slideshow .btn-next:after,
.slideshow .btn-prev:after{
width:10px;
height:18px;
position:absolute;
content:'';
top:50%;
right:50%;
margin:-9px -5px 0 0;
background:url(images/social-networks.png) no-repeat -219px 0;
}
.slideshow .btn-prev:after { background-position:-198px 0; }
.slideshow .slide.second .caption, .slideshow .slide.third .caption, .slideshow .slide.fourth .caption {padding:3px 5px 3px 19px;}
.slideshow .slide.fourth .caption {
width:727px;
text-indent:7px;
padding:0;
}
.slideshow .slide.fourth .next-btn, .slideshow .slide.fourth .prev-btn{height:30px;}
.slideshow .slide.fifth .caption{
background:none;
}

以及填充幻灯片的模板中的 .php:

<?php if ($projects = get_field('home_gallery')): ?>
<div class="slideshow">
<div class="slideset">
<?php global $post; ?>
<?php foreach($projects as $slide): ?>
<div class="slide">
<?php echo get_theme_image($slide['image'],'full',array(),true) ?>
<div class="caption-holder">
<?php $post = $slide['project']; ?>
<?php setup_postdata($post); ?>
<div class="caption">
<a href="#" class="btn-next"><?php _e('next button','pyramidpremierproperties'); ?></a><a href="#" class="btn-prev"><?php _e('previous button','pyramidpremierproperties'); ?></a>
<div class="holder">
<?php the_title('<h2><a href="'.get_permalink().'">','</a></h2>'); ?>
<?php the_excerpt(); ?>
</div>
</div>
<?php wp_reset_postdata(); ?>
</div>
</div>
<?php endforeach; ?>
</div>
<div class="pagination"><?php _e('&nbsp;','pyramidpremierproperties'); ?></div>
</div>
<?php endif; ?>

这是我能找到的似乎相关的 JS - 尝试更改切换时间和动画速度但似乎没有什么不同......

/*
* jQuery SlideShow plugin
*/
;(function($){
function FadeGallery(options) {
this.options = $.extend({
slides: 'ul.slideset > li',
activeClass:'active',
disabledClass:'disabled',
btnPrev: 'a.btn-prev',
btnNext: 'a.btn-next',
generatePagination: false,
pagerList: '<ul>',
pagerListItem: '<li><a href="#"></a></li>',
pagerListItemText: 'a',
pagerLinks: '.pagination li',
currentNumber: 'span.current-num',
totalNumber: 'span.total-num',
btnPlay: '.btn-play',
btnPause: '.btn-pause',
btnPlayPause: '.btn-play-pause',
galleryReadyClass: 'gallery-js-ready',
autorotationActiveClass: 'autorotation-active',
autorotationDisabledClass: 'autorotation-disabled',
autorotationStopAfterClick: false,
circularRotation: true,
switchSimultaneously: true,
disableWhileAnimating: false,
disableFadeIE: false,
autoRotation: false,
pauseOnHover: true,
autoHeight: false,
useSwipe: false,
swipeThreshold: 15,
switchTime: 4000,
animSpeed: 600,
event:'click'
}, options);
this.init();
}

最佳答案

您的 javascript 中的 switchTime 选项看起来很有前途。另外,我不确定您使用的是什么 jQuery SlideShow 插件,但您可能没有在每张幻灯片上设置时间,而是只使用该插件的默认时间。

关于javascript - 尝试用时间间隔更新幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55299364/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com