jquery里面应用轮播图

 在使用前要注意jquery的包要导入js中并在jsp或html页面进行正确的引用
--------------------jsp页面的内容-----------------------------------
<!-- 大屏广告 start -->
        <div id="jnImageroll">
            <a href="#nogo" id="JS_imgWrap">
                <img src="images/ads/1.jpg" alt="相约情人节"/>
                <img src="images/ads/2.jpg" alt="新款上线"/>
                <img src="images/ads/3.jpg" alt="愤怒小鸟特卖"/>
                <img src="images/ads/4.jpg" alt="男鞋促销第一波"/>
                <img src="images/ads/5.jpg" alt="春季新品发布"/>
            </a>
            <div>
                <a href="###1"><em>相约情人节</em><em>全场119元起</em></a>
                <a href="###2"><em>新款上线</em><em>全场357元起</em></a>
                <a href="###3"><em>愤怒小鸟特卖</em><em>全场89元</em></a>
                <a href="###4"><em>男鞋促销第一波</em><em>全场3.1折起</em></a>
                <a href="###5" class="last"><em>春季新品发布</em><em>全场4.1折起</em></a>
            </div>
        </div>
        <!-- 大屏广告 end -->
---------------------------------js里面的内容----------------------------
$(function(){//自执行函数
//找到超链接并建立一个jquery对象
var $jnImageroll = $("#jnImageroll div a");
// 将超连接虚化知识点.css("opacity","0到1之间，1表示没有虚化0表示透明")
$jnImageroll.css("opacity","0.7");
//定义一个变量

var index = 0;

var adTime = null;
var len = $jnImageroll.length;

//超连接经过时调用函数知识点 mouseover：鼠标经过时
$jnImageroll.mouseover(function(){
//获取当前的索引值赋值给showImg(index);函数
index = $jnImageroll.index(this);
showImg(index);

})

//$("#jnImageroll").hover(鼠标在上的执行的函数，鼠标离开执行的函数）

//.trigger("mouseleave"),让函数刷新页面时就开始执行

 $("#jnImageroll").hover(function(){
if(adTime){

clearInterval(adTime);
}
     },function(){
adTiome = setInterval(function(){
showImg(index);
index++;
if(index==len){
index=0;
}
  },1000);
    }).trigger("mouseleave");

})
function showImg(index){


//获取到最外层的div
//var $rollobj = $("#jnImageroll");
//查找到$rollobj 下div所有的a
//var $rolllist = $rollobj. find("div a");
//上面的$rolllist和$jnImageroll是相同的
      //var newhref = $jnImageroll.eq(index).attr("href");




//获取img的jquery对象
    var $JS_imgWrap = $("#JS_imgWrap img");
//$JS_imgWrap.eq(index)表示索引值是index的img。.fadeIn()表示显示。.siblings()表示其他的
//.fadeOut()表示隐藏
    $JS_imgWrap.eq(index) .fadeIn().siblings().fadeOut();
 //获取超链接的jquery对象
    var $jnImageroll = $("#jnImageroll div a");
//$jnImageroll.removeClass("chos").css("opacity","0.7")表示超链接全部取消class（chos）透明度0.7
//.eq(index).addClass("chos").css("opacity","1");表示索引值为index的超链接增加class（chos）透明度为1

   $jnImageroll.removeClass("chos").css("opacity","0.7").eq(index).addClass("chos").css("opacity","1");

}