javascript - slideshow images without plugins and frameworks -


i use following code slideshow , slideshow's performance great website , not intend use code or plugin.

i add 2 features slideshow:

  1. i want change images automatically after 5 seconds.
  2. when hold mouse on current image, pausing same image.

please guide me! thanks

if intend change code javascript jquery have no obstacles. code:

var slideindex = 1;  showslides(slideindex);    function plusslides(n) {    showslides(slideindex += n);  }    function currentslide(n) {    showslides(slideindex = n);  }    function showslides(n) {    var i;    var slides = document.getelementsbyclassname("myslides");    var dots = document.getelementsbyclassname("dot");    if (n > slides.length) {slideindex = 1}        if (n < 1) {slideindex = slides.length}    (i = 0; < slides.length; i++) {        slides[i].style.display = "none";      }    (i = 0; < dots.length; i++) {        dots[i].classname = dots[i].classname.replace(" active", "");    }    slides[slideindex-1].style.display = "block";      dots[slideindex-1].classname += " active";  }
* {box-sizing:border-box}  body {font-family: verdana,sans-serif;margin:0}  .myslides {display:none}    /* slideshow container */  .slideshow-container {    max-width: 1000px;    position: relative;    margin: auto;  }    /* next & previous buttons */  .prev, .next {    cursor: pointer;    position: absolute;    top: 50%;    width: auto;    padding: 16px;    margin-top: -22px;    color: white;    font-weight: bold;    font-size: 18px;    transition: 0.6s ease;    border-radius: 0 3px 3px 0;  }    /* position "next button" right */  .next {    right: 0;    border-radius: 3px 0 0 3px;  }    /* on hover, add black background color little bit see-through */  .prev:hover, .next:hover {    background-color: rgba(0,0,0,0.8);  }    /* caption text */  .text {    color: #f2f2f2;    font-size: 15px;    padding: 8px 12px;    position: absolute;    bottom: 8px;    width: 100%;    text-align: center;  }    /* number text (1/3 etc) */  .numbertext {    color: #f2f2f2;    font-size: 12px;    padding: 8px 12px;    position: absolute;    top: 0;  }    /* dots/bullets/indicators */  .dot {    cursor:pointer;    height: 13px;    width: 13px;    margin: 0 2px;    background-color: #bbb;    border-radius: 50%;    display: inline-block;    transition: background-color 0.6s ease;  }    .active, .dot:hover {    background-color: #717171;  }    /* fading animation */  .fade {    -webkit-animation-name: fade;    -webkit-animation-duration: 1.5s;    animation-name: fade;    animation-duration: 1.5s;  }    @-webkit-keyframes fade {    {opacity: .4}     {opacity: 1}  }    @keyframes fade {    {opacity: .4}     {opacity: 1}  }    /* on smaller screens, decrease text size */  @media screen , (max-width: 300px) {    .prev, .next,.text {font-size: 11px}  }
<!doctype html>  <html>  <head>  <meta name="viewport" content="width=device-width, initial-scale=1">  <style>    </style>  </head>  <body>    <div class="slideshow-container">    <div class="myslides fade">    <div class="numbertext">1 / 3</div>    <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">    <div class="text">caption text</div>  </div>    <div class="myslides fade">    <div class="numbertext">2 / 3</div>    <img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">    <div class="text">caption two</div>  </div>    <div class="myslides fade">    <div class="numbertext">3 / 3</div>    <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">    <div class="text">caption three</div>  </div>    <a class="prev" onclick="plusslides(-1)">&#10094;</a>  <a class="next" onclick="plusslides(1)">&#10095;</a>    </div>  <br>    <div style="text-align:center">    <span class="dot" onclick="currentslide(1)"></span>     <span class="dot" onclick="currentslide(2)"></span>     <span class="dot" onclick="currentslide(3)"></span>   </div>    <script>    </script>    </body>  </html>

i changed slideshow container div have id rather class since can document.getelementbyid , retrieve particular element rather array if document.getelementbyclassname:

<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>  </style> </head> <body>  <div id="slideshow-container">  <div class="myslides fade">   <div class="numbertext">1 / 3</div>   <img src="https://www.w3schools.com/howto/img_nature_wide.jpg"    style="width:100%"> <div class="text">caption text</div> </div>  <div class="myslides fade">   <div class="numbertext">2 / 3</div>   <img src="https://www.w3schools.com/howto/img_fjords_wide.jpg"  style="width:100%">   <div class="text">caption two</div> </div>  <div class="myslides fade">   <div class="numbertext">3 / 3</div>   <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg"  style="width:100%">   <div class="text">caption three</div> </div>  <a class="prev" onclick="plusslides(-1)">&#10094;</a> <a class="next" onclick="plusslides(1)">&#10095;</a>  </div> <br>  <div style="text-align:center">   <span class="dot" onclick="currentslide(1)"></span>    <span class="dot" onclick="currentslide(2)"></span>    <span class="dot" onclick="currentslide(3)"></span>  </div>  <script>  </script>  </body> </html>

i added global timer call plusslide function every 5 seconds. use clearinterval on "mouseleave" stop timer. note use clearinterval(timer) had first save setinterval global variable, timer. 

var timer = setinterval(function(){plusslides(1)}, 5000 );  var slideindex = 1; showslides(slideindex);  function plusslides(n) {   showslides(slideindex += n); }  function currentslide(n) {   showslides(slideindex = n); }  function showslides(n) {   var i;   var slides = document.getelementsbyclassname("myslides");   var dots = document.getelementsbyclassname("dot");   if (n > slides.length) {slideindex = 1}       if (n < 1) {slideindex = slides.length}   (i = 0; < slides.length; i++) {       slides[i].style.display = "none";     }   (i = 0; < dots.length; i++) {       dots[i].classname = dots[i].classname.replace(" active", "");   }   slides[slideindex-1].style.display = "block";     dots[slideindex-1].classname += " active"; }  document.getelementbyid("slideshow-container").addeventlistener("mouseover",   function(){     clearinterval(timer)  }); document.getelementbyid("slideshow-container").addeventlistener("mouseleave", function(){ timer = setinterval(function(){plusslides(1)}, 5000 ); });

Comments

Post a Comment

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -

here tables: create table customer ( cid int primary key, name varchar(32) ) create table ord ( oid int primary key, cid int foreign key references customer, address varchar(20) ) here's linq-to-sql statement: var aaa = c in db.customer select new { c, o = c.ord.tolist() }; and here's inexplicable query generated linq-to-sql: select [t0].[cid] [cid], [t0].[name] [name], [t1].[oid] [oid], [t1].[cid] [cid2], [t1].[address] [address], (select count(*) [dbo].[ord] [t2] [t2].[cid] = [t0].[cid]) [value] [dbo].[customer] [t0] left outer join [dbo].[ord] [t1] on [t1].[cid] = [t0].[cid] order [t0].[cid], [t1].[oid] i want understand how rid of count(*) part. it's entirely uncalled for! linq needs count(*) in order determine number of entries returned o = c.ord.tolist() .
Read more