购物产品展示：图片轮播器<效果如下所示>
思路说明：
每隔一段时间，实现图片的自动切换及选项卡选中效果
两个区域：
最外层容器区域，如上图红色线框矩形
选项卡区域
两个事件：
鼠标悬浮或鼠标划入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 }
时间： 2024-07-30 20:14:35