简单的淡入淡出javascript图像旋转器
simple fade javascript image rotator
我发现这篇旧帖子要求一个简单的渐变图像旋转器:
寻找一个简单的淡出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);
});
这是最初的小提琴
http://jsfiddle.net/jtbowden/UNZR5/1/
我已经花了一些时间来调整它(不是jquery程序员:/)我需要添加的只是每张图片的标题。有人能帮我在同一个代码中添加字幕吗?
真的很感激:)
您需要增强CSS,但它正在按要求工作
http://jsfiddle.net/dU93C/
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;
}
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>
JS
$(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);
});
相关文章:
- 需要关于随机图像旋转的指南
- Jquery CSS背景图像旋转
- 全屏背景图像+旋转图像
- 随机图像旋转的多个实例
- JS下拉菜单显示在图像旋转器上
- 请解释Javascript图像旋转代码
- JavaScript 中的图像旋转器(键下)
- jquery 图像旋转器(仅在 JS 中传递图像)
- 如何停止多次单击下一个以破坏我的图像旋转器
- 停止 3 个图像旋转只需单击一个按钮
- 背景图像旋转器.php + jQuery每4秒显示一次随机照片
- 图像旋转背景 js 跳转到页面顶部
- 画布图像旋转中的问题
- 在画布上绘制多个图像,每个图像旋转
- 使用关键帧图像旋转器时,图像不会在两个块之间同步协调
- 最简单的图像旋转器 - 使用设置间隔失败
- 需要按钮显示/隐藏图像旋转 href 添加到 javascript 代码中
- 图像旋转和Jcrop.js
- 360 度图像旋转指示器
- 通过手机加载时,画布图像会将图像旋转 90 度