JQuery 实现图片轮播_jquery图片轮播-CSDN博客

本文链接：https://blog.csdn.net/qq_36074043/article/details/71439851
<!DOCTYPE html>
<html>
  <head>
    <title>微冷的雨工作室</title>
      <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap-theme.min.css" type="text/css"></link>
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" type="text/css"></link>
    
	<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
	<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    

 
  <style type="text/css">
* { 
 padding: 0px; 
 margin: 0px; 
 } 
 a { 
 text-decoration: none; 
 } 
 ul { 
 list-style: outside none none; 
 } 
 .slider, .slider-panel img, .slider-extra { 
 width: 1344px; 
 height: 344px; 
 } 
 .slider { 
 text-align: center; 
 margin: 30px auto; 
 position: relative; 
 } 
 .slider-panel, .slider-nav, .slider-pre, .slider-next { 
 position: absolute; 
 z-index: 8; 
 } 
 .slider-panel { 
 position: absolute; 
 } 
 .slider-panel img { 
 border: none; 
 } 
 .slider-extra { 
 position: relative; 
 } 
 .slider-nav { 
 margin-left: -51px; 
 position: absolute; 
 left: 50%; 
 bottom: 4px; 
 } 
 .slider-nav li { 
 background: #3e3e3e; 
 border-radius: 50%; 
 color: #fff; 
 cursor: pointer; 
 margin: 0 2px; 
 overflow: hidden; 
 text-align: center; 
 display: inline-block; 
 height: 18px; 
 line-height: 18px; 
 width: 18px; 
 } 
 .slider-nav .slider-item-selected { 
 background: blue; 
 } 
 .slider-page a{ 
 background: rgba(0, 0, 0, 0.2); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); 
 color: #fff; 
 text-align: center; 
 display: block; 
 font-family: "simsun"; 
 font-size: 22px; 
 width: 28px; 
 height: 62px; 
 line-height: 62px; 
 margin-top: -31px; 
 position: absolute; 
 top: 50%; 
 } 
 .slider-page a:HOVER { 
 background: rgba(0, 0, 0, 0.4); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); 
 } 
 .slider-next { 
 left: 100%; 
 margin-left: -28px; 
 } 
	</style>
	<script type="text/javascript">
	$(document).ready(function() { 
 var length, 
  currentIndex = 0, 
  interval, 
  hasStarted = false, //是否已经开始轮播 
  t = 3000; //轮播时间间隔 
 length = $('.slider-panel').length; 
 //将除了第一张图片隐藏 
 $('.slider-panel:not(:first)').hide(); 
 //将第一个slider-item设为激活状态 
 $('.slider-item:first').addClass('slider-item-selected'); 
 //隐藏向前、向后翻按钮 
 $('.slider-page').hide(); 
 //鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动 
 $('.slider-panel, .slider-pre, .slider-next').hover(function() { 
  stop(); 
  $('.slider-page').show(); 
 }, function() { 
  $('.slider-page').hide(); 
  start(); 
 }); 
 $('.slider-item').hover(function(e) { 
  stop(); 
  var preIndex = $(".slider-item").filter(".slider-item-selected").index(); 
  currentIndex = $(this).index(); 
  play(preIndex, currentIndex); 
 }, function() { 
  start(); 
 }); 
 $('.slider-pre').unbind('click'); 
 $('.slider-pre').bind('click', function() { 
  pre(); 
 }); 
 $('.slider-next').unbind('click'); 
 $('.slider-next').bind('click', function() { 
  next(); 
 }); 
 /** 
  * 向前翻页 
  */
 function pre() { 
  var preIndex = currentIndex; 
  currentIndex = (--currentIndex + length) % length; 
  play(preIndex, currentIndex); 
 } 
 /** 
  * 向后翻页 
  */
 function next() { 
  var preIndex = currentIndex; 
  currentIndex = ++currentIndex % length; 
  play(preIndex, currentIndex); 
 } 
 /** 
  * 从preIndex页翻到currentIndex页 
  * preIndex 整数，翻页的起始页 
  * currentIndex 整数，翻到的那页 
  */
 function play(preIndex, currentIndex) { 
  $('.slider-panel').eq(preIndex).fadeOut(500) 
  .parent().children().eq(currentIndex).fadeIn(1000); 
  $('.slider-item').removeClass('slider-item-selected'); 
  $('.slider-item').eq(currentIndex).addClass('slider-item-selected'); 
 } 
 /** 
  * 开始轮播 
  */
 function start() { 
  if(!hasStarted) { 
  hasStarted = true; 
  interval = setInterval(next, t); 
  } 
 } 
 /** 
  * 停止轮播 
  */
 function stop() { 
  clearInterval(interval); 
  hasStarted = false; 
 } 
 //开始轮播 
 start(); 
 }); 
	</script>
 
  </head>
  
  <body>
  
   <!-- navbar-inverse：颜色反转 -->
       <nav class="navbar navbar-default navbar-fixed-top ">
    <!-- container-fluid:自适应浏览器宽度       container：居中样式 -->
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <!-- 三行图标 -->
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">微冷的雨工作室</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">简介</a></li>
       
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">干活分享<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">学术</a></li>
            <li><a href="#">图片</a></li>
            <li><a href="#">文章</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">音乐</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">日志</a></li>
          </ul>
        </li>
         <li><a href="#">本周活动</a></li>
         <li><a href="Y2161-0728.html">作业</a></li>
        <li><a href="#" data-toggle="modal" data-target="#about">关于</a></li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

  
<div class="slider"> 
 <ul class="slider-main"> 
  <li class="slider-panel"> 
  <a href="http://www.jb51.net" target="_blank"><img src="image/img01.png"></img></a> 
  </li> 
  <li class="slider-panel"> 
  <a href="http://www.jb51.net" target="_blank"><img src="image/img02.png"></img></a> 
  </li> 
  <li class="slider-panel"> 
  <a href="http://www.jb51.net" target="_blank"><img src="image/img03.png"></img></a> 
  </li> 
   
 </ul> 
 <div class="slider-extra"> 
  <ul class="slider-nav"> 
  <li class="slider-item">1</li> 
  <li class="slider-item">2</li> 
  <li class="slider-item">3</li> 
  
  </ul> 
  <div class="slider-page"> 
  <a class="slider-pre" href="javascript:;;"><</a> 
  <a class="slider-next" href="javascript:;;">></a> 
  </div> 
 </div> 
 </div> 
  <!-- tabs选项卡 -->
	  <div class="container">
    <hr/>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">学术</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">图片</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">文章</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">音乐</a></li>
     <li role="presentation"><a href="#rz" aria-controls="rz" role="tab" data-toggle="tab">日志</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
	      <div class="row">
			  <div class="col-md-7"> <img src="image/3.jpg" width="300px" height="300px"/></div>
			  <div class="col-md-5"> 第一章</div>
		  </div>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
          <div class="row">
			  <div class="col-md-7"> <img src="image/4.jpg" width="300px" height="300px"/></div>
			  <div class="col-md-5"> 第2章</div>
		  </div>     
    </div>
    <div role="tabpanel" class="tab-pane" id="messages">
          <div class="row">
			  <div class="col-md-7"> <img src="image/5.jpg" width="300px" height="300px"/></div>
			  <div class="col-md-5"> 第3章</div>
		  </div> 
    
    </div>
    <div role="tabpanel" class="tab-pane" id="settings">
          <div class="row">
			  <div class="col-md-7"> <img src="image/2.jpg" width="300px" height="300px"/></div>
			  <div class="col-md-5"> 第4章</div>
		  </div> 
    </div>
    <div role="tabpanel" class="tab-pane" id="rz">
          <div class="row">
			  <div class="col-md-7"> <img src="image/1.jpg" width="300px" height="300px"/></div>
			  <div class="col-md-5"> 第5章</div>
		  </div> 
    </div>
  </div>



	
	
	
	 <hr/>
  <footer>
    <p class="pull-right"><a href="#top">回到顶部</a></p>
    <p>&copy;2016微冷的雨</p>
  </footer>
</div>

 
   <!-- 关于对话框 -->
   <div class="modal fade" id="about" tabindex="-1" role="dialog">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
			        <h4 class="modal-title">关于</h4>
			      </div>
			      <div class="modal-body">
			         微冷的雨致力于为IT世界贡献自己的一份微薄之力！！<br/>
			         blogs地址：http://www.cnblogs.com
			         <br/>
			                      邮箱:yymqqc@126.com
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">了解了</button>
			       
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div><!-- /.modal -->
   
     </div>
 
  </body>
</html>