jQuery - HTML Slideshow, med pause når musen er over teksten.
Hey, jeg har sidet og tumlet lidt med en løsning på et jQuery HTML Slideshow, kan vel også kaldes news ticker, eller profil ticker.Det som det skal bruges til er at køre i mellem nogle fremhævede profiler.
Jeg har prøvet med jQuery og et simpelt lille script til at lave et slide med.
(function($){
$.fn.list_ticker = function(options){
var defaults = {
speed:0,
effect:'fade'
};
var options = $.extend(defaults, options);
return this.each(function(){
var obj = $(this);
var list = obj.children();
list.not(':first').hide();
setInterval(function(){
list = obj.children();
list.not(':first').hide();
var first_li = list.eq(0)
var second_li = list.eq(1)
if(options.effect == 'slide'){
first_li.slideUp();
second_li.slideDown(function(){
first_li.remove().appendTo(obj);
});
} else if(options.effect == 'fade'){
first_li.fadeOut(function(){
second_li.fadeIn();
first_li.remove().appendTo(obj);
});
}
}, options.speed)
});
};
})(jQuery);
Og på html siden er der følgende
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;charset=utf-8">
<title>List Ticker Demo</title>
<link type="text/css" href="images_files/style000.css" rel="stylesheet"/>
<script type="text/javascript" src="images_files/jquery00.js"></script>
<script type="text/javascript" src="images_files/ticker00.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#fade').list_ticker({
speed:2000,
effect:'fade'
});
$("#fade").hover(
function() {
$('#fade').stop(true, true);
}
);
});
</script>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Alex Fish">
<!-- Date: 2010-07-09 -->
</head>
<body>
<h1>List Ticker</h1>
<h2>effect:'fade'</h2>
<ul id="fade">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
<li>Fifth Item</li>
</ul>
</body>
</html>
Tror dog ikke min metode er så fandens god da indholdet er en Tablet der evt kunne se sådan her ud. meget hurtigt fabrikeret, bare lige som et eksempel.
<table border="1" width="278">
<tr>
<td width="114">Billede Profil Link</td>
<td width="3"> </td>
<td width="139">Profil Info</td>
</tr>
</table>
Nogen der har nogle ider til en optimal funktionel løsning, som benytter jQuery, vil helst benytte det lib, da jeg bruger nogle andre funktioner via jQuery, og på den måde kan spare en pokkers masse bøvl.
