CODEWITHSUNDEEP
jqueryhtmlcss
Haji
Haji

Reputation: 2077

Image Slide Show using Jquery Not working

I am doing a simple image slide show using jquery. When i run my code in the latest chrome browser, it's not working: it just displays the first image only. My code is below . Html Coding :

 <script type ="text/javascript" src ="lib1.js" ></script>
<script type ="text/javascript" src ="Haji.js" ></script>
<link rel="stylesheet" type="text/css" href="Haji1.css"/>
</head>
   <body>
          <div class="bodycontent">
               <img src="IMG/haji2.jpg" alt="image1"/> 
               <img src="IMG/haji1.jpg" alt="image2"/>
               <img src="IMG/haji3.jpg" alt="image3"/>
          </div>
   </body>

Css :

  .bodycontent{
  position:relative;
  width:100%;
  height:500px;
}
.bodycontent img{
 position:absolute;
 left:0;
 top:0;
 width:100%;
 height:400px;
}

Jquery :

$(document).ready(function() { 
$(function(){
  $('.bodycontent img:gt(0)').hide();
   setinterval(function(){
    $('.bodycontent  :first-child').fadeOut()
       .next('img').fadeIn()
       .end().appendTo('.bodycontent');},1000);
   });
});

Can anyone help me..what's wrong with my code?...

Upvotes: 0

Views: 456

Answers (1)

adeneo
adeneo

Reputation: 318202

It's not:

setinterval

but:

setInterval

case matters!
once that is sorted, it works as expected, fading thru the images.

FIDDLE

Upvotes: 3

Related Questions