爱玩科技网

全部频道

您的当前位置：首页JQuery图片滚动轮播示例代码_jquery

JQuery图片滚动轮播示例代码_jquery

来源：爱玩科技网
 完整的项目在附件中
代码如下:



图片切换


var num = 0
$(function(){
$("div ol li").mouseover(function(e){
$(this).attr("class","current");
$(this).siblings().attr("class",""); //兄弟节点的class属性设置为空
//alert($('ul').index())
num = $('ul').index() + 2
var index = $(this).index(); //记录选定的li标签在ul中的索引
//图片会出现层叠现象为了显示当前的图片，把当前的图片的z-index 值设置为大于其他的兄弟元素
$("div ul li").eq(index).css({"left":"650px","zIndex":num})
$("div ul li").eq(index).siblings().css("zIndex",num-1);
//动画效果，图片从右侧飞入
$("div ul li").eq(index).animate({left:"0"},500)

});

});












    1. 1

    2. 2

    3. 3

    4. 4
    显示全文