<html>
<head>
<title>HTML-JQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$.fn.kw_img_roller = function(options){
$element = $(this);
$element.css("background-image","url('"+options.url+"')");
$element.css("height",options.scroll_height);
$element.data("scroll_height",options.scroll_height);
$element.data("present_height",0);
$img = $("<img />");
$img.attr("src",options.url);
$img.load(function(){
$element.css("width",this.width);
$element.data("height",this.height);
});
setInterval(function(){
if ($element.data("height") == ($element.data("present_height") + $element.data("scroll_height"))){
$element.data("present_height",0);
}
else {
$element.data("present_height",$element.data("present_height") + $element.data("scroll_height"));
}
$(".testing").html($element.data("present_height")+"-"+$element.data("height"));
$element.css("background-position","0 -"+($element.data("present_height")+(($element.data("present_height") != 0)?1:0))+"px");
},options.delay);
};
$(function(){
$(".image_roller").kw_img_roller({
url: "kw_slider.png",
direction: "vertical",
scroll_height: 41,
delay: 1000
});
});
</script>
</head>
<body bgcolor="gray">
<div class="image_roller"></div>
</body>
</html> |
