本文实例为大家分享了jQuery图片轮播效果,2757com图片轮播器&lt

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

jQuery个性化图片轮播效果

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

2757com 12757com 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个性化图片轮播效果 购物产品展示:图片轮播器效果如下所示 思路说明:
每隔一段时间,…

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

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

 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图片轮播效果,非常棒jquery图片

本文实例为大家分享了jQuery图片轮播效果,很个性,具体内容如下

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

2757com 3

思路说明:

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

两个区域:

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

     选项卡区域

两个事件:

      鼠标悬浮或鼠标划入mouseover

      鼠标离开mouseleave

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



#jnImageroll{
 width:550px; 
 height:321px;
 overflow: hidden;
 position: relative;
}
#jnImageroll img{
 position: absolute; 
 left: 0; 
 top: 0;
}
#jnImageroll div{
 position: absolute;
 left: 0; 
 bottom: 0;
}

#jnImageroll div a{
 width: 79px;
 background: #444444;
 float: left;
 display: inline-block;
 margin-right: 1px;
 text-align: center;
 padding: 5px 15px;
 text-decoration: none;
 color: #FFFFFF;
 font: 14px/1.5 tahoma,arial;
}
#jnImageroll div a em{
 display: block;/*将行内元素变成块级元素*/
 height: 19px;
 overflow: hidden;
}
#jnImageroll a.chos {
 background: #37A7D7;
 color: #FFFFFF;
}

/* 首页大屏广告效果 */
$(function(){
 var $imgrolls = $("#jnImageroll div a");//选项卡区域
 $imgrolls.css("opacity","0.7"); //设置选项卡透明度
 var len = $imgrolls.length;
 var index = 0;
 var adTimer = null;
 //选项卡的鼠标悬浮、离开调用函数
 $imgrolls.mouseover(function(){
  index = $imgrolls.index(this);
  showImg(index);
 }).eq(0).mouseover(); 

 //滑入 停止动画,滑出开始动画.
 $('#jnImageroll').hover(function(){
   if(adTimer){ 
    clearInterval(adTimer);
   }
   },function(){
   adTimer = setInterval(function(){
    showImg(index);
    index++;
    if(index==len){index=0;}
   } , 5000);
 }).trigger("mouseleave");
})
//显示不同的幻灯片
function showImg(index){
 var $rollobj = $("#jnImageroll");
 var $rolllist = $rollobj.find("div a");
 var newhref = $rolllist.eq(index).attr("href");
 $("#JS_imgWrap").attr("href",newhref)
    .find("img").eq(index).stop(true,true).fadeIn().siblings().fadeOut();
 $rolllist.removeClass("chos").css("opacity","0.7")
    .eq(index).addClass("chos").css("opacity","1"); 
}

以上就是很有个性的jQuery图片轮播效果,希望大家喜欢。

本文实例为大家分享了jQuery图片轮播效果,很个性,具体内容如下
购物产品展示:图片轮播…

     选项卡区域

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

  
   鼠标离开mouseleave,动画开始

2757com 4

京东商城商品淡入淡出特效实现   

作者:Avenstar

      鼠标离开mouseleave

代码如下:

关于作者:专注于前端开发

以上就是很有个性的jQuery图片轮播效果,希望大家喜欢。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章