#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    1
    Rep Power
    0

    Frustration with jquery image slider


    I'm sure it is something dumb, but so irritating!!

    I have this very simple page with an image slider on it. It works fine, first image fades in, slides to second image. Stops. Doesn't do anything, just hangs on the second image and doesn't go to the third. WHAAATTT?! I can't figure out what I did wrong, anyone see the error?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    <html>
    	<head>
    		<link rel="stylesheet" type="text/css" href="style.css">
    		<title>Kal Web Design</title>
    		
    		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    		<script type="text/javascript">
    			function Slider() {
    				$(".slider #1").show("fade", 500);
    				$(".slider #1").delay(5500).hide("slide", {direction:'left'}, 500);
    				
    				var sc = $(".slider img").size();
    				var count = 2;
    				
    				setInterval(function (){
    					$(".slider #"+count).show("slide", {direction:'right'}, 500);
    					$(".slider #").delay(5500).hide("slide", {direction:'left'}, 500);
    				
    					if(count == sc){
    						count = 1;
    					}else{
    						count = count + 1;
    					}
    				},6500);
    			}
    		</script>
    	</head>
    	<body onload="Slider();">
    		<div class="nav">
    			<ul>
    				<li><a href="google.com">About</a></li>
    				<li><a href="google.com">Contact</a></li>
    				<li><a href="google.com">Services</a></li>
    				<li><a href="google.com">Work</a></li>
    			</ul>
    		</div>
    		<div id="logo"><img src="KWDlogo.png" /></div>
    		<div class="sliderBG">
    			<div class="sliderArea">
    				<div class="slider">
    					<img id="1" src="test1.png"></img>
    					<img id="2" src="test2.png"></img>
    					<img id="3" src="test3.png"></img>
    				</div>
    			</div>
    		</div>
    	</body>
    </html?
  2. #2
  3. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    <html?

    at the end should be corrected.

    Code:
    $(".slider #").delay(5500).hide("slide", {direction:'left'}, 500);
    .. you haven't attached a number to the #.

    IDs should, preferably, not just be numbers, but most browsers will accept these.

IMN logo majestic logo threadwatch logo seochat tools logo