87,996
社区成员
发帖
与我相关
我的任务
分享关于jquery的图像渐变动画解惑。
<html lang="en">
<head>
<meta charset="utf-8">
<title>渐变照片</title>
<style >
#photos img
{
position:absolute;
}
#photos
{
height:120px;
width:120px;
overflow:hidden；
}
<!-- 内部样式表结束 -->
</style>
<script src="./jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="photos">
<img alt="1" src='photos/1.jpg'/>
<img alt="2" src="./photos/2.jpg"/>
<img alt="3" src="./photos/3.jpg"/>
<img alt="4" src="./photos/4.jpg"/>
<img alt="5" src="./photos/5.jpg"/>
</div>
<script type="text/javascript">
$(document).ready(function(){
rotate(1);
});
function rotate(currentPhoto){
var numberOfPhotos=$('#photos img').length;
currentPhoto=currentPhoto%numberOfPhotos;//取模，保证地址再0-5；
<!--alert('当前照片'+currentPhoto); -->
$('#photos img').eq(currentPhoto).fadeOut(4000,function(){
<!--alert('进来了fadeOut');-->
$('#photos img').each(function(i){
$(this).css(
'zIndex',((numberOfPhotos-i)+currentPhoto)%numberOfPhotos
);
alert(i);
});
alert(this.src); //为什么这个this.src指示的图片和下一句show显示的图片连接不一样。
$(this).show(); //这句如果删掉后来过一段时间渐变就变空白了，求解释，为什么zindex切换不能实现切换呢，还要多这一句。
setTimeout(function(){rotate(++currentPhoto);},4000);
});
};
</script>
</body>
</html>
请大家最好断点式调试式解释，让我能快速明白里面的步骤和演化。分很多，主要是看大家的热心了
...全文
请发表友善的回复…
发表回复
Hello World, 2021-03-19
- 打赏
- 举报
你把((numberOfPhotos-i)+currentPhoto)%numberOfPhotos 这句用数字代进去算一下就明白了
一品梅 2021-03-19
- 打赏
- 举报
<html lang="en">
<head>
<meta charset="utf-8">
<title>渐变照片</title>
<style >
#photos img
{
position:absolute;
}
#photos
{
height:120px;
width:120px;
overflow:hidden；
}
<!-- 内部样式表结束 -->
</style>
<script src="./jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="photos">
<img alt="1" src='photos/1.jpg'/>
<img alt="2" src="./photos/2.jpg"/>
<img alt="3" src="./photos/3.jpg"/>
<img alt="4" src="./photos/4.jpg"/>
<img alt="5" src="./photos/5.jpg"/>
</div>
<script type="text/javascript">
//参数n为休眠时间，单位为毫秒:
function sleep(n) {
var start = new Date().getTime();
// console.log('休眠前：' + start);
while (true) {
if (new Date().getTime() - start > n) {
break;
}
}
// console.log('休眠后：' + new Date().getTime());
}
$(document).ready(function(){
rotate(1);
});
function rotate(currentPhoto){
var numberOfPhotos=$('#photos img').length;
currentPhoto=currentPhoto%numberOfPhotos;
$('#photos img').each(function(i){
alert('调用rotate渐变前:'+this.src+' zIndex值:'+$(this).css('zIndex'));});
$('#photos img').eq(currentPhoto).fadeOut(40000,function(){
$('#photos img').each(function(i){
$(this).delay("slow").css(
'zIndex',((numberOfPhotos-i)+currentPhoto)%numberOfPhotos
);
sleep(1000);
alert('图片索引'+currentPhoto+'慢慢淡出'+' 当前i值'+i+' 来源:'+this.src+' zIndex值被设置为:'+$(this).css('zIndex'));
});
alert(this.src+'渐变淡出后display状态从none转变成show');
$(this).show();
setTimeout(function(){rotate(++currentPhoto);},4000);
});
};
</script>
</body>
</html>一品梅 2021-03-18
- 打赏
- 举报
我记得this都是直接调用函数的对象，上一级的没法调用，要变通成
self=this;
function(...)
self.xxx
一品梅 2021-03-18
- 打赏
- 举报
谢谢楼上两位大大解答。二楼非常详尽，耐心。
三楼非常灵活简单。都亲测有效。
// //alert('当前照片'+currentPhoto);
// $(`#photos img`).eq(currentPhoto).fadeOut(4000,function(){
// //alert('进来了fadeOut');
// $('#photos img').each(function(i){
// // 此处$(this)并不是遍历中的this，而是调用rotate()方法的对象 为什么this不是内函数EACH中的FUNCTION的参数呢
// $(this).css(
// 'zIndex',((numberOfPhotos-i)+currentPhoto)%numberOfPhotos
// );
// //alert(i);
// });
// //js的注释用//或/**/ html才用<!---->
Hello World, 2021-03-18
- 打赏
- 举报
可以参考一下这个资料：Javascript this关键字
Hello World, 2021-03-17
- 打赏
- 举报
其实没那么麻烦，切换时把看得到的隐藏，指定的显示出来就可以了：
<html lang="en">
<head>
<meta charset="utf-8">
<title>渐变照片</title>
<style>
#photos img {
position: absolute;
display: none;
}
#photos {
height: 120px;
width: 120px;
overflow: hidden;
}
</style>
<script src="../../Script/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="photos">
<img src="../../images/Icons/number/blue/0.gif" />
<img src="../../images/Icons/number/blue/1.gif" />
<img src="../../images/Icons/number/blue/2.gif" />
<img src="../../images/Icons/number/blue/3.gif" />
<img src="../../images/Icons/number/blue/4.gif" />
</div>
<script type="text/javascript">
$(document).ready(function () {
rotate(1);
});
function rotate(currentPhoto) {
var numberOfPhotos = $('#photos img').length;
currentPhoto = currentPhoto % numberOfPhotos; //取模，保证地址再0-5；
$('#photos img:visible').fadeOut(2000); //把看得见的隐藏掉
$('#photos img:eq(' + currentPhoto + ')').fadeIn(2000); //把指定的图片显示出来
setTimeout(function () { rotate(++currentPhoto); }, 3000); //循环下一个
};
</script>
</body>
</html>
Logerlink 2021-03-17
- 打赏
- 举报
<html lang="en">
<head>
<meta charset="utf-8">
<title>渐变照片</title>
<style >
#photos img
{
position:absolute;
width: 100px;
height: 100px;
}
#photos
{
height:120px;
width:120px;
overflow:hidden；
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.4/jquery.js"></script>
</head>
<body>
<div id="photos">
<img alt="c" src='https://profile.csdnimg.cn/8/D/B/1_scientists112'/>
<img alt="笑" src="https://profile.csdnimg.cn/D/4/8/1_only_endure"/>
<img alt="猴子" src="https://profile.csdnimg.cn/C/6/A/1_qq_25130577"/>
</div>
<script type="text/javascript">
$(document).ready(function(){
rotate(0);
});
function rotate(currentPhoto){
var numberOfPhotos=$('#photos img').length;
currentPhoto=currentPhoto%numberOfPhotos;//取模，保证地址再0-5；
// //alert('当前照片'+currentPhoto);
// $(`#photos img`).eq(currentPhoto).fadeOut(4000,function(){
// //alert('进来了fadeOut');
// $('#photos img').each(function(i){
// // 此处$(this)并不是遍历中的this，而是调用rotate()方法的对象
// $(this).css(
// 'zIndex',((numberOfPhotos-i)+currentPhoto)%numberOfPhotos
// );
// //alert(i);
// });
// //js的注释用//或/**/ html才用<!---->
//为什么这个this.src指示的图片和下一句show显示的图片连接不一样。
// #因为$('#photos img').each 的使用错了 正常做法如下
// #将其他图片的z-index降低
$(`#photos img`).eq(currentPhoto).fadeOut(1000,function(){
$('#photos img').not(`:eq(${currentPhoto})`).each(function(i,item){
$(item).css(
'zIndex',-1
);
});
// #将当前图片的z-index提为最高
$(this).css(
'zIndex',1
);
console.log(this)
//这句如果删掉后来过一段时间渐变就变空白了，求解释，为什么zindex切换不能实现切换呢，还要多这一句。
// #调用fadeOut时会给当前的调用对象加上display:none 此处在fadeOut中调用show()则是取消display:none的效果
$(this).show();
setTimeout(function(){rotate(++currentPhoto);},4000);
});
};
</script>
</body>
</html>
