www.webdeveloper.com
Results 1 to 3 of 3

Thread: [Javascript / JQuery] Banner problem

Hybrid View

  1. #1
    Join Date
    Jun 2013
    Posts
    3

    [Javascript / JQuery] Banner problem

    Hello

    I try to create a javascript/JQuery banner. I'm using a Jquery file that allow fade in / fade out.

    Please find here below the link to a sample of my banner

    And the code

    Code:
    <style type="text/css">
    #images-container{
    	position:relative;
    	width:480px;
    	height:200px
    	
    }
    .images{
    	position:absolute;
    	top:0px;
    	left:0px;
    	display:none;
    	width:480px;
    	height:200px;
    	border:0;
    	}
    #image1{display:block;}
    </style>
    <script src="http://www.kpmg.com/LU/en/Documents/jquery.min.js"></script>
    <script type="text/javascript"> $(document).ready(function(){
    	 var count=$("#images-container").find(".images").length; 
    	 var i=2; 
    	 $.fn.slideshow=function(){
    	 $(".images").fadeOut(1000); $("#image"+i+"").fadeIn(1000); 
    	 i++; 
    	 if(i>count)
    	 i=1; 
    	 }; 
    	setInterval("$.fn.slideshow()",3000); 
    	});
              </script>
    
    
    <div id="images-container">
    <a href="http://www.kpmg.com/LU/en/IssuesAndInsights/Articlespublications/Pages/LuxembourgTaxNews-Issue2013-09.aspx" target="self"><img class="images" id="image1" alt="European FATCA" src="http://www.kpmg.com/LU/en/industry/Banking/PublishingImages/european-fatca-480x200-2.jpg" /></a>
    
    <a href="http://www.paperjam.lu/article/fr/deja-une-belle-reussite" target="_blank"><img class="images" id="image2" alt="Luxembourg meets China" src="http://www.kpmg.com/LU/en/industry/Banking/PublishingImages/Hsiao-Yun-Lee-480x200-2.jpg" /></a>
    
    <a href="http://www.kpmg.com/LU/en/IssuesAndInsights/Articlespublications/Pages/GlobalAuditCommitteesurveyresults-AfocusonLuxembourg.aspx" target="self"><img class="images" id="image3" alt="Global Audit Committee Survey" src="http://www.kpmg.com/LU/en/industry/Banking/PublishingImages/audit-committee-survey-2.jpg" /></a>
    
    <a href="http://www.kpmg.com/LU/en/IssuesAndInsights/Articlespublications/Pages/KPMGanalysiertdieErgebnissederBanken.aspx" target="self"><img class="images" id="image4" alt="Classement des banques" src="http://www.kpmg.com/LU/en/industry/Banking/PublishingImages/classement-des-banques-480x200-2.jpg" /></a>
    
    <a href="http://www.kpmg.com/LU/en/IssuesAndInsights/Articlespublications/Pages/CRDIV-Publication.aspx" target="self"><img class="images" id="image5" alt="CSRD IV" src="http://www.kpmg.com/LU/en/industry/Banking/PublishingImages/EBA-Identified-Staff-480x200-2.jpg" /></a>
    
    </div>
    I would like to create 5 bullets in the bottom right corner of the banner to allow to switch from one image/link to the precedent and next one.

    Is it possible and how?

    Kind regards

  2. #2
    Join Date
    Jun 2013
    Posts
    3
    Sorry here's the link with the banner.

    http://www.kpmg.com/lu/en/industry/b...s/default.aspx

  3. #3
    Join Date
    Jun 2013
    Posts
    3
    A "Next" or "Precedent" arrow in the bottom rigth corner can be good too

    Thank you

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles