Question

我正在使用jquery cycle1插件进行幻灯片放映，图像之间有淡入淡出过渡，没有上一个或下一个控件。我需要在此滑块顶部叠加文本，根据显示的幻灯片更改颜色。

我对jQuery不是很流利，所以我很难使用文档来操作可用的选项。我已经得到了this post和this one这一点，但颜色会在之前或之后略有变化，具体取决于我之前或之后是否使用过。如何在幻灯片的同一时间使文本颜色发生变化？

注意：我必须使用第1循环插件，因为我的网站使用的是jQuery 1.3.2而无法升级。

这是一个fiddle，代码如下。在此先感谢您的帮助！

这是我的HTML：

                    <div id="text">this is some text over the slider</div>
        <div id="switch-it">
            <div id="slide1">
                <a href="link1.html">
                    <img src="hp_hero_010114_01.jpg" height="500" width="980"  border="0" />
                </a>
            </div>
            <div id="slide2">
                <a href="link2.html">
                    <img src="hp_hero_010114_02.jpg" height="500" width="980" border="0"/>
                </a>
            </div>
        </div><!--//END switch-it-->

，这是jQuery

        $(document).ready(function(){
            $('#switch-it').after('<div id="switch" class="switch">').cycle({
            fx:     'fade',
            speed:  800,
            timeout: 500,
            cleartypeNoBg: true,
            height:'500px', 
            width:'980px',
            pager:'#switch', 
            pause:1,
            before: function (prev, current, opts) {
                   var current_id = $(current).attr('id');
                    if( current_id.match("slide1")){
                        $('#text').css('color','white');
                    }
                    else if( current_id.match("slide2")){
                        $('#text').css('color','red');
                    }       
                    else if( current_id.match("slide3")){
                        $('#text').css('color','blue');
                    }                       
                    else if( current_id.match("slide4")){
                        $('#text').css('color','green');
                    }
            },
            pagerAnchorBuilder: function(index, el) {
                return '<a href="#">&bull;</a>'; // whatever markup you want
            }
            });

        });

Answer 1

你可能想要更新到它正在寻找的Cycle2插件

link

向下“misc.bits”查找名为“busy”的状态变量;

Answer 2

它不是很优雅，但是在你的速度的一半之内添加一个超时时间会使转换正好在转换过程中。

setTimeout(function () { ...change text color }, 400);

JSFiddle

编辑或

为#text添加转换到#text的时间与速度相同

#text {transition: color .8s linear}

JSFiddle

幻灯片周期触发事件在幻灯片更改之前或之后

2 个答案: