Skip to content

Instantly share code, notes, and snippets.

@kirel

kirel/slider.html

Created September 2, 2009 20:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kirel/179929 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kirel/179929 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
slider.html
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<style type="text/css" media="screen">
#inner, .scrolling {
margin:0;
padding:0;
}
#outer {
overflow: hidden;
width: 500px;
height: 500px;
border: 1px red solid;
}
#inner {
white-space: nowrap;
width:1000px;
}
.scrolling {
display: block;
text-align: center;
font-family: fantasy; /*Yeah!*/
float:left;
width: 500px;
height: 500px;
position:relative;
padding-top: 180px;
font-size: 80px;
font-weight:bolder;
}
</style>
</head>
<body>
<div id="outer">
<ul id="inner">
<li class="scrolling" style="background: red">jQuery</li>
<li class="scrolling" style="background: lime">Slider</li>
<li class="scrolling" style="background: maroon">Experiment</li>
</ul>
</div>
<script type="text/javascript" charset="utf-8">
$(function(){
var second;
function step() {
$('#inner').css({marginLeft:'0px'});
if (second) $('.scrolling:first').insertAfter($('.scrolling:last'));
second = true;
$('#inner').animate({marginLeft:'-500px'}, 1000);
}
var int = setInterval ( step, 3000 );
$('#outer').mouseout(function(){
int = setInterval ( step, 3000 );
});
$('#outer').mouseover(function(){
clearInterval(int);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment