Eso se puede realizar con bootstrap, no es necesario reinventar el hilo negro.

Te dejo un ejemplo, pon atención al siguiente div. 

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">

En este div se configuran las propiedades de el carrusel, data-interval representa el tiempo en milisegundos, que va a tardar en pasar de una imagen a otra.

Si es de tu gusto realizarlo con javascript solo tendrias que realizar lo siguiente:

    <script>
    	$('.carousel').carousel({
    		interval: 3000
    	})
    </script> 

Si necesitas configurar mas el carrusel, visita el siguiente link http://getbootstrap.com/javascript/#carousel donde puedes observar todas las propiedades que puedes configurar.


    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>
     
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
     
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
    	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">
    		  <!-- Indicators -->
    		  <ol class="carousel-indicators">
    			<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    			<li data-target="#carousel-example-generic" data-slide-to="1"></li>
    			<li data-target="#carousel-example-generic" data-slide-to="2"></li>
    		  </ol>
    		 
    		  <!-- Wrapper for slides -->
    		  <div class="carousel-inner">
    			<div class="item active">
    			  <img src="http://placehold.it/1200x315" alt="...">
    			  <div class="carousel-caption">
    				<h3>Caption Text</h3>
    			  </div>
    			</div>
    			<div class="item">
    			  <img src="http://placehold.it/1200x315" alt="...">
    			  <div class="carousel-caption">
    				<h3>Caption Text</h3>
    			  </div>
    			</div>
    			<div class="item">
    			  <img src="http://placehold.it/1200x315" alt="...">
    			  <div class="carousel-caption">
    				<h3>Caption Text</h3>
    			  </div>
    			</div>
    		  </div>
    		 
    		  <!-- Controls -->
    		  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    			<span class="glyphicon glyphicon-chevron-left"></span>
    		  </a>
    		  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    			<span class="glyphicon glyphicon-chevron-right"></span>
    		  </a>
    		</div> <!-- Carousel -->
     
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
      </body>
    </html>