你的位置:首页 > Java教程

[Java教程]jQuery个性化图片轮播效果


jQuery个性化图片轮播效果

购物产品展示:图片轮播器<效果如下所示>

思路说明:

每隔一段时间,实现图片的自动切换及选项卡选中效果

  两个区域:

     最外层容器区域,如上图红色线框矩形

     选项卡区域

  两个事件:

      鼠标悬浮或鼠标划入mouseover

      鼠标离开mouseleave


/**大屏广告滚动样式**/
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery个性化图片轮播效果</title> 6 <link rel="stylesheet" href="styles/main.css" type="text/css" /> 7 <script src="js/jquery-2.2.3.min.js" type="text/javascript"></script> 8 <script src="js/imagesScroll.js" type="text/javascript"></script> 9 </head>10 <body>11 <!-- 大屏广告 start -->12 <div id="jnImageroll">13 <a href="#nogo" id="JS_imgWrap">14 <img src="images/ads/1.jpg" alt="相约情人节"/>15 <img src="images/ads/2.jpg" alt="新款上线"/>16 <img src="images/ads/3.jpg" alt="愤怒小鸟特卖"/>17 <img src="images/ads/4.jpg" alt="男鞋促销第一波"/>18 <img src="images/ads/5.jpg" alt="春季新品发布"/>19 </a>20 <div>21 <a href="###1"><em>相约情人节</em><em>全场119元起</em></a>22 <a href="###2"><em>新款上线</em><em>全场357元起</em></a>23 <a href="###3"><em>愤怒小鸟特卖</em><em>全场89元</em></a>24 <a href="###4"><em>男鞋促销第一波</em><em>全场3.1折起</em></a>25 <a href="###5" class="last"><em>春季新品发布</em><em>全场4.1折起</em></a>26 </div>27 </div>28 <!-- 大屏广告 end -->29 </body>30 </html>

 2 #jnImageroll{ 3   width:550px;  4   height:321px; 5   overflow: hidden; 6   position: relative; 7 } 8 #jnImageroll img{ 9   position: absolute; 10   left: 0; 11   top: 0;12 }13 #jnImageroll div{14   position: absolute;15   left: 0; 16   bottom: 0;17 }18 19 #jnImageroll div a{20   width: 79px;21   background: #444444;22   float: left;23   display: inline-block;24   margin-right: 1px;25   text-align: center;26   padding: 5px 15px;27   text-decoration: none;28   color: #FFFFFF;29   font: 14px/1.5 tahoma,arial;30 }31 #jnImageroll div a em{32   display: block;/*将行内元素变成块级元素*/33   height: 19px;34   overflow: hidden;35 }36 #jnImageroll a.chos {37   background: #37A7D7;38   color: #FFFFFF;39 }

 1 /* 首页大屏广告效果 */ 2 $(function(){ 3   var $imgrolls = $("#jnImageroll div a");//选项卡区域 4   $imgrolls.css("opacity","0.7"); //设置选项卡透明度 5   var len = $imgrolls.length; 6   var index = 0; 7   var adTimer = null; 8   //选项卡的鼠标悬浮、离开调用函数 9   $imgrolls.mouseover(function(){10     index = $imgrolls.index(this);11     showImg(index);12   }).eq(0).mouseover();  13   14   //滑入 停止动画,滑出开始动画.15   $('#jnImageroll').hover(function(){16       if(adTimer){ 17         clearInterval(adTimer);18       }19      },function(){20       adTimer = setInterval(function(){21         showImg(index);22         index++;23         if(index==len){index=0;}24       } , 5000);25   }).trigger("mouseleave");26 })27 //显示不同的幻灯片28 function showImg(index){29   var $rollobj = $("#jnImageroll");30   var $rolllist = $rollobj.find("div a");31   var newhref = $rolllist.eq(index).attr("href");32   $("#JS_imgWrap").attr("href",newhref)33       .find("img").eq(index).stop(true,true).fadeIn().siblings().fadeOut();34   $rolllist.removeClass("chos").css("opacity","0.7")35       .eq(index).addClass("chos").css("opacity","1"); 36 }