A Tab style scrolling
Eine Scroll-Diashow im Tab-Stil (Scroller) mit jQuery-Demo
Download-archiv
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Tab</title>
<style>
@charset "utf-8";
/* CSS Document */
.webwidget_scroller_tab{font-size: 12px; font-family:Verdana, Geneva, sans-serif;width:500px}.tabContainer{width:100%;background:url(/image/tabstyling/tab.gif) repeat-x bottom;overflow:hidden;}.tabContainer li{float:left;margin-right:2px;background:url(/image/tabstyling/tabOff_right.gif) no-repeat right top;}.tabContainer li a{display:block!important;display:inline-block;padding:0 15px;height:27px;line-height:27px;background:url(/image/tabstyling/tabOff_left.gif) no-repeat left top;}
.webwidget_scroller_tab .tabHead{
list-style-type: none;
margin:0px;
padding:0px;
}
.webwidget_scroller_tab .tabBody{
height: 150px;
border-left:#dbdbdb solid 1px;
border-right:#dbdbdb solid 1px;
background-color: white;
overflow: hidden;
width:498px;
position: relative;
}
.webwidget_scroller_tab .tabBody ul,li{
margin: 0px;
padding: 0px;
list-style: none;
}
.webwidget_scroller_tab .tabBody ul{
width: 1500px;
position: absolute;
}
.webwidget_scroller_tab .tabBody ul li{
float: left;
width: 500px;
}
.webwidget_scroller_tab .tabHead li a{
font-weight: bold;
text-decoration: none;
color: #0099FF;
}
.webwidget_scroller_tab .tabCot{
float: left;
}
.webwidget_scroller_tab .tabCot p{
margin: 0px;
padding:5px;
}
.webwidget_scroller_tab .tabContainer li.currentBtn{background:url(/image/tabstyling/tabOn_right.gif) no-repeat right top;}
.webwidget_scroller_tab .tabContainer li.currentBtn a{height:28px;background:url(/image/tabstyling/tabOn_left.gif) no-repeat left top;color:#434142;}
.webwidget_scroller_tab .modA{margin:10px;}
.webwidget_scroller_tab .modBody{border-left:#dbdbdb solid 1px;border-right:#dbdbdb solid 1px; background-color: white;}
.webwidget_scroller_tab .modTop h3{padding:0px;margin:0px;height:28px;background:url(/image/tabstyling/modAT.gif) repeat-x left top;color:#2C6A78;font-size:12px;line-height:25px;}.modTop span.modATL,.modTop span.modATR{float:left;width:4px;height:28px;background:url(/image/tabstyling/bg.gif) no-repeat left top;overflow:hidden;}.modTop span.modATR{float:right;background:url(/image/tabstyling/bg.gif) no-repeat -4px top;}.modA #sideNav dd a:hover{background:url(/image/tabstyling/bg.gif) no-repeat left -110px;color:#FFF;text-decoration:none;}
.webwidget_scroller_tab .modBottom{width:100%;height:4px;background:url(/image/tabstyling/modAB.gif) repeat-x left top;overflow:hidden;}
.webwidget_scroller_tab .modBottom span.modABL,.modBottom span.modABR,.modTopB span.modATR,.modTopB span.modATL{float:left;width:4px;height:4px;background:url(/image/tabstyling/bg.gif) no-repeat left -28px;overflow:hidden;}
.webwidget_scroller_tab .modBottom span.modABR{float:right;background:url(/image/tabstyling/bg.gif) no-repeat -4px -28px;}
</style>
<script src='/js_webseite/jquery.js'></script>
<script>
(function(a){
a.fn.webwidget_scroller_tab=function(p){
var p=p||{};
var s_t_i=p&&p.scroller_time_interval?p.scroller_time_interval:"3000";
var s_w_p=p&&p.scroller_window_padding?p.scroller_window_padding:"5";
var s_w_w=p&&p.scroller_window_width?p.scroller_window_width:"350";
var s_w_h=p&&p.scroller_window_height?p.scroller_window_height:"270";
var s_h_t_c=p&&p.scroller_head_text_color?p.scroller_head_text_color:"blue";
var s_h_c_t_c=p&&p.scroller_head_current_text_color?p.scroller_head_current_text_color:"black";
var d=p&&p.directory?p.directory:"images";
var dom=a(this);
var s_length=dom.children(".tabBody").children("ul").children("li").length;
var timer;
var current = 0;
var li_width;
s_w_p += "px";
s_w_w += "px";
s_w_h += "px";
if(dom.find("ul").length==0||dom.find("li").length==0){
dom.append("Require content");
return null;
}
begin();
play();
function begin(){
dom.width(s_w_w);
dom.height(s_w_h);
li_width = parseInt(s_w_w)-2;
dom.children(".tabBody").width(parseInt(s_w_w)-2);
dom.children(".tabBody").height(parseInt(s_w_h)-28-4);
dom.children(".tabBody").children("ul").width((parseInt(s_w_w)-2)*s_length);
dom.children(".tabBody").children("ul").height(parseInt(s_w_h)-28-4);
dom.children(".tabBody").children("ul").children("li").width(parseInt(s_w_w)-2);
dom.children(".tabBody").children("ul").children("li").height(parseInt(s_w_h)-28-4);
dom.children(".tabBody").children("ul").children("li").children("p").css("padding",s_w_p);
dom.children(".tabContainer").children(".tabHead").children("li").children("a").css("color",s_h_t_c);
dom.children(".tabContainer").children(".tabHead").children("li").children("a").click(function(){
current = dom.children(".tabContainer").children(".tabHead").children("li").index($(this).parent());
play();
stop()
});
dom.hover(
function(){
stop();
},
function(){
timer = setTimeout(play,s_t_i);
}
);
}
function stop(){
clearTimeout(timer);
}
function play(){
clearTimeout(timer);
var to_location = -(current*li_width)+"px";
dom.children(".tabBody").children("ul").animate({
left:to_location
},500);
dom.children(".tabContainer").children(".tabHead").children("li").children("a").css("color",s_h_t_c);
dom.children(".tabContainer").children(".tabHead").children("li").removeClass("currentBtn")
dom.children(".tabContainer").children(".tabHead").children("li").eq(current).children("a").css("color",s_h_c_t_c);
dom.children(".tabContainer").children(".tabHead").children("li").eq(current).addClass("currentBtn");
if(current >= s_length-1){
current = 0;
}else{
current ++;
}
timer = setTimeout(play,s_t_i);
}
}
})(jQuery);
</script>
<script>
$(function() {
$(".webwidget_scroller_tab").webwidget_scroller_tab({
scroller_time_interval: '5000',
scroller_window_padding: '10',
scroller_window_width: '350',
scroller_window_height: '200',
scroller_head_text_color: '#0099FF',
scroller_head_current_text_color: '#666',
directory: 'images'
});
});
</script>
</head>
<body>
<div class="webwidget_scroller_tab" id="webwidget_scroller_tab">
<div class="tabContainer">
<ul class="tabHead">
<li class="currentBtn"><a href="javascript:;">Tab1</a></li>
<li><a href="javascript:;">Tab2</a></li>
<li><a href="javascript:;">Tab3</a></li>
</ul>
</div>
<div class="tabBody">
<ul>
<li class="tabCot">
<p>tab1 content</p>
</li>
<li class="tabCot">
<p>tab2 content</p>
</li>
<li class="tabCot">
<p>tab3 content</p>
</li>
</ul>
<div style="clear:both"></div>
</div>
<div class="modBottom">
<span class="modABL"> </span><span class="modABR"> </span>
</div>
</div>
</body>
</html>