Собираюсь поставить у себя на сайте слайдер контента. С яваскриптом не дружу. Нашел в интернете один, поему мнению, простенький jquery скрипт, но его надо немного модифицировать.
Вот, как этот скрипт работает сейчас:
http://dima-f1-learn.16mb.com/slider/slide.php (Если не грузится, то вот архив
slide.zip)
Надо сделать так, чтобы навигация осуществлялась по ссылкам “Назад” и “Вперед”, а цифры остались только для индикации положения слайдера и были без ссылок.
Вот, html разметка:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="slide.js"></script>
<title>Слайдер</title>
<style>
#block {
width: 688px;
height: 200px;
overflow: hidden;
margin: 50px auto 20px auto;
border: 4px solid #175B53;
}
#slider {
position:relative;
}
.slider_content {
width: 150px;
height: 154px;
margin: 10px 10px;
line-height: 154px;
border: 1px solid #557EEF;
float: left;
position: relative;
text-align: center;
}
.inslider a {
text-decoration:none;
}
.contentholder {
height: 200px;
width: 172px;
overflow: visible;
position: relative;
}
.contentslider {
position: absolute;
top: 10px;
left: 0;
}
.contentnav {
text-align: center;
}
.contentnav a {
text-decoration: none;
background-color: #D1FFD2;
padding: 0 7px;
}
.contentnav a.active {
background-color: #FFEE7E;
}
.other_nav {
text-align: center;
}
</style>
</head>
<body>
<div id='block'>
<!-- Контент слайдера -->
<div class="contentholder">
<div class="contentslider">
<div class="slider_content">
Какой то текст 1
</div>
<div class="slider_content">
Какой то текст 2
</div>
<div class="slider_content">
Какой то текст 3
</div>
<div class="slider_content">
Какой то текст 4
</div>
<div class="slider_content">
Какой то текст 5
</div>
<div class="slider_content">
Какой то текст 6
</div>
<div class="slider_content">
Какой то текст 7
</div>
<div class="slider_content">
Какой то текст 8
</div>
</div>
</div>
</div>
<!-- Навигация слайдера -->
<div class="contentnav">
<a rel="1" href="#">1</a>
<a rel="2" href="#">2</a>
<a rel="3" href="#">3</a>
<a rel="4" href="#">4</a>
<a rel="5" href="#">5</a>
</div>
<div class="other_nav"> <a href="#">Назад<a/> <a href="#">Вперед<a/> </div>
</body>
</html>
Вот, текст jquery скрипта:
$(document).ready(function() {
//Активизируем первую ссылку
$(".contentnav a:first").addClass("active");
//Ширина площади одной страницы
var contentwidth = $(".contentholder").width();
//Обще количество страниц
var totalcontent = $(".slider_content").size();
//Общая ширина всего контента (всех страниц)
var allcontentwidth = contentwidth * totalcontent;
//Проскальзывание контента устанавливаем на ширину, которую получили выше
$(".contentslider").css({'width' : allcontentwidth});
//Теперь пишем новую функцию для проскальзывания и навигации
rotate = function(){
//Количество раз, на которое надо прокрутить контент
var slideid = $active.attr("rel") - 1;
//Устанавливаем дистанцию, на которую происходит единичная прокрутка
var slidedistance = slideid * contentwidth;
//Удаляем активный класс
$(".contentnav a").removeClass('active');
//Добавляем активный класс
$active.addClass('active');
//Анимация проскальзывания
$(".contentslider").animate({
left: -slidedistance
}, 700 );
};
//Устанавливаем время для проведения проскальзывания
rotation = function(){
play = setInterval(function(){
//Навигация следующего слайда
$active = $('.contentnav a.active').next();
if ( $active.length === 0) {
//Перемещаемся к первому слайду в навигации
$active = $('.contentnav a:first');
}
rotate();
//Таймер устанавливаем на 5 сек
}, 15000);
};
//Запускаем функцию вращения
rotation();
$(".contentnav a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotation();
return false;
});
});
Пожалуйста помогите мне решить эту задачу!
