Jump to content
  • Sign Up
zoobic

4 в ряд меняющиеся картинки в шапке сайта

Recommended Posts

zoobic

Помогите! надо в шапке сайта расположить 4 картинки, которые будут при этом постоянно меняться(в каждой картинке 4 варианта (того 16 картинок в папке) хотелось бы чтоб менялись рандомом. Перепробовала кучу скриптов, либо не работают, либо картинки сбиваются влево. Таблицей их тоже дисциплинировать не получилось. подскажите нормальный рабочий скрипт в html

Share this post


Link to post
Share on other sites
Switch74

могу предложить такой вариант, но не понятно как именно рандомно должны меняться картинки и как меняться

код получился громоздким :unsure:


<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0px;padding:0px;}
ul{list-style-type:none;}
/*размеры можете указать свои изменив везде width и height*/
#slider4{width:800px;height:100px;margin:0px auto;}
#slider4>div
{
float:left;
position:relative;
width:200px;
height:100px;
overflow:hidden;
}
#slider4>div>ul
{
display:block;
position:absolute;
width:800px;
height:100px;
}
#slider4>div>ul>li
{
display:block;
float:left;
width:200px;
height:100px;
}
/*
эти стили можно удалить и id у li и вставить в них <img> с нужными картинками
или указать в background url()
*/
#img11{background:#f0f;}
#img12{background:#b0b;}
#img13{background:#808;}
#img14{background:#404;}

#img21{background:#ff0;}
#img22{background:#bb0;}
#img23{background:#880;}
#img24{background:#440;}

#img31{background:#0f0;}
#img32{background:#0b0;}
#img33{background:#080;}
#img34{background:#040;}

#img41{background:#00f;}
#img42{background:#00b;}
#img43{background:#008;}
#img44{background:#004;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
window.setInterval(function()
{
$('#slider4').children('div').each(function(n,element)
{
var obj = $(element).children('ul');
var obj_width = $(obj).width()/4
var rnd = Math.floor(Math.random()*(4-1+1))+1;
$(obj).animate({'left':'-'+((rnd-1)*obj_width)+'px'});
});
},5000);
});
</script>
</head>
<body>
<div id="slider4">
<div>
<ul>
<li id="img11"></li>
<li id="img12"></li>
<li id="img13"></li>
<li id="img14"></li>
</ul>
</div>
<div>
<ul>
<li id="img21"></li>
<li id="img22"></li>
<li id="img23"></li>
<li id="img24"></li>
</ul>
</div>
<div>
<ul>
<li id="img31"></li>
<li id="img32"></li>
<li id="img33"></li>
<li id="img34"></li>
</ul>
</div>
<div>
<ul>
<li id="img41"></li>
<li id="img42"></li>
<li id="img43"></li>
<li id="img44"></li>
</ul>
</div>
</div>
</body>
</html>

Edited by Switch74

Share this post


Link to post
Share on other sites
zoobic

Спасибо, все работает, правда не совсем так хотелось бы. Надо чтобы в ряд стояли 4 картинки и в каждой из них изображение плавно менялось(исчезало старое, появлялось новое). т.е. место расположения картинок было статичным

Share this post


Link to post
Share on other sites
Switch74

ну вот и надо было это сразу оговорить:)


<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0px;padding:0px;}
img{border:0px;}

#slider4{width:800px;height:100px;margin:0px auto;}
#slider4>div
{
float:left;
position:relative;
width:200px;
height:100px;
overflow:hidden;
}
#slider4>div>img
{
position:absolute;
top:0px;
left:0px;
width:200px;
height:100px;
}

#img11{background:#f0f;}
#img12{background:#b0b;}
#img13{background:#808;}
#img14{background:#404;}

#img21{background:#ff0;}
#img22{background:#bb0;}
#img23{background:#880;}
#img24{background:#440;}

#img31{background:#0f0;}
#img32{background:#0b0;}
#img33{background:#080;}
#img34{background:#040;}

#img41{background:#00f;}
#img42{background:#00b;}
#img43{background:#008;}
#img44{background:#004;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$('#slider4').children('div').each(function(n_div,div)
{

$(div).children('img').each(function(n_img,img)
{
if(n_img) $(img).css({'opacity':'0.0'});
else
{
$(div).attr({'value':(n_img+1)});
$(img).css({'opacity':'1.0'});
}
});
});
window.setInterval(function()
{
$('#slider4').children('div').each(function(n,element)
{
var img = $(element).attr('value');
var rnd = Math.floor(Math.random()*(4-1+1))+1;
if(img != rnd)
{
$(element).attr({'value':rnd});
$(element).children('#img'+(n+1)+img).animate({'opacity':'0.0'});
$(element).children('#img'+(n+1)+rnd).animate({'opacity':'1.0'});
}
});
},5000);
});
</script>
</head>
<body>
<div id="slider4">
<div>
<img id="img11" src="">
<img id="img12" src="">
<img id="img13" src="">
<img id="img14" src="">
</div>
<div>
<img id="img21" src="">
<img id="img22" src="">
<img id="img23" src="">
<img id="img24" src="">
</div>
<div>
<img id="img31" src="">
<img id="img32" src="">
<img id="img33" src="">
<img id="img34" src="">
</div>
<div>
<img id="img41" src="">
<img id="img42" src="">
<img id="img43" src="">
<img id="img44" src="">
</div>
</div>
</body>
</html>

Edited by Switch74

Share this post


Link to post
Share on other sites
Switch74

Спасибо, все работает, правда не совсем так хотелось бы. Надо чтобы в ряд стояли 4 картинки и в каждой из них изображение плавно менялось(исчезало старое, появлялось новое). т.е. место расположения картинок было статичным

вы просили, чтобы не двигалось - определитесь

Share this post


Link to post
Share on other sites
Switch74

если вы просто скопировали код с сайта и не отформатировали его, то работать не будет из-за ошибки js, форум вставил несколько лишних переносов строк

вот так должен выглядеть этот отрезок кода, исправьте и все заработает


if(img != rnd)
{
$(element).attr({'value':rnd});
$(element).children('#img'+(n+1)+img).animate({'opacity':'0.0'});
$(element).children('#img'+(n+1)+rnd).animate({'opacity':'1.0'});
}

Share this post


Link to post
Share on other sites
zoobic

теперь появилось окно следующего содержания:

12

#img21

#img22

не давать этой странице создавать дополнительные диалоговые окна

Share this post


Link to post
Share on other sites
Switch74

если скопировать этот код он должен работать


<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0px;padding:0px;}
img{border:0px;}

#slider4{width:800px;height:100px;margin:0px auto;}
#slider4>div
{
float:left;
position:relative;
width:200px;
height:100px;
overflow:hidden;
}
#slider4>div>img
{
position:absolute;
top:0px;
left:0px;
width:200px;
height:100px;
}

#img11{background:#f0f;}
#img12{background:#b0b;}
#img13{background:#808;}
#img14{background:#404;}

#img21{background:#ff0;}
#img22{background:#bb0;}
#img23{background:#880;}
#img24{background:#440;}

#img31{background:#0f0;}
#img32{background:#0b0;}
#img33{background:#080;}
#img34{background:#040;}

#img41{background:#00f;}
#img42{background:#00b;}
#img43{background:#008;}
#img44{background:#004;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$('#slider4').children('div').each(function(n_div,div)
{
$(div).children('img').each(function(n_img,img)
{
if(n_img) $(img).css({'opacity':'0.0'});
else
{
$(div).attr({'value':(n_img+1)});
$(img).css({'opacity':'1.0'});
}
});
});
window.setInterval(function()
{
$('#slider4').children('div').each(function(n,element)
{
var img = $(element).attr('value');
var rnd = Math.floor(Math.random()*(4-1+1))+1;
if(img != rnd)
{
$(element).attr({'value':rnd});
$(element).children('#img'+(n+1)+img).animate(
{'opacity':'0.0'});
$(element).children('#img'+(n+1)+rnd).animate(
{'opacity':'1.0'});
}
});
},5000);
});
</script>
</head>
<body>
<div id="slider4">
<div>
<img id="img11" src="">
<img id="img12" src="">
<img id="img13" src="">
<img id="img14" src="">
</div>
<div>
<img id="img21" src="">
<img id="img22" src="">
<img id="img23" src="">
<img id="img24" src="">
</div>
<div>
<img id="img31" src="">
<img id="img32" src="">
<img id="img33" src="">
<img id="img34" src="">
</div>
<div>
<img id="img41" src="">
<img id="img42" src="">
<img id="img43" src="">
<img id="img44" src="">
</div>
</div>
</body>
</html>

Edited by Switch74

Share this post


Link to post
Share on other sites
анюта

если скопировать этот код он должен работать

<!DOCTYPE html><html><head>        <style>*{margin:0px;padding:0px;}img{border:0px;}#slider4{width:800px;height:100px;margin:0px auto;}#slider4>div{        float:left;        position:relative;        width:200px;        height:100px;        overflow:hidden;}#slider4>div>img{        position:absolute;        top:0px;        left:0px;        width:200px;        height:100px;}#img11{background:#f0f;}#img12{background:#b0b;}#img13{background:#808;}#img14{background:#404;}#img21{background:#ff0;}#img22{background:#bb0;}#img23{background:#880;}#img24{background:#440;}#img31{background:#0f0;}#img32{background:#0b0;}#img33{background:#080;}#img34{background:#040;}#img41{background:#00f;}#img42{background:#00b;}#img43{background:#008;}#img44{background:#004;}        </style>        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>        <script>$(document).ready(function(){$('#slider4').children('div').each(function(n_div,div){$(div).children('img').each(function(n_img,img){if(n_img) $(img).css({'opacity':'0.0'});else{$(div).attr({'value':(n_img+1)});$(img).css({'opacity':'1.0'});}});});window.setInterval(function(){$('#slider4').children('div').each(function(n,element){var img = $(element).attr('value');var rnd = Math.floor(Math.random()*(4-1+1))+1;if(img != rnd){$(element).attr({'value':rnd});$(element).children('#img'+(n+1)+img).animate({'opacity':'0.0'});$(element).children('#img'+(n+1)+rnd).animate({'opacity':'1.0'});}});},5000);});        </script></head><body>        <div id="slider4">                <div>                        <img id="img11" src="http://site.ru/banners/bla-bla1.jpg">                        <img id="img12" src="http://site.ru/banners/bla-bla2.jpg">                        <img id="img13" src="http://site.ru/banners/bla-bla3.jpg">                        <img id="img14" src="http://site.ru/banners/bla-bla4.jpg">                </div>                <div>                        <img id="img21" src="http://site.ru/banners/bla-bla5.jpg">                        <img id="img22" src="http://site.ru/banners/bla-bla6.jpg">                        <img id="img23" src="http://site.ru/banners/bla-bla7.jpg">                        <img id="img24" src="http://site.ru/banners/bla-bla8.jpg">                </div>                <div>                        <img id="img31" src="http://site.ru/banners/bla-bla9.jpg">                        <img id="img32" src="http://site.ru/banners/bla-bla10.jpg">                        <img id="img33" src="http://site.ru/banners/bla-bla11.jpg">                        <img id="img34" src="http://site.ru/banners/bla-bla12.jpg">                </div>                <div>                        <img id="img41" src="http://site.ru/banners/bla-bla13.jpg">                        <img id="img42" src="http://site.ru/banners/bla-bla14.jpg">                        <img id="img43" src="http://site.ru/banners/bla-bla15.jpg">                        <img id="img44" src="http://site.ru/banners/bla-bla16.jpg">                </div>        </div></body></html>

здравствуйте форумчане!

Спасите девушку, подскажите как сделать эти баннеры кликабельными? Уже не знаю за что зацепиться два дня голову ломаю,

всё перепробовала ничего не получается

Share this post


Link to post
Share on other sites
анюта

aaaaaa... Неужели никто не поможет? Отзовитесь люди добрые.

Как же этот код переделать чтобы баннеры стали кликабельными :unsure:

Share this post


Link to post
Share on other sites
Switch74

строчку

$('#slider4').children('div').each(function(n,element)

меняем на

$('#slider4').children('div').children('a').each(function(n,element)

в стилях

#slider4>div>img

на

#slider4>div>a>img

в верстке каждую группу <img> вкладываем в <a> с нужной ссылокой

или тупо заменить <div> в которых лежат <img> на <a> естесно с соответствующим изменением в коде

Share this post


Link to post
Share on other sites
анюта

Благодарю, что откликнулись :wub: 
Извините меня за мою глупость, но не поняла ваши последнии строчки.
Что то не получается, сделала замены в коде и заменила все блоки таким образом:

<div>           <a href="http://site.ru/?partner=10424"><img id="img11" src="http://site.ru/banners/bla-bla1.jpg"></a>          <a href="http://site.ru/?partner=15614"><img id="img12" src="http://site.ru/banners/bla-bla2.jpg"></a>          <a href="http://site.ru/?partner=4856"><img id="img13" src="http://site.ru/banners/bla-bla3.jpg"></a>          <a href="http://site.ru/?partner=74682"><img id="img14" src="http://site.ru/banners/bla-bla4.jpg"></a></div>

Поправьте меня если не затруднит, где я начудила

Почему то не меняются картинки

 

Edited by анюта

Share this post


Link to post
Share on other sites
Switch74

если вам нужно, чтобы каждая картинка имела свою ссылку, а не блок сменяющихся, то

ID с <img> переносим на <a>

в стилях меняем

#slider4>div>img{        width:200px;        height:100px;}#slider4>div>img>a{display:block;        position:absolute;        top:0px;        left:0px;        width:200px;        height:100px;}
и скрипт

$(document).ready(function(){   $('#slider4').children('div').each(function(n_div,div){      $(div).children('a').each(function(n_a,a){         if(n_a) $(a).css({'opacity':'0.0'});         else{            $(div).attr({'value':(n_a+1)});            $(a).css({'opacity':'1.0'});         }      });   });   window.setInterval(function(){      $('#slider4').children('div').each(function(n,element){         var a = $(element).attr('value');         var rnd = Math.floor(Math.random()*(4-1+1))+1;         if(a != rnd){            $(element).attr({'value':rnd});            $(element).children('#img'+(n+1)+a).animate({'opacity':'0.0'});            $(element).children('#img'+(n+1)+rnd).animate({'opacity':'1.0'});         }      });   },5000);});
что-то вроде этого, но лучше бы наверно сделать под ваши нужды

Share this post


Link to post
Share on other sites
darkdas

Помогите пожалуйста. Не получается сделать так что бы при нажатии на картинку делался переход, т.к. либо не перелистываются картинки либо не работает как ссылка. Скиньте полный скрипт, хоть посмотреть наглядно где, что делал не так

Share this post


Link to post
Share on other sites
oleguch

доброе время суток. помогите пожалуйста, не как не получается сделать так что бы при нажатии на картинку делался переход, т.к. либо не перелистываются картинки либо не работает как ссылка. уже пять дней пытаюсь, все перепробывал. 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Member Statistics

    46,896
    Total Members
    1,451
    Most Online
    Neovo
    Newest Member
    Neovo
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Xandr555
      Добрый вечер! Подскажите.. Не работает форма, заполнил поля php mail, некоторые синтаксисы не знаю. Код ниже. Скрипт пробовал в хеде и в выложенной вариации, не идет сообщение. Заранее спасибо. <!DOCTYPE html> <html> <head> <title>index.html</title> <meta charset="utf-8"/> </head> <body> <form class="form-horizontal" target="_blank" method="post" id="form" enctype="multipart/form-data"> <div class="form-group"> <label class="col-sm-2 control-label">Ф.И.О.:</label> <div class="col-sm-10"> <input class="form-control" type="text" name="name" placeholder="Имя" required /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Телефон:</label> <div class="col-sm-10"> <input class="form-control" type="text" name="number" pattern="^[0-9]{11}$" placeholder="Телефон" required /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Эл. почта:</label> <div class="col-sm-10"> <input class="form-control" type="email" name="email" placeholder="E-mail" required /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <textarea class="form-control" rows="3" name="message" placeholder="Ваше сообщение" required></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button class="btn btn-default">Отправить</button> <label class="sucsses">СООБЩЕНИЕ ОТПРАВЛЕНО</label> </div> </div> </form> <script> $("#form").submit(function() { $.ajax({ type: "POST", url: "http://mysite.ru/mail9.php", data: $(this).serialize() }).done(function() { $(this).find("input").val(""); $(".sucsses").fadeIn("1500"); setTimeout(function() { $(".sucsses").fadeOut("1500"); }, 2500); $("#form").trigger("reset"); }); return false; }); </script> </body> </html> <!DOCTYPE html> <html> <head> <title>mail9</title> <meta charset="utf-8"/> </head> <body> <?php $recepient = "[email protected]"; $name = trim($_POST["name"]); $number = trim($_POST["number"]); $email = trim($_POST["email"]); $message = trim($_POST["message"]); $message = "Имя: $name \nТелефон: $number \nЕmail: $email \nСообщение: $message"; $headers = 'Content-type: text/plain; charset="utf-8"'; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "From: [email protected]\r\n"; $headers .= "Reply-To: [email protected]\r\n"; $pagetitle = "Сообщение с АЛЬЯНС-сайта"; mail($recepient, $pagetitle, $message, $headers); ?> </body> </html>  
    • Awilum
      Дорогие Друзья! Рад вам сообщить о выходе новой версии движка Flextype 0.9.9! В Flextype 0.9.9 достаточно много важных изменений определяющих — то как будет выглядеть финальная версия Flextype 1.0.0, к которой я иду уже более двух лет! Были пересмотрены, обновлены и переписаны ключевые моменты ядра, ответственные за работу с Записями, Коллекциями, Кешем и Rest API. Подробнее в статье: https://vk.com/@flextype-flextype-099-reliz Большое спасибо всем за то, что вы являетесь частью сообщества Flextype!
    • DevCube
      Привет! Меня зовут Евгения и я ищу талантливых программистов в компанию DevCube. https://mydevcube.com/ Это международная компания, которая занимается DevOps, web и software разработками. На данный момент в команду требуются Full stack .NET (Junior & Senior) — 3+ year of commercial experience; — Strong knowledge of Angular 5+; — Strong knowledge of Typescript; — Experience with HTML/HTML5, CSS/CSS3, SCSS; — Good understanding of Git; — Conversational English. Будет плюсом: VB experience Условия: Удаленная работа full-time Зарплата от 10-20$/час по результатам собеседования. Обязательное условие - быть на связи до 21-22:00 по Москве. Для отклика прошу писать на почту: [email protected]
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...