BootStrap轮播图和实现时间间隔修改的两种方式

效果
BootStrap轮播图和实现时间间隔修改的两种方式_第1张图片


<html lang="zh-CN">
  <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 Templatetitle>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8">script>
	<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8">script>
	<script type="text/javascript">
	<!-- 设置滑动的时间间隔-->
		$(function(){
			$('#carousel-example-generic').carousel({
				interval:500,
				});
		});
	script>
  head>
  <body>
    <div style="width: 532px;height: 300px;">
		
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
		  
		 <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> 
		
		  
		  <div class="carousel-inner" role="listbox">
		    <div class="item active">
		      <img src="img/1.jpg" width="100%" height="100%" alt="...">
		      <div class="carousel-caption">
		        
		        ----
		      div>
		    div>
		    <div class="item">
		      <img src="img/2.jpg" width="100%" height="100%" alt="...">
		      <div class="carousel-caption">
		        ...
		      div>
		    div>
		   <div class="item">
		     <img src="img/3.jpg" width="100%" height="100%" alt="...">
		     <div class="carousel-caption">
				...
		     div>
		   div>
		  div>
		
		  
		  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
		    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span>
		    <span class="sr-only">Previousspan>
		  a>
		  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
		    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>
		    <span class="sr-only">Nextspan>
		  a>
		div>
	div>
  body>
html>

你可能感兴趣的:(JavaScript)