javascript - Slide images every 5 seconds -
this slideshow's images:
<section id="mainfooter"> <div class="mainfooter"> <p class="margright">jaafari housseine © 2013 <span>|</span> <a href="#!/page_privacy">privacy policy</a></p> <nav class="bgnav"> <ul> <li class="active"><a href="images/picture1.jpg"><img src="images/pagination_act.png" alt="" class="img_act"></a></li> <li><a href="images/picture2.jpg"><img src="images/pagination_act.png" alt="" class="img_act"></a></li> <li><a href="images/picture3.jpg"><img src="images/pagination_act.png" alt="" class="img_act"></a></li> <li><a href="images/picture4.jpg"><img src="images/pagination_act.png" alt="" class="img_act"></a></li> <li><a href="images/picture5.jpg"><img src="images/pagination_act.png" alt="" class="img_act"></a></li> <li><a href="images/picture6.jpg"><img src="images/pagination_act.png" alt="" class="img_act"></a></li> <li><a href="images/picture7.jpg"><img src="images/pagination_act.png" alt="" class="img_act"></a></li> <li><a href="images/picture8.jpg"><img src="images/pagination_act.png" alt="" class="img_act"></a></li> <li><a href="images/picture9.jpg"><img src="images/pagination_act.png" alt="" class="img_act"></a></li> </ul> </nav> <p class="fright text"><img src="images/envelope.png" alt="" class="envelope">résidence harmonie n°19, boulevard abdelkarim khattabi</p> </div> </section> the jquery script used that:
<script> $('ul li.active')(function(){$(this).removeclass("active") .delay(4500) .queue(function() { $(this).next('li').addclass("active"); $(this).dequeue(); }); }) </script> nothing goes alright.
if you're trying cycle <li> tag has "active" class on , css takes care of rest, can this:
<script> $(document).ready(function() { var items = $("nav.bgnav ul li"); var index = -1; function next() { // if not first iteration, // remove active class prev item if (index !== -1) { items.eq(index).removeclass("active"); } // go next item ++index; // if past end, wrap beginning if (index >= items.length) { index = 0; } // add active class next item items.eq(index).addclass("active"); // schedule next iteration settimeout(next, 4500); } next(); }); </script> since code works on active class, solution assumes have css makes image appear when active class on , not appear when there no active class , handles transitions want between images. if don't have that, need , have disclose rest of relevant page html/css. "active" class not magic. when combined css.
working example: http://jsfiddle.net/jfriend00/unucl/
based on new understanding of you're trying do, here's new piece of code changes actual img.src href of containing tag. cycles through each item default. when mouse hovers on given item, cycling stops , item displays it's new image. when mouse leaves item, restores image , cycling starts again. can hover stop , display item, stop hovering start automatic cycling.
$(document).ready(function() { // save original image url each var items = $("nav.bgnav ul li img"); items.each(function() { $(this).data("orig-src", this.src); }); var index = -1; var timer; function stop() { cleartimeout(timer); } function restore(i) { var olditem; // if not first iteration, // remove active class prev item if (i !== -1) { olditem = items.eq(i); olditem.closest("a").removeclass("active"); olditem.attr("src", olditem.data("orig-src")); } } function display(i) { var newitem = items.eq(i); // change image .src based on parent <a> href newitem.attr("src", newitem.closest("a").attr("href")); } function next() { // restore active item restore(index); // go next item ++index; // if past end, wrap beginning if (index >= items.length) { index = 0; } display(index); // schedule next iteration timer = settimeout(next, 1000); } next(); // make hover same thing $("nav.bgnav ul li img").hover(function() { var hoverindex = $(this).closest("li").index(); stop(); restore(index); display(hoverindex); }, function() { var hoverindex = $(this).closest("li").index(); index = hoverindex; next(); }) $("nav.bgnav ul li a").click(function() { // ignore clicks return false; }); }); full working demo: http://jsfiddle.net/jfriend00/ux2cg/
Comments
Post a Comment