Мне нужно слайд-шоу, как в слайд-шоу на домашней странице ниже,
http://www.meshnetworks.ca/
Кто-нибудь использовал раньше, чем это слайд-шоу? .. или любую другую ссылку, пожалуйста, помогите мне ..
вы можете иметь все изображения слайд-шоу в отдельных divs, как это, причем только один div отображается в любом случае и остается скрытым.
<div id="main_img"> <img id = "img1" class= "active" src= "images/main_img1.jpg"></img> <img id = "img2" src= "images/main_img2.jpg"></img> <img id = "img3" src= "images/main_img3.jpg"></img> <img id = "img4" src= "images/main_img4.jpg"></img> </div> И при нажатии следующей или предыдущей кнопки вы устанавливаете следующее или предыдущее изображение как активное. fadeout более раннего div и fadeIn следующий / prev div как это:
function showNextImage () {
current_string = $("#main_img img.active").attr('id'); current = current_string.charAt(3); //get the current image number current++; if (current > 4){ //check if current image is the last image display first image current = 1; } current_string = "img" + current; $("#main_img img.active").removeClass('active').fadeOut(1000, function(){ //fadeOut existing image $("#main_img img").each(function(){ if($(this).attr('id') == current_string){ $(this).addClass('active').fadeIn(1000) //fadeIn next image } }); });
}
аналогично вы можете сделать для предыдущей кнопки
надеюсь это поможет
Вы можете посмотреть http://pikachoose.com/ Очень настраиваемое слайд-шоу jquery.
Согласно исходному коду, этот сайт создан Joomla! ,
а слайд-шоу – это fpss: http://www.frontpageslideshow.net/
Вот хороший http://css-tricks.com/examples/AnythingSlider/