首页>>焦点图>>banner焦点图，带标题(2016-05-14)

banner焦点图，带标题

banner焦点图，带标题
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="con">  
  2.                 <ul>  
  3.                     <li><a href='http://freejs.net/daohangcaidan.html' target='_blank'> <img src='images/1.jpg' alt='' /> </a></li>  
  4.                     <li><a href='http://freejs.net/tabbiaoqian.html' target='_blank'> <img src='images/2.jpg' alt='' /> </a></li>  
  5.                     <li><a href='http://www.freejs.net' target='_blank'> <img src='images/3.jpg' alt='' /> </a></li>  
  6.                     <li><a href='http://www.freejs.net' target='_blank'> <img src='images/4.jpg' alt='' /> </a></li>  
  7.                       
  8.                 </ul>  
  9.             </div>  
  10.             <div class="prev"></div>  
  11.             <div class="next"></div>  
  12.             <div class="nav">  
  13.                 <ul>  
  14.                     <li class="bg"><a href='http://freejs.net/daohangcaidan.html' target='_blank'>导航菜单</a></li>  
  15.                     <li><a href='http://freejs.net/tabbiaoqian.html' target='_blank'>TAB标签</a></li>  
  16.                     <li><a href='' target='_blank'></a></li>  
  17.                     <li><a href='' target='_blank'></a></li>  
  18.                     
  19.                 </ul>  
  20.             </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.             var i = 0;  
  3.             var time = 0;  
  4.             $("#box").hover(function() {  
  5.                 $(".prev").fadeIn(300);  
  6.             }, function() {  
  7.                 $(".prev").fadeOut(300);  
  8.             })  
  9.             $("#box").hover(function() {  
  10.                 $(".next").fadeIn(300);  
  11.             }, function() {  
  12.                 $(".next").fadeOut(300);  
  13.             })  
  14.             $(".nav ul li").hover(function() {  
  15.                 i = $(this).index();  
  16.                 $(".con ul li").eq(i).fadeIn(100).siblings().fadeOut(100);  
  17.                 $(this).addClass("bg").siblings().removeClass("bg");  
  18.                 clearInterval(time);  
  19.             }, function() {  
  20.                 time = setInterval("junmper()", 3000);  
  21.             })  
  22.             $(".prev").click(function() {  
  23.                 i--;  
  24.                 if (i < 0)  
  25.                     i = 3;  
  26.                 $(".con ul li").eq(i).fadeIn(100).siblings().fadeOut(100);  
  27.                 $(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg");  
  28.             })  
  29.             $(".next").click(function() {  
  30.                 i++;  
  31.                 if (i > 3)  
  32.                     i = 0;  
  33.                 $(".con ul li").eq(i).fadeIn(100).siblings().fadeOut(100);  
  34.                 $(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg");  
  35.             })  
  36.             $(".prev").hover(function() {  
  37.                 clearInterval(time);  
  38.             }, function() {  
  39.                 time = setInterval("junmper()", 3000);  
  40.             })  
  41.             $(".next").hover(function() {  
  42.                 clearInterval(time);  
  43.             }, function() {  
  44.                 time = setInterval("junmper()", 3000);  
  45.             })  
  46.             function junmper() {  
  47.                 i++;  
  48.                 if (i > 3)  
  49.                     i = 0;  
  50.                 $(".con ul li").eq(i).fadeIn(100).siblings().fadeOut(100);  
  51.                 $(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg");  
  52.             }  
  53.             time = setInterval("junmper()", 3000);  
  54.         </script>  

 


原文地址:http://www.freejs.net/article_jiaodiantu_558.html