Question

我希望通过一个非常简单的请求（将每张幻灯片的时间从〜5秒-> 15秒更改为一些朋友）来更新一些网站，但找不到我可以使用的参数更改时间长度。我绝对不是专家，但该网站是由不再参与的人建立的，我们只想解决这个问题...您能提供的任何帮助将不胜感激-

以下是与幻灯片相关的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相关的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();
	}

Answer 1

JavaScript中的switchTime选项看起来很有希望。另外，我不确定您使用的是哪种jQuery SlideShow插件，但有可能您没有在每张幻灯片上设置时间，而只是在使用此插件的默认时间。

尝试按时间间隔更新幻灯片

1 个答案: