个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我希望有一个横幅可以在图像中旋转(有效)但是我无法弄清楚如果单击下面的链接如何让它转到某个图像......一旦图像显示我希望它继续旋转。我正在使用 Opacity 使图像淡出并且效果很好，所以我只需要弄清楚如何让 .click 函数以我认为的方式工作。也许使用索引号？
这是我的代码:
<style type="text/css">
#images{
position:relative;
display:block;
height: 450px;
}
#images img{
position:absolute;
}
img.current{
z-index:100;
}
img.next{
z-index:99;
}
</style>
<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.js" ></script>
<script language="javascript" type="text/javascript">
$("document").ready( // Start JQ
function(){
var timing=3000 ;
var currentImg ;
var nextImg ;
setInterval(rotateImages,timing);
function rotateImages(){
currentImg=$(".current");
nextImg=currentImg.next() ;
if(nextImg.length==0){
nextImg=$("#images img:first") ;
}
currentImg.removeClass("current").addClass("next") ;
nextImg.addClass("current").css({opacity:0})
.animate({opacity:1},timing/2,function(){
currentImg.removeClass("next") ;
});
}
}); // End JQ
</script>
</head>
<body >
<div id="images">
<img src="images/jpg/image1.jpg" alt="image1" class="current"/>
<img src="images/jpg/image2.jpg" alt="image2" />
<img src="images/jpg/image3.jpg" alt="image3" />
<img src="images/jpg/image4.jpg" alt="image4" />
</div>
<div class="click">
<a id="1">Image 1</a>
<a id="2">Image 2</a>
<a id="3">Image 3</a>
<a id="4">Image 4</a>
</div>
最佳答案
$('.click a').click(new function(){
currentImg=$(".current");
nextImgid=this.id ;
nextImg=$("#images img:("+nextImgid+")") ;
currentImg.removeClass("current").addClass("next") ;
nextImg.addClass("current").css({opacity:0}).animate({opacity:1},timing/2,function( ){currentImg.removeClass("next") ;
});
});
阅读http://api.jquery.com/click/并为上面和旋转之间的通用代码创建一个通用函数。
关于jQuery:具有点击不透明度变化的图像推子，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15344265/
24
4
0
我正在使用淡入/淡出 jQuery 序列(类似于下面)，但老板希望能够为几行指定不同的显示时间。我玩它的运气不太好。 function ShowList() { var i = 1; func
我在 JQuery 中创建了这个简单的推子， 它运行良好，只是第一个图像褪色两次，我该如何解决这个问题？这是代码: $(document).ready(function(){ var count
我有一个 DOM 元素，其中包含可变数量的段落: Here's a paragraph Here's another one Here's the third 这些 p 元
关于 http://www.elitedeafpoker.com/dev/在“Hand Strength”部分，我试图让内容(淡入和淡出)显示在显示“Royal Flush”的正确区域。我在“皇家同花
我的大学作业要求我使用 VST SDK 2.4 构建一个简单的加法合成器。 到目前为止，我已经对分音求和了，还有一个信封。 我认为信封有效但我不确定，因为它根据推子/ slider 位置拉动它的值，而
你能帮我提供一个或两个链接到一个自动淡出不同 div 框的插件吗？这是我的 HTML: text1 text2 text3 谢谢。感谢
我是一名优秀的程序员,十分优秀！