|
|
04.05.2017, 09:32
|
|
Новичок на форуме
|
|
Регистрация: 04.05.2017
Сообщений: 5
|
|
|
Помогите с ротатором банеров
Ситуация такая есть js код для прокручивания баннеров если ставлю один блок с баннерами все работает как часы, а если два то второй блок пропадает после первого баннера, пробовал в index.html подгрузить баннеры через javascript страницей html в разные блоки, начинают вываливаться по нескольку баннерных картинок. Собственно мне и нужно в index.html баннеры брать с другой страницы. Вот как бы сам код, помогите разобраться в чем проблема:
|
Код:
|
<html>
<head>
<title></title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// получаем массив блоков с нужными нам изображени¤ми
var banners = $("#adBanner00 div").toArray();
// класс с параметрами
settings = function() {
this.banners = banners; // массив блоков с изображени¤ми
this.sum = this.banners.length; // количество блоков с изображени¤ми
this.timeIn = 1000; // врем¤ дл¤ по¤влени¤
this.timeOut = 1000; // врем¤ дл¤ скрыти¤
this.timeView= 2000; // тайм-аут дл¤ показа
}
var obj = new settings();
if (obj.sum < 1) {
$("#adBanner00").html("<p>DO NOT IMAGES</p>");
}
else {
// скрываем все изображени¤ блока #adBanner00
$("#adBanner00 div").css({
"display":"none"
});
// создаем блок дл¤ показа с индикатором загрузки дл¤ эффектного начала
$("#adBanner00").prepend("<div id='adBanner00_view'></div>");
// запускаем функцию показа
view (0);
}
function view (num){
// инициализируем экземпл¤р класса settings()
var obj = new settings();
// если показали все изображени¤, показываем их снова
if (num >= obj.sum) num = 0;
var interval = setInterval (function(){
// очистка блока показа
$("#adBanner00_view *").remove();
// копи¤ изображени¤ в блок показа
$(obj.banners[num]).clone().prependTo("#adBanner00_view");
// показ изображени¤
$("#adBanner00_view div").fadeIn(obj.timeIn);
clearInterval(interval);
num++;
},obj.timeIn);
// скрытие изображени¤
$("#adBanner00_view div").fadeOut(obj.timeOut);
// снова запускаем сами себ¤ если изображений больше одного
if (obj.sum > 1) setTimeout(function(){view(num)},obj.timeIn+obj.timeOut+obj.timeView);
}
});
</script>
<script type="text/javascript">
$(document).ready(function(){
// получаем массив блоков с нужными нам изображени¤ми
var banners01 = $("#adBanner01 div").toArray();
// класс с параметрами
settings = function() {
this.banners01 = banners01; // массив блоков с изображени¤ми
this.sum = this.banners01.length; // количество блоков с изображени¤ми
this.timeIn = 1000; // врем¤ дл¤ по¤влени¤
this.timeOut = 1000; // врем¤ дл¤ скрыти¤
this.timeView= 2000; // тайм-аут дл¤ показа
}
var obj = new settings();
if (obj.sum < 1) {
$("#adBanner01").html("<p>DO NOT IMAGES</p>");
}
else {
// скрываем все изображени¤ блока #adBanner01
$("#adBanner01 div").css({
"display":"none"
});
// создаем блок дл¤ показа с индикатором загрузки дл¤ эффектного начала
$("#adBanner01").prepend("<div id='adBanner01_view'></div>");
// запускаем функцию показа
view (0);
}
function view (num){
// инициализируем экземпл¤р класса settings()
var obj = new settings();
// если показали все изображени¤, показываем их снова
if (num >= obj.sum) num = 0;
var interval = setInterval (function(){
// очистка блока показа
$("#adBanner01_view *").remove();
// копи¤ изображени¤ в блок показа
$(obj.banners01[num]).clone().prependTo("#adBanner01_view");
// показ изображени¤
$("#adBanner01_view div").fadeIn(obj.timeIn);
clearInterval(interval);
num++;
},obj.timeIn);
// скрытие изображени¤
$("#adBanner01_view div").fadeOut(obj.timeOut);
// снова запускаем сами себ¤ если изображений больше одного
if (obj.sum > 1) setTimeout(function(){view(num)},obj.timeIn+obj.timeOut+obj.timeView);
}
});
</script>
</head>
<body>
<div id="adBanner01">
<div>
<img src="img/4.jpg" title="4" />
</div>
<div>
<img src="img/5.jpg" title="5" />
</div>
</div>
<div id="adBanner00">
<div>
<img src="img/1.jpg" title="1" />
</div>
<div>
<img src="img/2.jpg" title="2" />
</div>
<div>
<img src="img/3.jpg" title="3" />
</div>
</div>
</body>
</html> |
|
|
04.05.2017, 09:45
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
|
|
|
04.05.2017, 09:55
|
|
Новичок на форуме
|
|
Регистрация: 04.05.2017
Сообщений: 5
|
|
рони Спасибо!!
Если есть еще у кого нибудь мысли буду рад услышать!
Так же хотелось бы узнать где у меня ошибка.
|
|
04.05.2017, 10:03
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
|
Сообщение от Romrius
|
|
Так же хотелось бы узнать где у меня ошибка.
|
если блоков несколько, то нужен цикл по блокам
$(function() {
$(".adBanner").each(function(indx, el){
var banners = $("div", el).toArray();
//....
});
});
|
|
04.05.2017, 10:54
|
|
Новичок на форуме
|
|
Регистрация: 04.05.2017
Сообщений: 5
|
|
рони
Я так понимаю второй js я удаляю за место:
$(document).ready(function(){
var banners = $("#adBanner00 div").toArray();
ставлю:
$(function() {
$(".adBanner").each(function(indx, el){
var banners = $("div", el).toArray();
//....
});
});
и потом просто перечисляю название блоков #adBanner00, #adBanner01 так?
|
|
04.05.2017, 11:13
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
|
Сообщение от Romrius
|
|
перечисляю название блоков
|
присвойте блокам одинаковый класс |
|
04.05.2017, 11:38
|
|
Новичок на форуме
|
|
Регистрация: 04.05.2017
Сообщений: 5
|
|
|
рони Если не сложно можешь дать рабочий js
что то у меня все равно не работает. Просто вывалились все картинки и все.
Последний раз редактировалось Romrius, 04.05.2017 в 12:28.
|
|
04.05.2017, 14:43
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
Romrius,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".banner").each(function(indx, el) {
var banners = $("div", el).toArray();
var settings = function() {
this.banners = banners;
this.sum = this.banners.length;
this.timeIn = 1000;
this.timeOut = 1000;
this.timeView = 2000
};
var obj = new settings;
if (obj.sum < 1) $(el).html("<p>DO NOT IMAGES</p>");
else {
$("div", el).css({
"display": "none"
});
var adBanner = $("<div></div>").prependTo(el),
num = 0;
view()
}
function view() {
$(obj.banners[num]).clone().prependTo(adBanner).fadeIn(obj.timeIn, function() {
$(this).delay(obj.timeView).fadeOut(obj.timeOut,
function() {
$(this).remove();
num = ++num % obj.sum;
view()
})
})
}
})
});
</script>
</head>
<body>
<div class="banner">
<div>
<img src="http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg" title="4" />
</div>
<div>
<img src="http://1.bp.blogspot.com/-aleHkBUuqOI/VY0HrCytsXI/AAAAAAAAq1g/f2emGtdqdWo/s640/2015-06-05_0145.jpg" title="5" />
</div>
</div>
<div class="banner">
<div>
<img src="http://static.mnogonado.net/images/img.php?w=250&l=%2Fstore%2Fimage%2F800x600_qdv_57108c999ba0b1775c4bfe263023fb6a_1474795-404.png" title="1" />
</div>
<div>
<img src="http://rugirlz.com/pics/hv_dp20088034.jpg" title="2" />
</div>
<div>
<img src="https://im1-tub-ru.yandex.net/i?id=34d38102784fbb45657d73def5d2178f-l&n=13" title="3" />
</div>
</div>
</body>
</html>
|
|
04.05.2017, 15:14
|
|
Новичок на форуме
|
|
Регистрация: 04.05.2017
Сообщений: 5
|
|
|
рони еще раз от души, спасибо!
Пойду разбираться, и учить матчасть )))
|
|
|
|
