标签：
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 }
标签：
原文地址：http://www.cnblogs.com/zjf-1992/p/5400103.html
