Блог по программированию

Javascript урок 2. Создание простого слайдера.

Написано

admin

в

  1. <style>
  2. .slider
  3. {
  4. position:absolute;
  5. top:0;
  6. left:0;
  7. width:100%;
  8. }
  9. </style>
  11. <img src='1.jpg' class='slider' id='img1' onclick="hide('img1','img2',1)">
  12. <img src='2.jpg' class='slider' id='img2' onclick="hide('img2','img3',1)">
  13. <img src='3.jpg' class='slider' id='img3' onclick="hide('img3','img4',1)">
  14. <img src='4.jpg' class='slider' id='img4' onclick="hide('img4','img5',1)">
  15. <img src='5.jpg' class='slider' id='img5' onclick="hide('img5','img1',1)">
  16. <script>
  17. function hide(name,name1,opacity)// скрываем картинку name и показываем name1
  18. {
  19. myimg=document.getElementById(name);// получаем объект картики по id name
  20. myimg1=document.getElementById(name1);// получаем объект картики по id name1
  22. if(opacity==1)//если прозрачность =1 то мы отображаем второй слайд.
  23. myimg1.style.display='block';
  24. myimg.style.opacity=opacity;// меняем прозрачность
  25. myimg1.style.opacity=1-opacity;//меняем прозрачность
  26. if(opacity-.01>=0)// пока прозрачность больше нуля
  27. setTimeout(function(){hide(name,name1,opacity-0.01)}, 10);//изменяем прозрачность
  28. else
  29. {
  30. myimg.style.display='none';//скрываем невидимую картинку
  31. }
  32. }
  33. sliden=4;
  34. function slide()
  35. {
  36. if(sliden==1)// если надо скрыть слайд 1 и показать слайд 2
  37. {
  38. hide('img1','img2',1);// скрывает вторую картинку и показывает первую
  39. sliden=2;// меняем номер слайда чтобы в следующий раз скрыть другой слайд
  40. return;//выходим из функции чтобы не выполнялись остальыне условия
  41. }
  42. if(sliden==2)
  43. {
  44. hide('img2','img3',1);
  45. sliden=3;
  46. return;
  47. }
  48. if(sliden==3)
  49. {
  50. hide('img3','img4',1);
  51. sliden=4;
  52. return;
  53. }
  54. if(sliden==4)
  55. {
  56. hide('img4','img5',1);
  57. sliden=5;
  58. return;
  59. }
  60. if(sliden==5)
  61. {
  62. hide('img5','img1',1);
  63. sliden=1;
  64. return;
  65. }
  66. }
  68. setInterval(slide,4000);// функция смены слайда будет выполняться каждые 4и секунды.
  69. </script>
<style>
.slider
{
position:absolute;
top:0;
left:0;
width:100%;
}
</style>

<img src='1.jpg' class='slider' id='img1' onclick="hide('img1','img2',1)">
<img src='2.jpg' class='slider' id='img2' onclick="hide('img2','img3',1)">
<img src='3.jpg'  class='slider' id='img3' onclick="hide('img3','img4',1)">
<img src='4.jpg' class='slider' id='img4' onclick="hide('img4','img5',1)">
<img src='5.jpg' class='slider' id='img5' onclick="hide('img5','img1',1)">
<script>
function hide(name,name1,opacity)// скрываем картинку name и показываем name1
{
myimg=document.getElementById(name);// получаем объект картики по id name
myimg1=document.getElementById(name1);// получаем объект картики по id name1

if(opacity==1)//если прозрачность =1 то мы отображаем второй слайд.
  myimg1.style.display='block';
myimg.style.opacity=opacity;// меняем прозрачность
myimg1.style.opacity=1-opacity;//меняем прозрачность
if(opacity-.01>=0)// пока прозрачность больше нуля
  setTimeout(function(){hide(name,name1,opacity-0.01)}, 10);//изменяем прозрачность
else
  {
  myimg.style.display='none';//скрываем невидимую картинку
  }
}
sliden=4;
function slide()
{
if(sliden==1)// если надо скрыть слайд 1 и показать слайд 2
  {
  hide('img1','img2',1);// скрывает вторую картинку и показывает первую
  sliden=2;// меняем номер слайда чтобы в следующий раз скрыть другой слайд
  return;//выходим из функции чтобы не выполнялись остальыне условия
  }
if(sliden==2)
  {
  hide('img2','img3',1);
  sliden=3;
  return;
  }
if(sliden==3)
  {
  hide('img3','img4',1);
  sliden=4;
  return;
  }
if(sliden==4)
  {
  hide('img4','img5',1);
  sliden=5;
  return;
  }
if(sliden==5)
  {
  hide('img5','img1',1);
  sliden=1;
  return;
  }
}

setInterval(slide,4000);// функция смены слайда будет выполняться каждые 4и секунды.
</script>

Вариант №2.

СОБЫТИЯ

window.onload, Событие происходит, когда объект был загружен, чаще всего используется в элементе <Body>, чтобы выполнить скрипт, как только веб-страница полностью загружена.

setInterval () Метод, вызывает функцию или вычисляет выражение через определенные промежутки времени.

OnClick событие, выполнение JavaScript при щелчке по кнопке.

КОД

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Урок 6. Пример объектно-ориентированного подхода.</title>
  5. <meta charset="utf-8">
  6. </head>
  7. <style>
  8. #main {
  9. position:relative;
  10. margin: 100px auto;
  11. padding: 5px;
  12. width: 660px;
  13. height:360px;
  14. background-color: silver;
  15. border: 5px solid grey;
  16. border-radius:15px;
  17. }
  18. #scr {
  19. margin:20px auto;
  20. width: 600px;
  21. height: 320px;
  22. margin-top:20px;
  23. background-color: white;
  24. background-size:cover;
  25. border: 2px solid black;
  26. border-radius:10px;
  27. }
  28. button {
  29. position: absolute;
  30. top: 150px;
  31. width: 25px;
  32. height: 70px;
  33. font: 12pt arial,tahoma,sans-serif;
  34. text-align: center;
  35. }
  36. .left {
  37. left:5px;
  38. }
  39. .right {
  40. right:5px;
  41. }
  42. </style>
  43. <script>
  44. var slider = {
  45. slides:['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'],
  46. frame:0, // текущий кадр для отбражения - индекс картинки из массива
  47. set: function(image) { // установка нужного фона слайдеру
  48. document.getElementById("scr").style.backgroundImage = "url("+image+")";
  49. },
  50. init: function() { // запуск слайдера с картинкой с нулевым индексом
  51. this.set(this.slides[this.frame]);
  52. },
  53. left: function() { // крутим на один кадр влево
  54. this.frame--;
  55. if(this.frame < 0) this.frame = this.slides.length-1;
  56. this.set(this.slides[this.frame]);
  57. },
  58. right: function() { // крутим на один кадр вправо
  59. this.frame++;
  60. if(this.frame == this.slides.length) this.frame = 0;
  61. this.set(this.slides[this.frame]);
  62. }
  63. };
  64. window.onload = function() { // запуск слайдера после загрузки документа
  65. slider.init();
  66. setInterval(function() { // ставим пятисекундный интервал для перелистывания картинок
  67. slider.right();
  68. },5000);
  69. };
  70. </script>
  71. <body>
  72. <div id="main">
  73. <button class="left" onclick="slider.left();"><</button>
  74. <div id="scr"></div>
  75. <button class="right" onclick="slider.right();">></button>
  76. </div>
  77. </body>
  78. </html>
<!DOCTYPE html>
<html>
<head>
  <title>Урок 6. Пример объектно-ориентированного подхода.</title>
  <meta charset="utf-8">
</head>
<style>
#main {
  position:relative;
  margin: 100px auto;
  padding: 5px;
  width: 660px;
  height:360px;
  background-color: silver;
  border: 5px solid grey;
  border-radius:15px;
}
#scr {
  margin:20px auto;
  width: 600px;
  height: 320px;
  margin-top:20px;
  background-color: white;
  background-size:cover;
  border: 2px solid black;
  border-radius:10px;
}
button {
  position: absolute;
  top: 150px;
  width: 25px;
  height: 70px;
  font: 12pt arial,tahoma,sans-serif;
  text-align: center;
}
.left {
  left:5px;
}
.right {
  right:5px;
}
</style>
<script>
var slider = {
  slides:['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'],
  frame:0, // текущий кадр для отбражения - индекс картинки из массива
  set: function(image) { // установка нужного фона слайдеру
    document.getElementById("scr").style.backgroundImage = "url("+image+")";
  },
  init: function() { // запуск слайдера с картинкой с нулевым индексом
    this.set(this.slides[this.frame]);
  },
  left: function() { // крутим на один кадр влево
    this.frame--;
    if(this.frame < 0) this.frame = this.slides.length-1;
    this.set(this.slides[this.frame]);
  },
  right: function() { // крутим на один кадр вправо
    this.frame++;
    if(this.frame == this.slides.length) this.frame = 0;
    this.set(this.slides[this.frame]);		
  }
};
window.onload = function() { // запуск слайдера после загрузки документа
  slider.init();
  setInterval(function() { // ставим пятисекундный интервал для перелистывания картинок
    slider.right();
  },5000);
};
</script>
<body>
<div id="main">
  <button class="left" onclick="slider.left();"><</button>
  <div id="scr"></div>
  <button class="right" onclick="slider.right();">></button>
</div>	
</body>
</html>

 

Больше записей