图片轮播(类似Flash)jquery_类似flash播放器的轮播图-CSDN博客

本文链接：https://blog.csdn.net/jin3815/article/details/9072903

图片轮播

经常会看到很多网站有动态地切换图片，大都是都是使用Flash实现的，其它jquery+css+div也是可以实现的。

原理：

1.除了第一张图片，其它都隐蒇。

2.获取第一张图片的alt属性给赋给 title ，并且增加点击事件。

3.增加相应的点击按钮，并且使用jquery的fadeOut()和fadeIn()方法。

4.设置定时器setInterval，定时切换图片。

原码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> jquery实现图片的轮播 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
 <script type="text/javascript" src="jquery-1.9.js"></script>
 <script type="text/javascript">

    $(document).ready(function(){
      
      count = $(".list a").length-1;

	  //获取第一张图片中的alt内容赋给标题
      $("#banner_title").html($(".list a:first-child").find("img").attr("alt"));
       
      //点击图片右下角的 1，2，3，4 触发的事件
      $("#banner li").click(function(){
		  
		  var n = $(this).text();
		  
		  $("#banner_title").html($(".list a").eq(n-1).find("img").attr("alt"));
 
		  $(".list a").filter(":visible").fadeOut(500).parent().children().eq(n-1).fadeIn(1000);     

		  $("#banner").css("background","");

          $(this).toggleClass("on");

          $(this).siblings().removeAttr("class");
	  });

	  //设置自动播放
      var n=0;
	  t = setInterval(showAuto,"2000");
	  
	  //当鼠标经过时取消定时器，经过后再重新定时
	  $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval(showAuto,		
		"2000");});

      function showAuto()		
	  {  
		  //动态赋值给n
		 n = n >=(count) ?0 : ++n;
         $("#banner li").eq(n).trigger('click');
	  }; 
		
	});
 </script>

 <style type="text/css">
   #banner
   {
     position:relative;
	 width:400px;
	 height:336px;
	 overflow:hidden;
	 margin:0 auto;
   }
   #banner_title
   {
     position:absolute;
     bottom:0;
     background-color:white;
     height:30px;
     filter:Alpha(Opacity=50);
     opacity:0.3;
	 z-index:1000;
   }
   #banner ul 
   {
     margin-top:300px;
	 margin-left:250px;
     position:absolute;
     list-style-type:none;
     filter: Alpha(Opacity=80);
     opacity:0.8; 
     border:1px solid #fff;
     z-index:1002;
   }
   #banner ul li
   {
     padding:0px 8px;
     float:left;
     display:block;
     color:#FFF;
     border:white 1px solid;
     background:blue;
     cursor:pointer;
   }
   #banner ul li.on 
   {
     background:#ccc;
   }
   #banner .list a
   {
     position:absolute;
   }

 </style>

 <body>

  <div id="banner">
  <div id="banner_title"></div>
   <ul>
     <li class="on">1</li>  
	 <li>2</li>
	 <li>3</li>
	 <li>4</li>
   </ul>
  
   <div class="list">
     <a href="#" target="_blank"><img src="1(1).jpg" alt="Comexs1"/></a>
	 <a href="#" target="_blank"><img src="2(1).jpg" alt="Comexs2"/></a>
	 <a href="#" target="_blank"><img src="3(1).jpg" alt="Comexs3"/></a>
	 <a href="#" target="_blank"><img src="4(1).jpg" alt="Comexs4"/></a>
   </div>
  </div>
 </body>
</html>

效果图:：