1 Востаннє редагувалося Betterthanyou (10.11.2014 21:12:04)

Тема: Як зробити плавний передох між зображеннями

Я хотів зробити щось таке як у http://comfy.ua/ щоб зображення змінювались (автоматично мені так і не вдалось це зробить) але виникла проблема при зміні зображення йде неприємне миготіння як зробить так щоб його усунути (малюнки і css я не добавляв бо і без них видно це миготіння) 

<!DOCTYPE HTML>
<html>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css\style.css"/>
<head>
<title>Весільне агенство</title>
</head>
<body !background="img\fon.jpg">
<div>
<p class="text_top">Весільне агенство</p>
    <div id="ID_img_center" class="img_center">
    </div>
     </div>
     <div class="menu"><a href="">Замовити наші послуги</a></div>
     <br/>
     <div class="menu"><a href="">Які ми надаємо послуги</a></div>
</div>

<FORM class="img_center">
<INPUT TYPE="BUTTON" VALUE ="Назад" ONCLICK="App(this.form,true);">
<INPUT TYPE="BUTTON" VALUE ="Вперед" ONCLICK="App(this.form,false);">
</FORM>

<br/><br/><p align='center'>
Автор веб-сайту Олександр,<br />студент 33-П групи,<br />веб сайт використовує JavaScript і CSS
</p>


<script>
var htmlKod = ["<img src=\"img\\center","1",".jpg\" width=\"100%\" height=\"500px\" align=\"left\"/><div class=\"img_description\">","","</div>"];
var myImg = document.getElementById('ID_img_center');
var Myrandom=(Math.round(Math.random()*5));
Myrandom==0 ? Myrandom=4:Myrandom;
htmlKod[1]=Myrandom;
//htmlKod[3]="";//!!!
myImg.innerHTML=(htmlKod[0]+htmlKod[1]+htmlKod[2]+htmlKod[3]+htmlKod[4]);
function App(form,bool)
{
    if(bool==false)
    {Myrandom!=5 ? Myrandom++ : Myrandom=1;}
    else
    {Myrandom!=1 ? Myrandom-- : Myrandom=5;}
    htmlKod[1]=Myrandom;
    myImg.innerHTML=(htmlKod[0]+htmlKod[1]+htmlKod[2]+htmlKod[3]+htmlKod[4]);
}
</script>
</body>
</html>

2 Востаннє редагувалося VTrim (10.11.2014 21:28:30)

Re: Як зробити плавний передох між зображеннями

Вам потрібна проста автоматична зміна зображень в одному місці чи карусель?

Якщо плавна зміна зображень по черзі (на одному місці,то..

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
<style type="text/css">
img{
  width: 300px;
  height: 200px;
  }
</style>
</head>

<body>
<div id="header"  class="div">
 <img src="http://wap.unsveta.com/images/2163cy320x480.jpg" id="img_1"  style="position:absolute; "  />
 <img src="http://img0.liveinternet.ru/images/attach/b/3/14/277/14277320_lotos4.jpg" id="img_2"  style="position:absolute;opacity: 0; filter: alpha(opacity=0); "  />
 <img src="http://www.corporacia.ru/_data/content/0000593/corporacia.ru.000035.jpg" id="img_3"  style="position:absolute;opacity: 0; filter: alpha(opacity=0); "  />
 <img src="http://img.galya.ru/galya.ru/Pictures2/ttp/2009/06/06/1294186.jpg" id="img_4"  style="position:absolute;opacity: 0; filter: alpha(opacity=0); " />
 <img src="http://i032.radikal.ru/0712/f1/9e278e7f8393.jpg" id="img_5"  style="position:absolute;opacity: 0; filter: alpha(opacity=0); "  />
</div>
<script type="text/javascript">
 var image_count = 5; //кількість картинок
 var interval = 5000; //пауза
 var time_out = 15; //швидкість зміни картинки
 var i = 5;
 var timeout;
 var opacity = 100;
 function change_image() {
 opacity--;
 var j = i + 1;
 var current_image = 'img_' + i;
 if (i == image_count) j = 1;
 var next_image = 'img_' + j;
 document.getElementById(current_image).style.opacity=opacity/100;
 document.getElementById(current_image).style.filter='alpha(opacity='+opacity+')';
 document.getElementById(next_image).style.opacity= (100-opacity)/100;
 document.getElementById(next_image).style.filter=' alpha(opacity='+(100-opacity)+')';
 timeout = setTimeout("change_image()", time_out);
if (opacity==1) {
 opacity = 100;
 clearTimeout(timeout);
i++;
if (i>image_count) i=1;
timeout = setTimeout("change_image()", interval);
 }
 }
change_image()
</script>

</body>

</html>
Подякували: Betterthanyou1

3 Востаннє редагувалося Betterthanyou (10.11.2014 21:36:08)

Re: Як зробити плавний передох між зображеннями

VTrim мені потрібна автоматична зміна зображень + зміна зображення при нажаті клавіш вперед назад
Ось мій сайт https://www.dropbox.com/s/c4uci3g3a2gjv … 6.rar?dl=0

4 Востаннє редагувалося VTrim (10.11.2014 21:40:28)

Re: Як зробити плавний передох між зображеннями

Betterthanyou написав:

VTrim мені потрібна автоматична зміна зображень + зміна зображення при нажаті клавіш вперед назад
Ось мій сайт https://www.dropbox.com/s/c4uci3g3a2gjv … 6.rar?dl=0

Тоді не варто велосипедити,вам сюди.

http://nordev.ru/articles/article/55

Або вбийте в гуглі "карусели на jQuery"

5

Re: Як зробити плавний передох між зображеннями

VTrim написав:

Або вбийте в гуглі "карусели на jQuery"

Це завдання мені задали в навчальному закладі і його потрібно виконати на JavaScript