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

zoobic · March 18, 2012

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

Switch74 · March 19, 2012

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

код получился громоздким :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 March 19, 2012 by Switch74

zoobic · March 19, 2012

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

Switch74 · March 19, 2012

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


<!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 March 19, 2012 by Switch74

zoobic · March 19, 2012

почему-то не двигаются=(

zoobic,

Switch74 · March 19, 2012

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

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

zoobic · March 19, 2012

я имела ввиду не меняются

Switch74 · March 19, 2012

если вы просто скопировали код с сайта и не отформатировали его, то работать не будет из-за ошибки 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'});
}

zoobic · March 19, 2012

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

12

#img21

#img22

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

Switch74 · March 19, 2012

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


<!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 March 19, 2012 by Switch74

zoobic · March 20, 2012

Спасибо огромное приогромное!!!! все чудесно работает!!!!

darkphp · August 15, 2014

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

анюта · January 11, 2015

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

<!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>

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

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

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

анюта · January 11, 2015

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

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

анюта · January 15, 2015

хм, ну может кто нибудь за вебмани поможет?

Switch74 · January 15, 2015

строчку

$('#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> естесно с соответствующим изменением в коде

анюта · January 15, 2015

Благодарю, что откликнулись :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 January 15, 2015 by анюта

анюта · January 16, 2015

Ну прошу помогите пожалуйста, что нужно сделать что бы баннеры стали менятся?

Switch74 · January 16, 2015

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

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);});

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

darkdas · February 21, 2016

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

oleguch · January 20, 2017

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

Sign In

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

Question

Link to comment

Share on other sites

20 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information