jQuery仿商城橱窗位广告代码

2018/8/15 16:29:40 人评论次

用法简介：文件引用：<script type="text/javascript"> $(document).ready(function() { //鼠标悬停在左侧li上时，对应的中间图片要进行显示 $("#left > li").mouseover(function() { //对应的中间图片显示 //索引值对…

文件引用：

<script type="text/javascript">
$(document).ready(function() {
    //鼠标悬停在左侧li上时，对应的中间图片要进行显示
    $("#left > li").mouseover(function() {
        //对应的中间图片显示
        //索引值对应
        //把当前悬停在li索引进行保存
        var indexLi = $(this).index();
        //console.log(indexLi);

        //对应图片显示，其他图片隐藏
        //$("#center > li:eq(" +  indexLi + ")").show();
        //$("#center > li:eq(" +  indexLi + ")").siblings().hide();

        //链式编程
        $("#center > li:eq(" + indexLi + ")").show().siblings().hide();

        //第二点：$("li:eq()") 过滤选择器  eq()方法
        $("#center > li").eq(indexLi).show().siblings().hide();

    });


    //右侧 
    $("#right > li").mouseover(function() {
        //对应的中间图片显示
        //索引值对应
        //把当前悬停在li索引进行保存
        var indexLi = $(this).index();
        //console.log(indexLi);

        //对应图片显示，其他图片隐藏
        //$("#center > li:eq(" +  indexLi + ")").show();
        //$("#center > li:eq(" +  indexLi + ")").siblings().hide();

        //链式编程
        //$("#center > li:eq(" +  indexLi + ")").show().siblings().hide();

        //第二点：$("li:eq()") 过滤选择器  eq()方法
        $("#center > li").eq(indexLi + 9).show().siblings().hide();

    });

});
</script>