Показывайте сайт, — помогу
serialcenter.ru
новое видео
Показывайте сайт, — помогу
Есть офсайт плагина CarouFredSel
с исходниками, документацией и примерами.
Да поищите по сайту. По моему очень много готовых решений.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <title>Click Carousel</title> <script type="text/javascript" src="click-carousel.js"></script> <script type="text/javascript"> $(function(){ $("#container").clickCarousel({margin: 10}); }); </script> </head> <body> <div id="wrapper"> <div id="container"> <img src="img1.jpg" alt="Cuba" /> <img src="img2.jpg" alt="Cuba" /> <img src="img3.jpg" alt="Cuba" /> <img src="img4.jpg" alt="Cuba" /> <img src="img5.jpg" alt="Cuba" /> </div><!-- container --> <img id="carouselLeft" src="leftArr.jpg" alt="Left Arrow" /> <img id="carouselRight" src="rightArr.jpg" alt="Right Arrow" /> </div><!-- wrapper --> </body> </html>
$("#foo2").carouFredSel({ circular: false, infinite: false, auto : false, button : "#foo2_prev", }, button : "#foo2_next", }, pagination : "#foo2_pag" });
<div class="image_carousel"> <div id="foo2"> <img src="/examples/images/small/basketball.jpg" alt="basketball" width="140" height="140" /> <img src="/examples/images/small/beachtree.jpg" alt="beachtree" width="140" height="140" /> <img src="/examples/images/small/cupcackes.jpg" alt="cupcackes" width="140" height="140" /> <img src="/examples/images/small/hangmat.jpg" alt="hangmat" width="140" height="140" /> <img src="/examples/images/small/new_york.jpg" alt="new york" width="140" height="140" /> <img src="/examples/images/small/laundry.jpg" alt="laundry" width="140" height="140" /> <img src="/examples/images/small/mom_son.jpg" alt="mom son" width="140" height="140" /> <img src="/examples/images/small/picknick.jpg" alt="picknick" width="140" height="140" /> <img src="/examples/images/small/shoes.jpg" alt="shoes" width="140" height="140" /> <img src="/examples/images/small/paris.jpg" alt="paris" width="140" height="140" /> <img src="/examples/images/small/sunbading.jpg" alt="sunbading" width="140" height="140" /> <img src="/examples/images/small/yellow_couple.jpg" alt="yellow couple" width="140" height="140" /> </div> <div class="clearfix"></div> <a class="prev" id="foo2_prev" href="#"><span>prev</span></a> <a class="next" id="foo2_next" href="#"><span>next</span></a> <div class="pagination" id="foo2_pag"></div> </div>
.image_carousel { padding: 15px 0 15px 40px; position: relative; } .image_carousel img { border: 1px solid #ccc; background-color: white; padding: 9px; margin: 7px; display: block; float: left; } background: url(../images/miscellaneous_sprite.png) no-repeat transparent; width: 45px; height: 50px; display: block; position: absolute; top: 85px; } background-position: 0 0; } background-position: -50px 0; } cursor: default; } display: none; } .pagination { text-align: center; } .pagination a { background: url(../images/miscellaneous_sprite.png) 0 -300px no-repeat transparent; width: 15px; height: 15px; margin: 0 5px 0 0; display: inline-block; } .pagination a.selected { background-position: -25px -300px; cursor: default; } .pagination a span { display: none; } .clearfix { float: none; clear: both; }