返回
基础
分类

图形轮播器&lt

日期: 2019-11-20 23:41 浏览次数 : 50

jQuery个性化图片轮播效果,jquery个性化图片

jQuery个性化图片轮播效果

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

必赢手机登录网址 1必赢手机登录网址 2

必赢手机登录网址 ,思路说明:

每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始

  两个区域:

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

     选项卡区域

  两个事件:

      鼠标悬浮或鼠标划入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 }

jQuery个性化图片轮播效果 购物产品展示:图片轮播器效果如下所示 思路说明: 每隔一段时间,...