JavaScript, jQuery och Ajax från noll till Guru

Min videokurs

Videokursen "JavaScript, jQuery och Ajax från noll till Guru" det lär dig att "blåsa liv" i sidorna, vilket gör dem med fantastiska effekter och maximal bekvämlighet för användaren.

Kurs lär dig att skriva skript i JavaScript, liksom utbildad i användningen av biblioteket jQuery och teknik Ajax.

Nästan alla snygg webbplats (med en vacker bildgallerier , reglage, mjuka övergångar och så vidare) använder jQuery. Och nästan alla seriösa webbplats i full användning teknik Ajax, vilket gör arbetet med webbplatsen så bekvämt som möjligt.

Därför kursen "JavaScript jQuery och Ajax från noll till Guru" du behövs bara om du vill skapa en verkligt värdig platser.

Mer..

Smidig övergång av bilden i JavaScript

Smidig övergång av bilden i JavaScript

Beskrivning: Idag blir en mycket intressant skript som låter dig ändra bilden smidigt. Den stora fördelen med detta script kontinuerligt förändras bilder på JavaScript - det är kompatibilitet med olika webbläsare (fungerar även i IE6). Det krävs inte heller JQuery biblioteket, vilket är ovanligt för sådana skript. Jag hoppas att det kommer att glädja dig. Och alla skriptkällorna senare i denna artikel.

Resultat:

Bild 1Bild 2Bild 3Bild 4

JavaScript-kod (infoga mellan taggarna <head> och </head>):

<script="text/javascript">
  var total_pics_num = 4; // antal bilder
  var interval = 5000; // fördröjning mellan bilder
  var time_out = 1; // bildbyte fördröjning
  var i = 0;
  var timeout;
  var opacity = 100;
  function fade_to_next() {
    opacity--;
    var k = i + 1;
    var image_now = 'image_' + i;
    if (i == total_pics_num) k = 1;
    var image_next = 'image_' + k;
    document.getElementById(image_now) .style.opacity = opacity/100;
    document.getElementById(image_now) .style.filter = 'alpha(opacity='+ opacity +')';
    document.getElementById(image_next) .style.opacity = (100-opacity)/100;
    document.getByElementById(image_next) style.filter = 'alpha(opacity='+ (100-opacity) +')';
    if (opacity==1) {
      opacity = 100;
      clearTimeout(timeout);
    }
  }
  setInterval (
    function() {
      i++;
      if (i > total_pics_num) i=1;
      fade_to_next();
    }, interval
  );
</script>

HTML-kod (infoga mellan taggarna <body> och </body>):

<div>
  <img src='slide_1.jpg' id="image_1" style="position: absolute;" />
  <img src='slide_2.jpg' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
  <img src='slide_3.jpg' id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
  <img src='slide_4.jpg' id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
</div>

Kopiering av material är endast tillåtet med författaren (Farhod Samatov) och indexeras direkt länk till din webbplats (https://minhtml.se)!

Lägger till mina vänner Linkedin: https://www.linkedin.com/in/farhod-samatov.
Om du vill utvärdera mig och mitt arbete och sedan skriva det i min grupp: https://www.linkedin.com/in/farhod-samatov.

Om du har några frågor, eller om du har en önskan att tala ut om den här artikeln, kan du lämna en kommentar längst ner på sidan.

Rekommendera artikeln till en vän:

Om du gillade platsen, länken till den (på din webbplats, forum, i kontakt)

  1. Textlänk :

    Det ser ut så här: Hur man skapar din webbplats

  2. BB-kod referens för indexet (till exempel kan du lägga den i signaturen):

Kommentarer (0):

För att lägga till en kommentar genom att logga in i systemet.
Om du ännu inte är registrerad på platsen, måste du först registrera.