Autor | Zpráva | ||
---|---|---|---|
PePe15th Profil |
#1 · Zasláno: 2. 4. 2011, 11:01:12
Nevíte jak tento script upravit, aby při zvolení (exgames.cz) položky, která se nachází dál než o 1 místo neposunul slider pouze o 1 místo?
Kód: <div id="slider"> <img class="scrollButtons left" src="http://exgames.cz/templates/exgames_cz/images/lleve2.png"> <div style="overflow: hidden;" class="scroll"> <div class="scrollContainer"> <div class="panel" id="panel_1"> <div id="nova_hra"> <div> <img src="http://exgames.cz/games/images/TeddyWear.jpg" height="95" width="145" alt="online hra TeddyWear" /> <h2><a href="http://exgames.cz/oblíkačky/76/TeddyWear.html" title="Hrát online hru TeddyWear">TeddyWear</a></h2> <p class="popis">Teddy bear dress-up game! Dress Teddy in the …</p> </div> </div> </div> <div class="panel" id="panel_2"> <div id="nova_hra"> <div> <img src="http://exgames.cz/games/images/Diner-Chef.jpg" height="95" width="145" alt="online hra Diner Chef" /> <h2><a href="http://exgames.cz/oddechové-hry/75/Diner-Chef.html" title="Hrát online hru Diner Chef">Diner Chef</a></h2> <p class="popis">Your diner is ready to open for business now.…</p> </div> </div> </div> <div class="panel" id="panel_3"> <div id="nova_hra"> <div> <img src="http://exgames.cz/games/images/Fish-Catcher.jpg" height="95" width="145" alt="online hra Fish Catcher" /> <h2><a href="http://exgames.cz/akční-hry/73/Fish-Catcher.html" title="Hrát online hru Fish Catcher">Fish Catcher</a></h2> <p class="popis">Chytání ryb je jednoduchá flashová hra. P…</p> </div> </div> </div> <div class="panel" id="panel_4"> <div id="nova_hra"> <div> <img src="http://exgames.cz/games/images/Ice-Breakers:-Penguin-Pirates.png" height="95" width="145" alt="online hra Ice Breakers: Penguin Pirates" /> <h2><a href="http://exgames.cz/logické-hry/72/Ice-Breakers-Penguin-Pirates.html" title="Hrát online hru Ice Breakers: Penguin Pirates">Ice Breakers: Penguin Pirates</a></h2> <p class="popis">Vítejte v další kapitole Ice Breakers! Ned…</p> </div> </div> </div> <div class="panel" id="panel_5"> <div id="nova_hra"> <div> <img src="http://exgames.cz/games/images/Bunny-Flags---Chinese.png" height="95" width="145" alt="online hra Bunny Flags - Chinese" /> <h2><a href="http://exgames.cz/střílečky/68/Bunny-Flags---Chinese.html" title="Hrát online hru Bunny Flags - Chinese">Bunny Flags - Chinese</a></h2> <p class="popis">Jak byste bránili svou vlajku z vlny nepřá…</p> </div> </div> </div> </div> </div> <img class="scrollButtons right" src="http://exgames.cz/templates/exgames_cz/images/lprave2.png"> </div> Script: $(function() { var totalPanels = $(".scrollContainer").children().size(); var regWidth = 145; var regImgWidth = $(".panel img").css("width"); var regTitleSize = $(".panel h2").css("font-size"); var regParSize = $(".panel p").css("font-size"); var movingDistance = 0; var curWidth = 350; var curImgWidth = $(".panel img").css("width"); var curTitleSize = $(".panel h2").css("font-size"); var curParSize = $(".panel p").css("font-size"); var $panels = $('#slider .scrollContainer > div'); var $container = $('#slider .scrollContainer'); $panels.css({'float' : 'left','position' : 'relative'}); $("#slider").data("currentlyMoving", false); $container .css('width', ($panels[0].offsetWidth * $panels.length) + 100 ) .css('left', "-350px"); var scroll = $('#slider .scroll').css('overflow', 'hidden'); function returnToNormal(element) { $(element) .animate({ width: regWidth }) .find("img") .animate({ width: regImgWidth }) .end() .find("a") .animate({ fontSize: regTitleSize }) .end() .find("p") .animate({ fontSize: regParSize }); }; function growBigger(element) { $(element) .animate({ width: curWidth }) .find("img") .animate({ width: curImgWidth }) .end() .find("a") .animate({ fontSize: curTitleSize }) .end() .find("p") .animate({ fontSize: curParSize }); } //direction true = right, false = left function change(direction) { //if not at the first or last panel if((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))) { return false; } //if not currently moving if (($("#slider").data("currentlyMoving") == false)) { $("#slider").data("currentlyMoving", true); var next = direction ? curPanel + 1 : curPanel - 1; var leftValue = $(".scrollContainer").css("left"); var movement = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance; $(".scrollContainer") .stop() .animate({ "left": movement }, function() { $("#slider").data("currentlyMoving", false); }); returnToNormal("#panel_"+curPanel); growBigger("#panel_"+next); curPanel = next; //remove all previous bound functions $("#panel_"+(curPanel+1)).unbind(); //go forward $("#panel_"+(curPanel+1)).click(function(){ change(true); }); //remove all previous bound functions $("#panel_"+(curPanel-1)).unbind(); //go back $("#panel_"+(curPanel-1)).click(function(){ change(false); }); //remove all previous bound functions $("#panel_"+curPanel).unbind(); } } // Set up "Current" panel and next and prev growBigger("#panel_1"); var curPanel = 1; $("#panel_"+(curPanel+1)).click(function(){ change(true); }); $("#panel_"+(curPanel-1)).click(function(){ change(false); }); //when the left/right arrows are clicked $(".right").click(function(){ change(true); }); $(".left").click(function(){ change(false); }); $(window).keydown(function(event){ switch (event.keyCode) { case 13: //enter $(".right").click(); break; case 32: //space $(".right").click(); break; case 37: //left arrow $(".left").click(); break; case 39: //right arrow $(".right").click(); break; } }); }); |
||
Časová prodleva: 13 let
|
0