Есть простой js слайдер с эффектом карусели
в html выглядит так:
<script type="text/javascript">
$(document).ready(function(){
$('#slider-code').tinycarousel({ pager: true });
});
</script>
|
Код:
|
<body>
<div id="slider-code">
<a href="#" class="buttons prev">left</a>
<div class="viewport">
<ul class="overview">
<li><img src="images/picture7.jpg"></li>
<li><img src="images/picture5.jpg"></li>
<li><img src="images/picture6.jpg"></li>
<li><img src="images/picture4.jpg"></li>
<li><img src="images/picture3.jpg"></li>
<li><img src="images/picture2.jpg"></li>
</ul>
</div>
<a href="#" class="buttons next">right</a>
<ul class="pager">
<li><a rel="0" class="pagenum" href="#">1</a></li>
<li><a rel="1" class="pagenum" href="#">2</a></li>
<li><a rel="2" class="pagenum" href="#">3</a></li>
<li><a rel="3" class="pagenum" href="#">4</a></li>
<li><a rel="4" class="pagenum" href="#">5</a></li>
<li><a rel="5" class="pagenum" href="#">6</a></li>
</ul>
</div> |
Вид:экран внизу кнопки в виде цифр
То есть нажал на кнопку 1-первый слайд
на кнопку 6 -6 слайд с пролистыванием
и так далее...
Задача ,как каким образом этот слайдер прикрутить на свои кнопки
к примеру пусть есть кнопка на это йже страничке
|
Код:
|
<buton> кнопка 1</buton>
<buton> кнопка 2</buton>
<buton> кнопка 3</buton> |
Или есть кнопки -картинки.
Вот хочется чтобы при нажатии на такую кнопку картинку срабатывал слайдер, а его кнопки убрать со странички.
Сам скрипт:
(function($){$.tiny=$.tiny||{};$.tiny.carousel={options:{start:1,display:1,axis:'y',controls:true,pager:false,interval:false,intervaltime:3000,rewind:false,animation:true,duration:500,callback:null}};$.fn.tinycarousel=function(options){var options=$.extend({},$.tiny.carousel.options,options);this.each(function(){$(this).data('tcl',new Carousel($(this),options));});return this;};$.fn.tinycarousel_start=function(){$(this).data('tcl').start();};$.fn.tinycarousel_stop=function(){$(this).data('tcl').stop();};$.fn.tinycarousel_move=function(iNum){$(this).data('tcl').move(iNum-1,true);};function Carousel(root,options){var oSelf=this;var oViewport=$('.viewport:first',root);var oContent=$('.overview:first',root);var oPages=oContent.children();var oBtnNext=$('.next:first',root);var oBtnPrev=$('.prev:first',root);var oPager=$('.pager:first',root);var iPageSize,iSteps,iCurrent,oTimer,bPause,bForward=true,bAxis=options.axis=='x';
function initialize(){iPageSize=bAxis?$(oPages[0]).outerWidth(true):$(oPages[0]).outerHeight(true);var iLeftover=Math.ceil(((bAxis?oViewport.outerWidth():oViewport.outerHeight())/(iPageSize*options.display))-1);iSteps=Math.max(1,Math.ceil(oPages.length/options.display)-iLeftover);iCurrent=Math.min(iSteps,Math.max(1,options.start))-2;oContent.css(bAxis?'width':'height',(iPageSize*oPages.length));oSelf.move(1);setEvents();}
function setEvents(){if(options.controls&&oBtnPrev.length>0&&oBtnNext.length>0){oBtnPrev.click(function(){oSelf.move(-1);return false;});oBtnNext.click(function(){oSelf.move(1);return false;});}if(options.interval){root.hover(oSelf.stop,oSelf.start);}if(options.pager&&oPager.length>0){$('a',oPager).click(setPager);}};
function setButtons(){if(options.controls){oBtnPrev.toggleClass('disable',!(iCurrent>0));oBtnNext.toggleClass('disable',!(iCurrent+1<iSteps));}if(options.pager){var oNumbers=$('.pagenum',oPager);oNumbers.removeClass('active');$(oNumbers[iCurrent]).addClass('active');}};
function setPager(oEvent){if($(this).hasClass('pagenum')){oSelf.move(parseInt(this.rel),true);}return false;};
function setTimer(){if(options.interval&&!bPause){clearTimeout(oTimer);oTimer=setTimeout(function(){iCurrent=iCurrent+1==iSteps?-1:iCurrent;bForward=iCurrent+1==iSteps?false:iCurrent==0?true:bForward;oSelf.move(bForward?1:-1);},options.intervaltime);}};
this.stop=function(){clearTimeout(oTimer);bPause=true;};
this.start=function(){bPause=false;setTimer();};
this.move=function(iDirection,bPublic){iCurrent=bPublic?iDirection:iCurrent+=iDirection;if(iCurrent>-1&&iCurrent<iSteps){var oPosition={};oPosition[bAxis?'left':'top']=-(iCurrent*(iPageSize*options.display));oContent.animate(oPosition,{queue:false,duration:options.animation?options.duration:0,complete:function(){if(typeof options.callback=='function')options.callback.call(this,oPages[iCurrent],iCurrent);}});setButtons();setTimer();}};return initialize();};})(jQuery);
И CSS:
|
Код:
|
#slider-code { height: 145px; overflow:hidden; }
#slider-code .viewport { float: left; width: 240px; height: 125px; overflow: hidden; position: relative; }
#slider-code .buttons { display: block; margin: 30px 10px 0 0; float: left; }
#slider-code .next { margin: 30px 0 0 10px; }
#slider-code .disable { visibility: hidden; }
#slider-code .overview { list-style: none; padding: 0; margin: 0; position: absolute; left: 0; top: 0; }
#slider-code .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}
#slider-code .pager { overflow:hidden; list-style: none; clear: both; margin: 0 0 0 45px; }
#slider-code .pager li { float: left; }
#slider-code .pagenum { background-color: #fff; text-decoration: none; text-align: center; padding: 5px; color: #555555; font-size: 14px; font-weight: bold; display: block; }
#slider-code .active { color: #fff; background-color: #555555; } |
Надеюсь на вашу помощь,не бейте сильно,только учусь.