Как да се сменят/редуват 3 картинки на всеки 5 секунди?

grizli · 23 Ноември 2011

Виж надолу.

grizli · 23 Ноември 2011

Ето тази: .pic {margin: 21px 0 0 0; height: 227px; width: 170px; background: url(../img/img1.jpg) no-repeat; трябва да са 3 картинки, които да се сменят на 5 сек. img1.jpg трябва да се сменя с други 2 - img2.jpg и img3.jpg

http://www.coderanch.com/t/436145/HTML-JavaScript/Reload-different-image-every-second - тук има нещо - но как да го напасна на моя случай.

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Задача</title>
<meta name="description" content="html, css" />
<meta name="keywords" content="html, css, web design" />
<meta name="robots" content="index, follow" />
<link type="text/css" rel="stylesheet" href="css/zada4a_1.css" />
</head>

<body>
	<div id="all">	
		<div id="header">
			<ul>
				<li><a href="#">Menu 1</a></li>
				<li><a href="#">Menu 2</a></li>
				<li><a href="#">Menu 3</a></li>
				<li><a href="#">Menu 4</a></li>
				<li><a href="#">Menu 5</a></li>
			</ul>
		</div>
		<div id="content">
			<div id="left_content">
				<table cellpadding="0" cellspacing="0" align="left" width="170px">
					<tr>
						<td class="links"><a href="#">Link 1</a></td>
					</tr>
					<tr>
						<td class="links"><a href="#">Link 2</a></td>
					</tr>
					<tr>
						<td class="links"><a href="#">Link 3</a></td>
					</tr>
					<tr>
						<td class="links" ><a href="#">Link 4</a></td>
					</tr>
					<tr>
						<td class="links"><a href="#">Link 5</a></td>
					</tr>
					<tr>
						<td class="links"><a href="#">link 6</a></td>
					</tr>
					<tr>
						<td class="links"><a href="#">Link 7</a></td>
					</tr>
					<tr>
						<td class="links"><a href="#">Link 8</a></td>
					</tr>
				</table>
				<div class="clearer"> </div>
				<div class="pic"> </div>
			</div>
			<div id="center_content"></div>	
			<div id="right_content"> 	
				<div id="adds">dawdfaw fdafa adfafa asdsf ddcsa gfhgd gsg grrg</div>
				<div id="adds_1">dawdfaw fdafa adfafa asdsf ddcsa gfhgd gsg grrg</div>
			</div>
			<div class="clearer"> </div>
		
		</div>
     
		<div id="footer">
			<ul>
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
				<li><a href="#">Link 4</a></li>
				<li><a href="#">Link 5</a></li>
			</ul>
		</div>
	</div>

    </body>
</html>

Код:

html, body {position: relative; height: 100%; background: #ccc; color: #000; font-size: 18px; font-family: georgia,verdana, sens-serif; margin: 0; padding: 0 auto;}
#all {width:960px; height:auto; margin:0px auto;}
#header {line-height: 56px; height: 56px; width: auto; margin: 0 auto; padding: 0 0 0 0; background-color: green; 
-moz-border-radius-topleft: 9px;
-moz-border-radius-topright: 9px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 9px 9px 0px 0px;
border-radius: 9px 9px 0px 0px;}
#header ul {margin: 0 0 0 450px; padding:0 0 0 0; list-style-type: none;}
#header ul li{margin: 18px 20px 0 0; padding: 0; list-style-type: none; display: inline; font-size: 20px; font-family: arial; font-weight: bold;}
#header ul li a {color: #fff; text-decoration: none;}
#header ul li a:hover {color: #fff; text-decoration: underline;}
#header ul li a:active {color: #cac2c2;}

.links{padding:0px;margin:0px;}
.links a{padding: 5px 0 0px 5px; line-height: 13px; text-decoration: none; font-family: georgia; font-size: 15px; font-weight: normal;
color: #e0427d; background-color:#ccff99; display:block; height:22px; border: 1px solid #999900;}
.links a:hover {background-color:#ffcc66;}
.links a:visited {color: #e0427d;}
#content{
	width:100%;
}

#left_content{
	float:left;
	width:170px;
}
.pic {margin: 21px 0 0 0;
	height: 227px; 
	width: 170px;  
	background: url(../img/img1.jpg) no-repeat; 
}
#center_content {
	background: url(../img/DSC00193.jpg) no-repeat; 
	width: 640px; 
	height: 480px; 
	float:left;
}
#right_content{margin: 3px 0 0 2px; width:145px; float: left;}

#adds {border: 1px solid #999900; 
	height: 210px; 
	width: 142px; 
	font-size: 15px; 
	font-family: georgia;
	padding: 0px 2px 2px 2px; 
	text-align: left; 
	background:#dddddd;
	-webkit-border-radius: 6px ;
	-moz-border-radius: 6px;
	border-radius: 6px;
}
#adds_1 {border: 1px solid #999900; 
	height: auto; 
	width: 142px;  
	font-size: 15px; 
	font-family: georgia;
	margin: 3px 0 0 0;
	padding: 0px 2px 2px 2px; 
	text-align: left; background:#dddddd;
	-webkit-border-radius: 6px ;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

#footer {line-height: 38px; padding: 0 0 0 0; background-color: #999900; margin: 0 auto; height: 38px; width: 960px; position: absolute;  bottom:0;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-radius: 0px 0px 9px 9px;
border-radius: 0px 0px 9px 9px;}
#footer ul {margin: 0 0 0 300px; padding:0 0 0 0; list-style-type: none;}
#footer ul li{margin: 18px 20px 0 0; padding: 0; list-style-type: none; display: inline; font-size: 14px; font-family: arial; font-weight: bold;}
#footer ul li a {color: #fff; text-decoration: none;}
#footer ul li a:hover {color: #fff; text-decoration: underline;}
#footer ul li a:active {color: #cac2c2;}
.clearer{line-height: 0px; font-size: 0px; clear: both;	overflow: hidden;}

oniatam · 23 Ноември 2011

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Задача</title>
<meta name="description" content="html, css" />
<meta name="keywords" content="html, css, web design" />
<meta name="robots" content="index, follow" />
<link type="text/css" rel="stylesheet" href="css/zada4a_1.css" />
<script type="text/javascript">  
      var aImages  =  [ "http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/108.gif",  
                        "http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/106.gif",  
                        "http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif",  
                        "http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif",  
                        "http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif"];  
      var oImage   =  null;  
      var iIdx     =  0;  
      function play(){  
        try{  
          //look only once in DOM and cache it  
          if(oImage===null){  
            oImage  =  window.document.getElementById("imgHolder");  
          }  
          oImage.src  =  aImages[(++iIdx)%(aImages.length)];  
          setTimeout('play()',5000);  
        }catch(oEx){  
          //some error handling here  
        }  
      }      
    </script>
</head>

<body>
   <div id="all">   
      <div id="header">
         <ul>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
            <li><a href="#">Menu 5</a></li>
         </ul>
      </div>
      <div id="content">
         <table cellpadding="0"; cellspacing="0" align="left" width="170px">

            <tr>
               <td class="links"><a href="#">Link 1</a></td>
            </tr>
            <tr>
               <td class="links"><a href="#">Link 2</a></td>
            </tr>
            <tr>
               <td class="links"><a href="#">Link 3</a></td>
            </tr>
            <tr>
                <td class="links" ><a href="#">Link 4</a></td>
            </tr>
            <tr>
               <td class="links"><a href="#">Link 5</a></td>
            </tr>
            <tr>
               <td class="links"><a href="#">link 6</a></td>
            </tr>
            <tr>
               <td class="links"><a href="#">Link 7</a></td>
            </tr>
            <tr>
               <td class="links"><a href="#">Link 8</a></td>
            </tr>
         </table>
         <div id="pic" onload="play()">
<img id="imgHolder" />
         </div>
         <div id="cont"></div>       
         <div id="adds">dawdfaw fdafa adfafa asdsf ddcsa gfhgd gsg grrg</div>
         <div id="adds_1">dawdfaw fdafa adfafa asdsf ddcsa gfhgd gsg grrg</div>
       
         <div class="clearer"> </div>
      
      </div>
     
      <div id="footer">
         <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
         </ul>
      </div>
   </div>

    </body>
</html>

И не забравяй да си промениш цсс-а на #пик и пътя до снимките!

grizli · 23 Ноември 2011

oniatam каза:

Код:

<script type="text/javascript">  
      var aImages  =  [ "http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/108.gif",  
                        "http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/106.gif",  
                        "http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif",  
                        "http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif",  
                        "http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif"];  
      var oImage   =  null;  
      var iIdx     =  0;  
      function play(){  
        try{  
          //look only once in DOM and cache it  
          if(oImage===null){  
            oImage  =  window.document.getElementById("imgHolder");  
          }  
          oImage.src  =  aImages[(++iIdx)%(aImages.length)];  
          setTimeout('play()',5000);  
        }catch(oEx){  
          //some error handling here  
        }  
      }      
    </script>

И не забравяй да си промениш цсс-а на #пик и пътя до снимките!

Не си направил нищо освен да препишеш кода.

grizli · 25 Ноември 2011

http://jquery-howto.blogspot.com/2009/05/replacing-images-at-time-intervals.html - тук има нещо, но картинката не се сменя. Мъчих се, но... Смених и типа на html документа на 4.01 Strict.
Ето какво направих:

Код:

<!DOCTYPE !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" lang="bg">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Задача</title>
<meta name="description" content="html, css" />
<meta name="keywords" content="html, css, web design" />
<meta name="robots" content="index, follow" />
<link type="text/css" rel="stylesheet" href="css/zada4a_2.css" />
<script src="jquery-1.7.1.js" type="text/javascript">
	function swapImages(){
  var $active = $('#pic .active');
  var $next = ($('#pic .active').next().length > 0) ? $('#pic .active').next() : $('#pic img:first');
  $active.fadeOut(function(){
    $active.removeClass('active');
    $next.fadeIn().addClass('active');
  });
}
 $(document).ready(function(){
      // Run our swapImages() function every 5secs
      setInterval('swapImages()', 5000);
    }
		
</script>
</head>

<body>
	<div id="all">	
		<div id="header">
			<ul>
				<li><a href="#">Menu 1</a></li>
				<li><a href="#">Menu 2</a></li>
				<li><a href="#">Menu 3</a></li>
				<li><a href="#">Menu 4</a></li>
				<li><a href="#">Menu 5</a></li>
			</ul>
		</div>
		<div id="content">
			<div id="left_content">
				<table cellpadding="0" cellspacing="0" align="left" width="170px">
					<tr>
						<td class="links"><a href="#">Link 1</a></td>
					</tr>
					<tr>
						<td class="links"><a href="#">Link 2</a></td>
					</tr>
					<tr>
						<td class="links"><a href="#">Link 3</a></td>
					</tr>
					<tr>
						<td class="links" ><a href="#">Link 4</a></td>
					</tr>
					<tr>
						<td class="links"><a href="#">Link 5</a></td>
					</tr>
					<tr>
						<td class="links"><a href="#">link 6</a></td>
					</tr>
					<tr>
						<td class="links"><a href="#">Link 7</a></td>
					</tr>
					<tr>
						<td class="links"><a href="#">Link 8</a></td>
					</tr>
				</table>
				<div class="clearer"> </div>
				
                <div id="pic"> 
                	<img src="img/img1.jpg" class="active" />
    			<img src="img/img2.jpg" />
    			<img src="img/img3.jpg" />
			
                </div>
			<div id="center_content"></div>	
			<div id="right_content"> 	
				<div id="adds">dawdfaw fdafa adfafa asdsf ddcsa gfhgd gsg grrg</div>
				<div id="adds_1">dawdfaw fdafa adfafa asdsf ddcsa gfhgd gsg grrg</div>
			</div>
			<div class="clearer"> </div>
		
		</div>
     
		<div id="footer">
			<ul>
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
				<li><a href="#">Link 4</a></li>
				<li><a href="#">Link 5</a></li>
			</ul>
		</div>
	</div>

    </body>
</html>

CSS:

Код:

html, body {position: relative; height: 100%; background: #ccc; color: #000; font-size: 18px; font-family: georgia,verdana, sens-serif; margin: 0; padding: 0 auto;}
#all {width:960px; height:auto; margin:0px auto;}
#header {line-height: 56px; height: 56px; width: auto; margin: 0 auto; padding: 0 0 0 0; background-color: green; 
-moz-border-radius-topleft: 9px;
-moz-border-radius-topright: 9px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 9px 9px 0px 0px;
border-radius: 9px 9px 0px 0px;}
#header ul {margin: 0 0 0 450px; padding:0 0 0 0; list-style-type: none;}
#header ul li{margin: 18px 20px 0 0; padding: 0; list-style-type: none; display: inline; font-size: 20px; font-family: arial; font-weight: bold;}
#header ul li a {color: #fff; text-decoration: none;}
#header ul li a:hover {color: #fff; text-decoration: underline;}
#header ul li a:active {color: #cac2c2;}

.links{padding:0px;margin:0px;}
.links a{padding: 5px 0 0px 5px; line-height: 13px; text-decoration: none; font-family: georgia; font-size: 15px; font-weight: normal;
color: #e0427d; background-color:#ccff99; display:block; height:22px; border: 1px solid #999900;}
.links a:hover {background-color:#ffcc66;}
.links a:visited {color: #e0427d;}
#content{
	width:100%;
}

#left_content{
	float:left;
	width:170px;
}
#pic {margin: 21px 0 0 0; position: relative;
	height: 227px; 
	width: 170px;  
	}

#pic img {display: none;
      position: absolute;
      top: 0;
      left: 0;
}

#pic img.active{display: block;}


#center_content {
	background: url(../img/DSC00193.jpg) no-repeat; 
	width: 640px; 
	height: 480px; 
	float:left;
}
#right_content{margin: 3px 0 0 2px; width:145px; float: left;}

#adds {border: 1px solid #999900; 
	height: 210px; 
	width: 142px; 
	font-size: 15px; 
	font-family: georgia;
	padding: 0px 2px 2px 2px; 
	text-align: left; 
	background:#dddddd;
	-webkit-border-radius: 6px ;
	-moz-border-radius: 6px;
	border-radius: 6px;
}
#adds_1 {border: 1px solid #999900; 
	height: auto; 
	width: 142px;  
	font-size: 15px; 
	font-family: georgia;
	margin: 3px 0 0 0;
	padding: 0px 2px 2px 2px; 
	text-align: left; background:#dddddd;
	-webkit-border-radius: 6px ;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

#footer {line-height: 38px; padding: 0 0 0 0; background-color: #999900; margin: 0 auto; height: 38px; width: 960px; position: absolute;  bottom:0;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-radius: 0px 0px 9px 9px;
border-radius: 0px 0px 9px 9px;}
#footer ul {margin: 0 0 0 300px; padding:0 0 0 0; list-style-type: none;}
#footer ul li{margin: 18px 20px 0 0; padding: 0; list-style-type: none; display: inline; font-size: 14px; font-family: arial; font-weight: bold;}
#footer ul li a {color: #fff; text-decoration: none;}
#footer ul li a:hover {color: #fff; text-decoration: underline;}
#footer ul li a:active {color: #cac2c2;}
.clearer{line-height: 0px; font-size: 0px; clear: both;	overflow: hidden;}

Дайте малко помощ, пичове!

Как да се сменят/редуват 3 картинки на всеки 5 секунди?

grizli

Registered

grizli

Registered

oniatam

Registered

grizli

Registered

grizli

Registered