我用jQuery和jFancyTiles编写了一个小图片幻灯片,可以在这里看到:
它在firefox和IE中按预期工作,但不是铁/铬.问题似乎在文件的时间.已经在铬:
在第76行中,活动类被设置为标题图像右下角的编号圆形按钮.这有效!
在第83行中,通过调用花式拼贴功能来改变图像,这在铬中不起作用,至少在此时不起作用.
当我通过ctrl-shift-j打开iron_js_console并手动调用该函数时,一切正常.
此外,如果我等待10秒,它甚至会进展到下一个图像,在所有浏览器中,不需要以前的操作.
对fancytiles的第一次调用不适用于铁/铬.这是在jquery的document.ready事件中调用的.
//我能做什么？
我有一个(不寻常的)来自客户端的请求,即在"幻灯片"动画期间每个幻灯片之间至少有40个像素的填充/边距.Flexslider的默认值是针对彼此刷新的项目.
2.0中有一个新的JQuery选项用于"itemMargin",但它似乎只用于"carousel"设置.如果我通过CSS应用保证金,每张幻灯片都会碰到下一张幻灯片.
无论如何在幻灯片之间应用保证金,还是这是一个不可能的选择？
这是我当前的选项设置
$(window).load(function() {
$('.home_slider').flexslider({
animation: "slide", //String: Select your animation type, "fade" or "slide"
smoothHeight: false, //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
slideshow: false, //Boolean: Animate slider automatically
controlNav: false,
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
prevText: "%", //String: Set the text for the "previous" directionNav item
nextText: "&",
// Carousel Options
itemMargin: 40
});
我试图使用JavaScript和/或jQuery将文本添加到div中,然后每隔10秒将文本更改为不同的文本 - 所以有点像纯文本的幻灯片.这是我的代码:
<div id="textslide"><p></p></div>
<script>
var quotes = new Array();
quotes[0] = "quote1";
quotes[1] = "quote2";
quotes[2] = "quote3";
quotes[3] = "quote4";
quotes[4] = "quote5";
var counter = 0;
while (true) {
if (counter > 4) counter = 0;
document.getElementById('textslide').firstChild.innerHTML = quotes[counter];
counter++;
setTimeout( // not sure what to put here, 500); // Want to delay loop iteration
}
</script>
我试图获得一个jquery幻灯片来显示来自flickr,淡入淡出和滚动的图像.一切正常,除了我真的需要延迟加载图像(只需按需加载图像).
我目前正在使用jquery.cross-slide(http://tobia.github.com/CrossSlide/),但不幸的是,tobia不再使用该插件,也不想回答问题.
我找到了一个jquery.cycle的例子,其中应用了图像延迟加载(请参阅http://malsup.com/jquery/cycle/add3.html)是否有任何机会将此功能侵入交叉幻灯片的来源或者是由于插件的架构,这是不可能的？请参阅此处的代码:https://github.com/tobia/CrossSlide/blob/master/jquery.cross-slide.js#L131
我已经学会用JavaScript制作旋转木马图像幻灯片脚本.我认为从基础学习它比从框架(即时脚本)制作一些东西更好,但我是新手.我用我的技术写这个剧本,但我认为这很糟糕.
好的,这是我的问题:我不知道如何制作这个幻灯片循环,任何人都可以帮助我？谢谢
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrapper {
width:400px;
height:140px;
position:absolute;
left:50%;
top:50%;
margin: -70px 0 0 -200px;
background: #383838;
overflow: hidden;
}
#abc-container {
position: absolute;
width:1200px;
height:140px;
}
#a {
width:400px;
height:140px;
background: #FF0000;
float: left;
}
#b {
width:400px;
height:140px;
background: #FFFF00;
float: left;
}
#c {
width:400px;
height:140px;
background: #00FFFF;
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="abc-container">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</div>
<div id="asas"></div>
<div id="asass"></div> …我的 jQuery 幻灯片有问题，我似乎无法弄清楚。在图像转换期间，幻灯片将闪烁白色，而不是很好地淡入下一张图片。我相信这与以下代码行有关：
$('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
单击上一个和下一个按钮会导致相同的问题。
这是幻灯片的 jsFiddle。
谢谢！
情况:
我用我的幻灯片Slider Revolution插件.
我需要为显示的图像设置不同的时间(持续时间).例如,我需要显示第一个图像仅2秒,而第二个图像需要显示7秒.
问题:
如何设置上一个项目的时间？可能吗？
代码:
在初始化插件的js函数中,有以下设置: delay:9000,并且更改它,可以设置持续时间,但会考虑所有项目.
这是js函数:
initRevolutionSlider: function () {
var tpj=jQuery;
tpj(document).ready(function() {
if (tpj.fn.cssOriginal!=undefined)
tpj.fn.css = tpj.fn.cssOriginal;
var api = tpj('.fullwidthbanner').revolution(
{
delay:9000,
startwidth:960,
startheight:250,
onHoverStop:"off", // Stop Banner Timet at Hover on Slide on/off
thumbWidth:100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
thumbHeight:50,
thumbAmount:3,
hideThumbs:1,
navigationType:"bullet", // bullet, thumb, none
navigationArrows:"solo", // nexttobullets, solo (old name verticalcentered), none
navigationStyle:"round-old", // round,square,navbar,round-old,square-old,navbar-old, or any from …我想在materialcss视差中嵌入一个materializecss滑块.可以这样做吗？
我可以让每件作品都很好,但是当我把它们筑巢时,我只会得到带有字幕的灰色区域.
这是我的代码
<div class="parallax-container">
<div class="parallax">
<div class="slider">
<ul class="slides">
<li>
<img src="images/new-york-city.jpg">
<div class="caption center-align brown-text text-darken-2">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-darken-2">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="images/coffee.jpg">
<div class="caption center-align blue-grey-text text-darken-4">
<h3>This is our big Tagline!</h3>
<h5 class="light blue-grey-text text-darken-4">Here's our small slogan.</h5>
</div>
</li>
</ul><!-- /slides -->
</div><!-- /slider -->
</div><!-- /parallax -->
</div><!-- /parallax-container -->谢谢
我想包括这张幻灯片： https: //swiperjs.com/react/
由于我发现拖动下一张幻灯片不太舒服，因此我想onClick向完整滑块添加一个事件，以便下一张幻灯片出现。
如何slideNext()在 React 中触发 a ？我在阅读文档时遇到问题/我不理解它 - 并且文档似乎没有告诉如何在反应中执行此操作。
在 jquery 中，它会是这样的：
$('section.slideshow').on( 'click', function() {
swiper.slideNext();
});
这是我的反应代码：
import React from 'react'
import SwiperCore, { Navigation, Pagination, A11y } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/swiper.scss'
import 'swiper/components/navigation/navigation.scss'
import 'swiper/components/pagination/pagination.scss'
SwiperCore.use([Navigation, Pagination, A11y])
function Page(){
return (
<div>
<Swiper
onClick={() => console.log('click')}
onTouchStart={() => slideNext() }
>
<SwiperSlide>slide 1</SwiperSlide>
<SwiperSlide>slide 2</SwiperSlide>
</Swiper>
</div>
);
}
export default Page;
slideshow ×10
javascript ×7
jquery ×7
html ×3
css ×1
flexslider ×1
lazy-loading ×1
loops ×1
materialize ×1
parallax ×1
reactjs ×1
slider ×1
swiper ×1
swiper.js ×1