首页 > Web开发 > 详细

jQuery个性化图片轮播效果

时间:2016-04-17 06:33:07      阅读:344      评论:0      收藏:0      [点我收藏+]

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 }

jQuery个性化图片轮播效果

原文:http://www.cnblogs.com/zjf-1992/p/5400103.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!