javascript - How can I add fade in, fade out effects -

-

i have simple script works simple html gallery. however, need add transition effects gallery, fade in, fade out, or effect of similar subtitles @ end of every movie (you know mean).

how can solve this? make using js, html, css, without external plugins. possible? on, have below:

<head> <title>test</title>     <script> var images = [      "https://upload.wikimedia.org/wikipedia/commons/7/70/example.png",             "https://upload.wikimedia.org/wikipedia/commons/a/a9/example.jpg",             "https://upload.wikimedia.org/wikipedia/commons/c/ce/example_image.png",             "https://upload.wikimedia.org/wikipedia/commons/e/ee/example-zh.jpg",             "https://upload.wikimedia.org/wikipedia/commons/e/e2/p%c5%99%c3%adklad.jpg",                 "https://upload.wikimedia.org/wikipedia/commons/d/d6/beispiel.png"          ];  var links = [       "http://www.example1.com",             "http://www.example2.com",             "http://www.example3.com",             "http://www.example4.com",                  "http://www.example5.com",              "http://www.example6.com",          ]; var = 0; var renew = setinterval(function(){         if(i==images.length) i=0;         document.getelementbyid("img1").src = images[i];      document.getelementbyid("link1").href = links[i];           if(i+1==images.length) i=-1;         document.getelementbyid("img2").src = images[i+1];     document.getelementbyid("link2").href = links[i+1];          if(i+2==images.length) i=-2;         document.getelementbyid("img3").src = images[i+2];     document.getelementbyid("link3").href = links[i+2];          i+=3;   },5000); </script>  </head>  <body>  <div align="center"> <a href="http://www.example1.com" id="link1"><img src="https://upload.wikimedia.org/wikipedia/commons/7/70/example.png" id='img1' > </a> </br></br> <a href="http://www.example2.com" id="link2"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/example.jpg" id='img2' > </a> </br></br> <a href="http://www.example3.com" id="link3"><img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/example_image.png" id='img3' > </a> </br> </div>   </body>

i created jquery function , added script. when click on button says. example how that

<html> <head> <title>test</title>     <script>  var images = [      "https://upload.wikimedia.org/wikipedia/commons/7/70/example.png",             "https://upload.wikimedia.org/wikipedia/commons/a/a9/example.jpg",             "https://upload.wikimedia.org/wikipedia/commons/c/ce/example_image.png",             "https://upload.wikimedia.org/wikipedia/commons/e/ee/example-zh.jpg",             "https://upload.wikimedia.org/wikipedia/commons/e/e2/p%c5%99%c3%adklad.jpg",                 "https://upload.wikimedia.org/wikipedia/commons/d/d6/beispiel.png"          ];  var links = [       "http://www.example1.com",             "http://www.example2.com",             "http://www.example3.com",             "http://www.example4.com",                  "http://www.example5.com",              "http://www.example6.com",          ]; var = 0; var renew = setinterval(function(){         if(i==images.length) i=0;         document.getelementbyid("img1").src = images[i];      document.getelementbyid("link1").href = links[i];           if(i+1==images.length) i=-1;         document.getelementbyid("img2").src = images[i+1];     document.getelementbyid("link2").href = links[i+1];          if(i+2==images.length) i=-2;         document.getelementbyid("img3").src = images[i+2];     document.getelementbyid("link3").href = links[i+2];          i+=3;   },5000); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script type='text/javascript'>  $(document).ready(function(){     $(".btn1").click(function(){         $("#link1").fadeout()     });     $(".btn2").click(function(){         $("#link1").fadein();     }); }); </script> </head> <body>  </script> </head>  <body>  <div align="center"> <button class="btn1">fade out</button> <button class="btn2">fade in</button> <a href="http://www.example1.com" id="link1"><img src="https://upload.wikimedia.org/wikipedia/commons/7/70/example.png" id='img1' > </a> </br></br> <a href="http://www.example2.com" id="link2"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/example.jpg" id='img2' > </a> </br></br> <a href="http://www.example3.com" id="link3"><img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/example_image.png" id='img3' > </a> </br> </div>   </body>   </html>

Comments

Post a Comment

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

-
everything work fine on code below fetch user logs: js: <script> $(document).ready(function () { var table =$('#systemlogs').datatable({ responsive: true, processing: true, serverside: true, "language": { "url": "/datatables/media/plug-in/persian.json" }, ajax: '{!! url('/admin/systemlogs/data/systemlogsdatatable') !!}', columns: [ { data: 'name', name: 'name' }, { data: 'message_text', name: 'message_text' }, { data: 'remote_addr', name: 'remote_addr' }, { data: 'log_created_at', name: 'management_logs.created_at' }, { data: 'log_updated_at', name: 'management_logs.updated_at' }, ] }); }); </script> routes: route::get('/systemlogs/data/systemlogsdatatable','systemlogscontrolle...
Read more

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

-
i getting error when run spring application: exception in thread "main" org.springframework.context.applicationcontextexception: unable start embedded container; nested exception org.springframework.context.applicationcontextexception: unable start embeddedwebapplicationcontext due missing embeddedservletcontainerfactory bean. @ org.springframework.boot.context.embedded.embeddedwebapplicationcontext.onrefresh(embeddedwebapplicationcontext.java:124) @ org.springframework.context.support.abstractapplicationcontext.refresh(abstractapplicationcontext.java:476) @ org.springframework.boot.context.embedded.embeddedwebapplicationcontext.refresh(embeddedwebapplicationcontext.java:109) @ org.springframework.boot.springapplication.refresh(springapplication.java:691) @ org.springframework.boot.springapplication.run(springapplication.java:320) @ org.springframework.boot.springapplication.run(springapplication.java:952) @ org.springframework.boot.springa...
Read more

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -

-
msg 245, level 16, state 1, line 1 conversion failed when converting varchar value '8:45 am' data type int. script declare @specimenid bigint = 0, @script varchar(max); declare @starttime int = (select convert(int,substring(start_time,0,charindex(':', start_time)) - 12) appt appt._id=112601) --select @starttime set @script = 'select distinct ptlast_name + '', '' + pt.first_name patient_name, dbo.formatdate(pt.dob,''mm/dd/yyyy'') dob, (convert(varchar, (datediff(yy, dob, appt_date) - case when (month(dob) > month(appt_date)) or (month(dob) = month(appt_date) , day(dob) > day(appt_date)) 1 else 0 end)) + ''/'' + convert(varchar, (datediff(m, dateadd(yy, (datediff(yy, dob, appt_date) - case when (month(dob) > month(appt_date)) or (month(dob) = month(appt_date) , day(dob) > day(appt_date)) 1 else 0 end), d...
Read more