Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
A Tab style scrolling

A Tab style scrolling

Eine Scroll-Diashow im Tab-Stil (Scroller) mit jQuery-Demo Download-archiv

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">&nbsp;</span><span class="modABR">&nbsp;</span> </div> </div> </body> </html>