[英]How can I hide a class of DIV in a container and how another div in the same container? Using jQuery
I have a class of DIV which is about 10 in number in a container.I want to hide and show them one bye one after every 15 seconds with a nice fadeOut() or bounce. 我有一个DIV类,它在一个容器中的数量约为10个。我想每15秒隐藏一次并向其展示一个不错的fadeOut()或弹跳。 I think the fade will be ok.
我认为褪色就可以了。 Please help Using jQuery.
请帮助使用jQuery。
The is my HTML code: 这是我的HTML代码:
<h1 class="advert"> Spsonsord Links</h1>
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
</div><!--end of div clas "CONTAINER"-->
You can have a counter set to 0 and increment in a function and show the divs
and use setTimeout
to call the function repeatedly. 您可以将计数器设置为0并在函数中递增,并显示
divs
并使用setTimeout
重复调用该函数。
var ctr = 0; $(document).ready(function(){ showElem(); }); function showElem() { var length = $('.advertcont').length; $('.advertcont').hide(); $('.advertcont').eq(ctr).fadeIn(900); (ctr >= (length-1)) ? ctr = 0: ctr++; setTimeout(showElem, 1000); //make it 15000. Have used 1000 for the demo }
.advertcont {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1 class="advert"> Spsonsord Links</h1> <div class="advertcont"> <img src="images/advertimage/lap.png" class="advertimg"> <p class="adverttext">Get the Best Shoes at 30GHS.</p> <a class="advertlink" href="#">www.shoes.com</a> </div> <!--end of div clas "ADVERTCONT"--> <div class="advertcont"> <img src="images/advertimage/lap.png" class="advertimg"> <p class="adverttext">Get the Best Shoes at 30GHS.</p> <a class="advertlink" href="#">www.shoes.com</a> </div> <!--end of div clas "ADVERTCONT"--> <div class="advertcont"> <img src="images/advertimage/lap.png" class="advertimg"> <p class="adverttext">Get the Best Shoes at 30GHS.</p> <a class="advertlink" href="#">www.shoes.com</a> </div> <!--end of div clas "ADVERTCONT"--> <div class="advertcont"> <img src="images/advertimage/lap.png" class="advertimg"> <p class="adverttext">Get the Best Shoes at 30GHS.</p> <a class="advertlink" href="#">www.shoes.com</a> </div> <!--end of div clas "ADVERTCONT"--> <div class="advertcont"> <img src="images/advertimage/lap.png" class="advertimg"> <p class="adverttext">Get the Best Shoes at 30GHS.</p> <a class="advertlink" href="#">www.shoes.com</a> </div> <!--end of div clas "ADVERTCONT"--> </div><!--end of div clas "CONTAINER"-->
See below simple solution 见下面的简单解决方案
setInterval(function(){ jQuery('.advertcont:visible:eq(0)').fadeOut(); }, 15000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1 class="advert"> Spsonsord Links</h1> <div class="advertcont"> <img src="images/advertimage/lap.png" class="advertimg"> <p class="adverttext">Get the Best Shoes at 30GHS.</p> <a class="advertlink" href="#">www.shoes.com</a> </div> <!--end of div clas "ADVERTCONT"--> <div class="advertcont"> <img src="images/advertimage/lap.png" class="advertimg"> <p class="adverttext">Get the Best Shoes at 30GHS.</p> <a class="advertlink" href="#">www.shoes.com</a> </div> <!--end of div clas "ADVERTCONT"--> <div class="advertcont"> <img src="images/advertimage/lap.png" class="advertimg"> <p class="adverttext">Get the Best Shoes at 30GHS.</p> <a class="advertlink" href="#">www.shoes.com</a> </div> <!--end of div clas "ADVERTCONT"--> <div class="advertcont"> <img src="images/advertimage/lap.png" class="advertimg"> <p class="adverttext">Get the Best Shoes at 30GHS.</p> <a class="advertlink" href="#">www.shoes.com</a> </div> <!--end of div clas "ADVERTCONT"--> <div class="advertcont"> <img src="images/advertimage/lap.png" class="advertimg"> <p class="adverttext">Get the Best Shoes at 30GHS.</p> <a class="advertlink" href="#">www.shoes.com</a> </div> <!--end of div clas "ADVERTCONT"--> </div><!--end of div clas "CONTAINER"-->
Add some css. 添加一些CSS。
.advertcont{
display:none;
}
Then your html 然后你的HTML
<h1 class="advert"> Spsonsord Links</h1>
<div class="advertcont">
<img src="http://placehold.it/350x150" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="http://placehold.it/350x150" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="http://placehold.it/350x150" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="http://placehold.it/350x150" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="http://placehold.it/350x150" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
</div><!--end of div clas "CONTAINER"-->
Then some jquery 然后一些jQuery
$(function() {
$(".advertcont").each(function(index, element) {
setTimeout(function() {
// fade previous element if any existed
if ($(element).prev().hasClass('advertcont')) {
$(element).prev().fadeOut(1000, function() {
$(element).show(1000);
});
} else {
$(element).show(1000);
}
// set timer to index (current iteration of the loop (current element)) * 15 seconds:
}, index * 15000);
});
});
Find it here https://jsfiddle.net/njueukavi/3exn83ct/ 在这里找到它https://jsfiddle.net/njueukavi/3exn83ct/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.