zoobic

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

код получился громоздким :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

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

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="">
<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

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

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

Share this post


Link to post
Share on other sites

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

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

12

#img21

#img22

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

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="">
<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

строчку

$('#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

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,340
    Total Members
    3,128
    Most Online
    Someone
    Newest Member
    Someone
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.