При создании одного сайта, требовалось разработать скрипт, который представлял из себя карусель новостей, выводящий последние материалы. Ну так суть в чем? - В том, что скрипт должен быть динамическим и переключаться между каждой новостью за определенный промежуток времени. При разработке возникла только одна проблема, и была она заключена в том, что в Safari скрипт отказывается правильно работать, а вернее просто не выводит картинку динамически.
А так в целом, кому не обязательно, чтобы скрипт работал в данном браузере, можете смело его себе установить. Немного правда придется переделать код, если нужно будет выводить новости из базы данных, ну на этот вопрос, у нас есть ответ. Оставляйте свои комментарии, кому он потребуется.
Конечно, за оригинал, мы взяли свою верстку и расположение элементов, но это не столь важно, главное чтобы Вы правильно уловили суть и механизм его работы. Кстати, данный функционал можно еще и посмотреть в уроке cоздание JQuery плагина. И еще, при его создании была использована библиотека JQuery.
Первая часть. HTML.
Сразу все начнем делать по-порядку и по стандарту. Сначала подключим все необходимые нам стили css и файлы js. Подключаем файл demo.css, в котором будут использованы все наши стили.
<link type="text/css" rel="stylesheet" href="css/demo.css">
Теперь подключим библиотеку JQuery, а точнее быть файл jquery-1.11.1.min.js и сам скрипт, который будет выполнять работу карусели новостей, файл carusel.js.
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/carusel.js"></script>
Далее нам потребуется создать папку img, в которой будем хранить картинки от новостей. Я по-своему усмотрению взял три новости, поэтому в папку img закину три картинки. Теперь начнем с разработки самого кода HTML, который будет выводить наши новости.
И так, для начала нам нужно будет с помощью скрипта js и свойств css вывести динамическую картинку, в зависимости от того, какая сейчас новость отображается, поэтому прописываем.
<div class="newsimgpreview"></div>
Далее, создаем каркас для общего блока новостей и в нем выводим список новостей по-порядку. Пожалуй, самый интересный момент в этом коде, так это как прописываются ссылки для картинки. Обратите на это внимание, что они идут без тега img src, который по идее должен быть. Но за счет скрипта carusel.js, данный тег просто подставляется в данный код. Ну и для полной картины, выводим весь HTML код сразу.
<div class="newsimgpreview"></div> <div class="newscarusel"> <div> <a class="newstitle" href="#">Первая новость</a> <span class="newstext">Вы узнаете много нового, что находится в первой новости</span> <span class='newsimg'>img/1.jpg</span> <hr> </div> <div> <a class="newstitle" href="#">Вторая новость</a> <span class="newstext">Переходите на вторую новость, может что-то и там Вам придется по вкусу</span> <span class='newsimg'>img/2.jpg</span> <hr> </div> <div> <a class="newstitle" href="#">Третья новость</a> <span class="newstext">Имеется много материала и в третьей новости</span> <span class='newsimg'>img/3.jpg</span> <hr> </div> </div>
Вторая часть. CSS.
Переходим к стилям и тут стоит учесть, что многие из данных свойств, просто обязательны для нормальной работы скрипта! К примеру, такие параметры как класс newsimg и его свойство display:none;, которое скрывает путь к картинке, а вернее путь текста картинки.
По умолчанию, задаем ширину и высоту картинки равную 200 пикселей.
.newscarusel{
padding:10px;
width:50%;
}
.newscarusel hr{
background:#E9E9E9;
height:1px;
border:none;
margin:5px 0;
}
.newscarusel div{
padding:0 10px;
}
.newstext{
color:#666666;
line-height:1em;
margin-top: 10px;
display:inline-block;
font-size:12px;
}
.newsimg{
display:none;
}
.newsimgpreview{
float:right;
background-repeat:no-repeat;
width: 200px;
height:200px;
}
Третья часть. JQUERY.
Ну, а теперь, пожалуй самое важное! Рассмотрим наш скрипт карусели новостей и попытаемся разобраться в нем. Для начала нам нужно создать три переменные. Первая переменная newsall будет хранить в себе класс newscarusel, с помощью которого блочный элемент div, будет запускать сам цикл карусели. Вторая переменная newsimg будет хранить саму картинку с классом newsimgpreview, которая будет меняться в зависимости от выводимой новости. Третья переменная newsimgepreview хранит в себе массив класса newsimg всех картинок, которые выводятся.
Далее мы прописываем свойства скрипту с классом newsimg: задаем путь к картинке. Создаем переменную i, в которой будем хранить начальный объект массива первой записи. Создавая массив, считываем с помощью функции setInterval, количество времени, отведенного на конкретную новость. В нашем случае, запись переключается динамически через две секунды. При переключении меняется цвет на светло-серый. При переключении массив доходит до последнего элемента и затем возвращается в исходное положение на начальном этапе запуска скрипта. Для нашего примера, было указано три новости и это условие прописывается на двадцатой строке кода.
$(document).ready(function(){
var newsall = $(".newscarusel").find("div");
var newsimg = $(".newsimgpreview");
var newsimgepreview = $(".newsimg:eq(0)");
newsimg.css("background","url("+newsimgepreview.text()+")no-repeat 0 0 / 100% 100%");
var i = 1;
newsall.eq(0).css("background","#f7f7f7");
setInterval (function(){
if(i == 0){
newsall.eq(-1).css("background","#ffffff");
}
if(i > 0){
var one = i - 1;
}
var newsimge = $(".newsimg:eq("+ i +")");
newsall.eq(one).css("background","#ffffff");
newsall.eq(i).css("background","#f7f7f7");
newsimg.css("background","url("+newsimge.text()+")no-repeat 0 0 / 100% 100%");
i++
if(i == 3){
i = 0;
}
}, 2000);
});
В принципе, это все чем я хотел поделиться, ну просматривая старые материалы, обнаружил, что имеется еще один материал на тему стильный слайдер на JQuery, где был представлен похожий скрипт, который переключает записи динамически. Правда отличия данного скрипта все-таки имеются, но все же суть очень близка. На этом все, спасибо всем за внимание!