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

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

思路说明：

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

两个区域：

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

选项卡区域

两个事件：

鼠标悬浮或鼠标划入鼠标悬停

鼠标离开离开事件

/**大屏广告滚动样式**/!DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title jquery个性化图片轮播效果/title link rel='样式表href=' style/main。CSS ' type=' text/CSS '/script src=' http : js/jquery-2。2 .3 .量滴js ' type=' text/JavaScript '/script script src=' http : js/images croll。js ' type=' text/JavaScript '/script/head dy！-大屏广告start-div id=' jimageroll ' a href=' # nogo ' id=' JS _ imgWrap ' img src=' http : images/ads/1。jpg ' alt='相约情人节/img src=' http : images/ads/2。jpg ' alt='新款上线/img src=' http : images/ads/3。jpg ' alt='愤怒小鸟特卖/img src=' http : images/ads/4。jpg ' alt='男鞋促销第一波/img src=' http : images/ads/5。jpg ' alt='春季新品发布//a div a href=' # # 1 '它们相约情人节/emem全场119元起/em/a a href=' # # 2 '他们新款上线/emem全场357元起/em/a a href=' # # 3 '他们愤怒小鸟特卖/emem全场89元/em/a a href=' # # 4 ' em男鞋促销第一波/emem全场3.1折起/em/a a href=' # # 5 ' class=' last ' em春季新品发布/emem全场4.1折起/em/a/div/大屏广告end/body/html

# Jnimageroll { width :550 pxh three :321 px飞越：隐藏；相对位置：} # jimageroll img {位置：绝对值；左： 0；top : 0；} # jimageroll div {绝对位置：左： 0；底部： 0；} # jimageroll div a { width : 79px；背景技术： # 444444;向左浮动：显示器：内联块；右边距： 1px文本对齐：中心；padding: 5px 15px文本装饰：无；color : # fffffffont : 14px/1.5 Tahoma，arial } # jimageroll div a em { display : }块；/*将行内元素变成块级元素*/高度： 19px飞越：隐藏；} # jimageroll a . chos {背景： # 37a 7d 7；color: # FFFFFF}

/* 首页大屏广告效果*/$(function(){ var $ imgrolls=$(' # jimageroll div a ')；//选项卡区域$imgrolls.css('不透明度',' 0.7 ');//设置选项卡透明度var len=$ imgrolls.lengthvar索引=0;var adTimer=null//选项卡的鼠标悬浮、离开调用函数$ imgrolls。将鼠标悬停在(function(){ index=$ imgrolls)上。索引(这个)；showImg(索引);}).等式(0).鼠标悬停在()；//滑入停止动画，滑出开始动画$(' # jimageroll ').hover(function(){ if(adTimer){ clearInterval(adTimer))；} }，function(){ adTimer=setInterval(function(){ show img(index))；指数；if(index==len){ index=0；} } , 5000);}).触发器(“鼠标离开”)；})//显示不同的幻灯片函数show img(index){ var $ roll obj=$(' # jimageroll ')；var $ roll list=$ roll obj。find(' div a ')；var newhref=$rolllist.eq(索引)。attr(' href ')；$('#JS_imgWrap ').attr('href '，newhref).查找(' img ').eq(指数)。停止（真，真)。fadeIn().兄弟姐妹()。淡出()；$rolllist.removeClass('chos ').css(“”不透明度',' 0.7 ')。eq(指数)。addClass('chos ').css(“”不透明度',' 1 ');}以上就是很有个性的框架图片轮播效果，希望大家喜欢。