jQuery个性化图片轮播效果
jQuery个性化图片轮播效果
购物产品展示：图片轮播器<效果如下所示>
思路说明：
每隔一段时间，实现图片的自动切换及选项卡选中效果，鼠标划入图片动画停止，划出或离开动画开始
两个区域：
最外层容器区域，如上图红色线框矩形
选项卡区域
两个事件：
鼠标悬浮或鼠标划入mouseover，动画结束
鼠标离开mouseleave，动画开始
代码如下：
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 }
京东商城商品淡入淡出特效实现 http://pan.baidu.com/s/1c2FMzCk
