简单渐变javascript图像旋转器

我发现这篇老帖子要求一个简单的淡入淡出图像旋转器：

找到了我要找的东西：

$(function() {
$('#fader img:not(:first)').hide();
$('#fader img').css('position', 'absolute');
$('#fader img').css('top', '0px');
$('#fader img').css('left', 'auto');
$('#fader img').css('right', 'auto');
//$('#fader img').css('left', '50%');
$('#fader img').each(function() {
    var img = $(this);
    $('<img>').attr('src', $(this).attr('src')).load(function() {
        //img.css('margin-left', -this.width / 2 + 'px');
    });
});

var pause = false;

function fadeNext() {
    $('#fader img').first().fadeOut().appendTo($('#fader'));
    $('#fader img').first().fadeIn();
}

function fadePrev() {
    $('#fader img').first().fadeOut();
    $('#fader img').last().prependTo($('#fader')).fadeIn();
}

$('#fader, #next').click(function() {
    fadeNext();
});

$('#prev').click(function() {
    fadePrev();
});

$('#fader, .arwBtn').hover(function() {
    pause = true;
},function() {
    pause = false;
});

function doRotate() {
    if(!pause) {
        fadeNext();
    }    
}

var rotate = setInterval(doRotate, 4000);

$（函数（）{
$（“#音量控制器img:not（：first）”.hide（）；
$（'#fader img'）.css（'position'，'absolute'）；
$（'#音量控制器img'）.css（'top'，'0px'）；
$（'#音量控制器img'）.css（'left'，'auto'）；
$（'#fader img'）.css（'right'，'auto'）；
//$（'#fader img'）.css（'left'，'50%）；
$（'#音量控制器img'）。每个（函数（）{
var img=$（本）；
$('
}))

这是最初的小提琴


我已经花了一些时间来适应它（不是jquery程序员：/）
我只需要在每张图片上加上字幕。
有人能帮我在相同的代码中添加标题吗

非常感谢：）
您需要对CSS进行更多的增强，但它正在按要求工作


CSS

#fader {
    position: relative; 
    width:500px;
    height: 400px;
}

#fader div{
    position: relative; 
    height: 400px;
    width:400px;
    overflow:hidden;
    margin:0 auto;
}

#fader strong{
    display:block;
    position: absolute; 
    width:100%;
    top:0;
    left:0;
    Background:#333;
    Color:#fff;
    padding:5px;
    opacity:0.7;
    filter:alpha(opacity=70); 
}

.button {
    background-color: green;
    width: 50px;
    height: 30px;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    top: 30px;  
}

#next {
    right: 0;   
}

#prev {
    left: 0;  
}

$(function() {
    $('#fader div:not(:first)').hide();

    var pause = false;

    function fadeNext() {
        $('#fader div').first().fadeOut().appendTo($('#fader'));
        $('#fader div').first().fadeIn();
    }

    function fadePrev() {
        $('#fader div').first().fadeOut();
        $('#fader div').last().prependTo($('#fader')).fadeIn();
    }

    $('#fader, #next').click(function(e) {
        fadeNext();
        e.preventDefault()
    });

    $('#prev').click(function() {
        fadePrev();
    });

    $('#fader, .button').hover(function() {
        pause = true;
    },function() {
        pause = false;
    });

    function doRotate() {
        if(!pause) {
            fadeNext();
        }    
    }

    var rotate = setInterval(doRotate, 2000);
});

HTML

<div id="fader">
    <a class="button" href="#" id="next">Next</a>
   <a class="button" href="#" id="prev">Prev</a>

    <div>
        <strong>Image 1</strong>
    <img src="http://dummyimage.com/600x400/000/fff.png&text=Image1"/>
    </div>
    <div>
        <strong>Image 2</strong>
    <img src="http://dummyimage.com/200x400/f00/000.jpg&text=Image2"/>
        </div>
    <div>
        <strong>Image 3</strong>
    <img src="http://dummyimage.com/100x100/0f0/000.png&text=Image3"/>
        </div>
    <div>
         <strong>Image 4</strong>
    <img src="http://dummyimage.com/400x400/0ff/000.gif&text=Image4"/>
        </div>
    <div>
        <strong>Image 5</strong>
    <img src="http://dummyimage.com/350x250/ff0/000.png&text=Image5"/>
        </div>

</div>

好的，我将为您指出正确的方向，而不是为您做所有的事情-将代码替换为
s而不是
，然后您可以将HTML嵌套在那些
（相对而言）中，以包含您想要的任何内容。它在开始时是跳跃的，但现在似乎工作正常。谢谢！