Can you please tell me how to make a slideshow on your website using html tags?

  • with some html tags =) Your question from the series: "how to hack a website" or "how to write your axis" ... - AseN

2 answers 2

HTML markup

<div id="content"> <ul class="infoPanel"> <li> <a href="#url" class="infoLink current"><img alt="" src="images/image1.jpg" style="opacity: 1;"> <span>Ведьмак 2: Убийцы королей</span> <p>Игра 2011 года</p> </a> <div style="display: block;"> <img alt="" src="images/image1.jpg"> </div> </li> <li> <a href="#url" class="infoLink"><img alt="" src="images/image2.jpg" style="opacity: 0.8;"><span>Dragon Age: Origins</span> <p>Игра 2009 года</p> </a> <div style="display: none;"> <img alt="" src="images/image2.jpg"> </div> </li> <li> <a href="#url" class="infoLink"><img alt="" src="images/image3.jpg" style="opacity: 0.8;"><span>TES: Skyrim</span> <p>11.11.11</p> </a> <div style="display: none;"> <img alt="" src="images/image3.jpg"> </div> </li> </ul> </div>

CSS

We connect inside the tags <head> css file:

 <link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />

Its contents are shown below:

  #content { clear:both; position:relative; border:1px solid #acacac; width:750px; margin:25px auto; } .infoPanel { padding:0; margin:0; list-style:none; width:750px; height:270px; background:#333; position:relative; font-family:verdana, sans-serif; } .infoPanel li { width:271px; float:left; clear:left; height:90px; color:#fff; } .infoPanel li a.infoLink { display:block; width:271px; height:90px; overflow:hidden; text-decoration:none; border:0; color:black; font-size:13px; } .infoPanel li a.infoLink p { color:black; font-size:11px; display:block; width:200px; text-decoration:none; margin-top:3px; padding:0; } .infoPanel li a.current { background:url(../images/back.png); position:absolute; z-index:1; } .infoPanel li { background:url("../images/back2.png") repeat scroll 0 0 transparent; } .infoPanel li a.infoLink img { display:block; width:52px; height:50px; float:left; margin:20px 10px 0 20px; border:1px solid #888; } .infoPanel li a.infoLink span { display:block; padding:20px 20px 0 0; width:240px; font-weight:bold; } .infoPanel li a.current span { color:white; font-weight:bold; } .infoPanel li div img { } .infoPanel li div { position:absolute; right:1px; bottom:0; width:498px; height:270px; background:#333; display:none; overflow:hidden; } .infoPanel li div a { color:#6cf; text-decoration:none; font-size:13px; }

javascript

We connect inside the <head> tags jQuery and the plugin:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript" src="js/slideshow.js"></script>

Such code is in the slideshow.js file:

 $(document).ready(function () { $(".infoPanel li a img").fadeTo(1, 0.8); $(".infoPanel li a").eq(0).addClass("current"); $("a.current").next().fadeIn(); $(".infoPanel li a.current img").fadeTo(250, 1); $(".infoLink").mouseover(function () { if (this.className.indexOf("current") == -1) { $("a.current").next().fadeOut(); $(".infoPanel li a.current img").fadeTo(1, 0.8); $("a.current").removeClass("current"); $(this).addClass("current"); $("a.current").next().fadeIn(); $(".infoPanel li a.current img").fadeTo(250, 1); } }); });

Here!

    There are no HTML 5 special tags for slides. They are made on standard elements:

     <div id="slideshow"> <ul class="slides"> <li><img src="image/1.jpg" /></li> <li><img src="image/2.jpg" /></li> <li><img src="image/3.jpg" /></li> </ul> </div>

    And already these elements are shown or hidden using JavaScript / jQuery or CSS3 animation. An example .