jquery auto scroller

J'ai une div et je voudrais faire défiler automatiquement toutes les 5 secondes, puis-je le faire avec JQuery?jquery auto scroller

Source

2010-04-16 vick

<!doctype html> 
<html> 
<head> 
<title>JQuery Cycle Plugin - Example Slideshow</title> 
<style type="text/css"> 
.slideshow { height: 232px; width: 232px; margin: auto } 
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } 
</style> 
<!-- include jQuery library --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 

<!-- include Cycle plugin --> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script> 

<!-- initialize the slideshow when the DOM is ready --> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.slideshow').cycle({ 
     fx: 'shuffle' // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
    }); 
}); 
</script> 
</head> 
<body> 
    <div class="slideshow"> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> 
    </div> 
</body> 
</html>

qui est exacly ce que je veux, mais je veux travailler avec des balises plutôt que des images ... je peux modifier pour travailler?

Source

2010-04-16 22:11:48 vick

Oui, voir ma réponse modifiée. –

Vérifiez la fonction scrollTop() ...

http://api.jquery.com/scrollTop/

Source

2010-04-16 21:50:20

http://demo.webdesignbooth.com/content-slider/ je cherche quelque chose comme ça, mais sans les onglets cliquables, je veux que ce soit automatique – vick

Sur la base de votre commentaire avec le lien de démonstration, vous voulez probablement le plug-in Cycle puis: http://jquery.malsup.com/cycle/

Oui, ce sera travailler avec n'importe quel tag, pas seulement avec des images. Si vous voulez faire défiler plusieurs <div> balises que vous pouvez faire quelque chose comme ceci:

<div class="slideshow"> 
    <div>Test 1</div> 
    <div>Test 2</div> 
    <div>Test 3</div> 
</div>

Il permet de faire défiler toutes les balises dans la classe de diaporama.

Source

2010-04-16 22:05:31

Il existe un plugin coda qui est assez similaire.

http://www.ndoherty.biz/demos/coda-slider/2.0/

Et il y a ce tutoriel pour un personnalisé si vous voulez créer votre propre,

http://jqueryfordesigners.com/coda-slider-effect/

espère que ces aide, Sinan.

Source

2010-04-16 22:10:06 Sinan

var scrolling = window.setInterval("autoScroll()", 5000); 

function autoScroll(elem) { 

    $(function() { 
     $('div#mycontainer').animate({ scrollTop: '+=' + 40 }); 
    }); 

}

Source

2010-04-17 04:01:28 XGreen

jquery auto scroller

Répondre

Questions connexes