Продам

stroka

Блог Людмилы Данило.Приглашаю на бесплатное обучение в школу "Успех в Internet PRO100"! Для всех кто хочет быть успешным! Здесь Вы можете оставить свои отзывы и комментарии.Подписывайтесь на мой блог!

четверг, 1 октября 2015 г.

Kак вставить слайдер из картинок сменяющих друг друга автоматически

                        Здравствуйте друзья!
 Сегодня я вам расскажу как вставить слайдер из картинок сменяющих друг друга автоматически-он может вам послужить и как баннер,реклама (только после того как вы удалите "черный слайдер") ,также при нажатие на цифры сверху 1,2,3,а когда наводите курсор на картинку ,смена картинок приостанавливается,

 Cам скрипт я взяла с интернета с одного сайта(спасибо автору) ,но я его изменила  и добавила функцию (скажем так) ,что при нажатии на любую из трех картинок,вас перекидывает на другие ресурсы.



 И это еще не все, этот виджет (слайдер) отображается только на главной странице ,т.е. при просмотре другого сообщения его не будет видно,такое можно проделать в принципе с любым виджетом -о других мы поговорим потом!Следите за новостями ,оставляйте отзывы,пишите комментарии заранее спасибо!

Kак это выглядит  посмотрите на моих видеоблогах:

http://ludmiladanilovidoblog.blogspot.de/

http://ludmiladanilo3.blogspot.de/

Посмотрите видео урок



Итак ,копируйте скрипт(он большой) ,вместо выделенных красных ссылок вставляете свои ссылки на картинки (они могут быть в Gif.,JPEK)
 Вместо ссылок синим цветом вставляйте  свои ссылки на ваши ресурсы.Зелёным  цветом название картинок .
_________________________________________________________________

<div id="raz">
 <a href="http://ludmiladanilo.blogspot.de/2015/04/moi-gif.html#more" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7khieWvEcAR_aosuAdN6UURWoxao0hyphenhypheneuQZIR6dQZMrxbWkY2pyjqurktFp9a2Cd-_W3HBfDrTZ2selErUhmo865FO3AdXtea2lP78wm5GklPxJkBeWJzXFqtIeSuuSs5JBpAWeqiq56u/s320/piony.gif" alt="georginy"/></a>
  <a href="http://videoblogludmiladanilo.blogspot.de/2015/09/navigation-v-videobloge.html" target="_blank"> <img src="https://lh3.googleusercontent.com/-tS3fn2IagQE/VbnGhgMB2OI/AAAAAAAADcc/_2ov-YtbcYI/w426-h240/tulpany.gif" alt="tulpany" alt="tulpany"/></a>
  <a href="http://videoblogludmiladanilo.blogspot.de/2015/05/smart-art-powerpoint_31.html" target="_blank"> <img src="https://lh3.googleusercontent.com/-UhMWklFFM-8/VaVGnJJLxnI/AAAAAAAADXI/8geFnPwR6Is/w426-h240/romashki.gif" alt="romashki"/></a>
  <div>
    <button type="button" value="0">1</button>
    <button type="button" value="1">2</button>
    <button type="button" value="2">3</button>
  </div>
<style>
#raz {
  position: relative;
  max-width: 100%;
  max-height: 400px;
  overflow: hidden;
}
#raz img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  outline: 300px solid #fff;
}
#raz div {
  position: relative;
  height: 0;
  margin-bottom: 60%;
  z-index: 3;
}
#raz img:nth-of-type(1) {
  z-index: 2;
}
#raz button:nth-of-type(1) {
  opacity: 0.4;
}
</style>
<script>
window.requestAnimationFrame = (function () {
        return window.requestAnimationFrame ||
               function (callback) {
                   return window.setTimeout(callback, 1000 / 60);
               };
})();
function slider(f, img, button, V, Vo) {
  var iii = 0,
      start = null,
      clear = 0;
  function step(time) {
    if (start === null) start = time;
    var progress = time - start;
    if (progress > V) {
      start = null;
      for (var i=0; i<img.length; i++) {
        img[i].style.zIndex = "0";
        button[i].style.opacity = "1";
      }
      img[iii].style.zIndex = "1";
      iii = ((iii != (img.length - 1)) ? (iii + 1) : 0);
      img[iii].style.zIndex = "2";
      img[iii].style.opacity = "0";
      button[iii].style.opacity = ".4";
    } else if(img[iii].style.opacity != "") {
      img[iii].style.opacity = ((progress/Vo < 1) ? (progress/Vo) : 1);
    }
    if(clear != "0" && progress > Vo) {} else {requestAnimationFrame(step);}
  }
  requestAnimationFrame(step);
  f.onmouseenter = function() { if(clear == "0") clear = "1"; }
  f.onmouseleave = function() { if(clear == "1") {clear = "0"; requestAnimationFrame(step);} }
  for (var j=0; j<button.length; j++) {
    button[j].onclick = function() {
      clear = "2";
      for (var i=0; i<img.length; i++) {
        img[i].style.zIndex = "0";
      }
      img[this.value].style.zIndex = "2";
      img[this.value].style.opacity = "1";
      for (var k=0; k<button.length; k++) {
        button[k].style.opacity = ((button[k] == this) ? '.4' : '1');
      }
    }
  }
}
var f = document.getElementById('raz'),
    img = f.getElementsByTagName('img'),
    button = f.getElementsByTagName('div')[0].getElementsByTagName('button');
slider(f, img, button, '5000', '1000');
</script></div>
__________________________________________________________________________________
 Вставляйте обычным способом -Дизайн-добавить гаджет -HTML/JavaSckript-вставляйте в содержание -Обязательно напишите название (оно нам пригодится в последствии).

После установки скрипта ,перенесите его,поставте над сообщением (там где раньше стоял "черный слайдер") нажмите сохранить раcположение.

Теперь зайдем в шаблон-изменить HTML-нажимаем -форматировать шаблон-клавиши Ctrl+f,в окошке пишите-название вашего виджета. Находите его и после строки :

<b:includable id='main'>    вставляете вот этот код :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
далее после строк

<div class='widget-content'>
                      <data:content/>
                    </div>

вставляем тег      </b:if>   
Просмотрите шаблон,потом сохраните .

       Желаю  всем творческих успехов!
________________________________________________________________________________

19 комментариев :

  1. Спасибо, Вам Людмила!
    Вы такая труженица!!!
    Что бы мы без Вас , делали?!

    ОтветитьУдалить
  2. Людмила, отличный урок, большое спасибо!!

    ОтветитьУдалить
  3. Отличный урок! Придется заводить несколько видео блогов, на один все прибамбасы не поместятся!

    ОтветитьУдалить
  4. Людочка, спасибо за твою щедрость!

    ОтветитьУдалить
  5. Людмила, спасибо за замечательные уроки!!!

    ОтветитьУдалить
  6. Людмила, замечательный урок!!! Благодарю!!!

    ОтветитьУдалить
  7. Людмила, какая Вы молодец! Спасибо за уроки!

    ОтветитьУдалить
  8. Людмила , спасибо за уроки , которые Вы делаете для нас!!!!

    ОтветитьУдалить
  9. Cпасибо, Людмила, у Вас все уроки замечательные и очень понятные.
    Класс!!!

    ОтветитьУдалить
  10. Благодарю,Людмила,за очень подробный,полезный урок!

    ОтветитьУдалить
  11. Спасибо, Людмила за прекрасный урок! Теперь только остается творить.

    ОтветитьУдалить
  12. Cпасибо, Людмила, у Вас все уроки замечательные и очень понятные. Вот бы ещё времени нам побольше)))

    ОтветитьУдалить
  13. Все доступно изложено подготовлено и изложено! ждем новых уроков!

    ОтветитьУдалить
  14. Kак вставить слайдер из картинок сменяющих друг друга автоматически, спасибо за урок!!!

    ОтветитьУдалить
  15. Спасибо Людмила! Все так красиво получилось!

    ОтветитьУдалить
  16. Спасибо Людмила за такой шикарный подарок , теперь наши блоги будут еще красивее , благодаря Вам !!!

    ОтветитьУдалить
  17. slajder
    Спасибо, очень интересный урок.

    ОтветитьУдалить

.