Question

jq图片切换问题，想要把滚动改为淡入淡出，求代码！

$(function(){
var sWidth = $("#slider_name").width();
var len = $("#slider_name .silder_panel").length;
var index = 0;
var picTimer;

var btn = "<a class='prev'>Prev</a><a class='next'>Next</a>";
$("#slider_name").append(btn);

$("#slider_name .silder_nav li").css({"opacity":"0.6","filter":"alpha(opacity=60)"}).mouseenter(function() {
index = $("#slider_name .silder_nav li").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");

$("#slider_name").hover(function(){
$("#slider_name .prev,#slider_name .next").stop(true,false).animate({"opacity":"0.2","filter":"alpha(opacity=20)"},300);
},function() {
$("#slider_name .prev,#slider_name .next").stop(true,false).animate({"opacity":"0","filter":"alpha(opacity=0)"},300);
});

$("#slider_name .prev,#slider_name .next").css({"opacity":"0","filter":"alpha(opacity=0)"}).hover(function(){
$(this).stop(true,false).animate({"opacity":"0.5","filter":"alpha(opacity=50)"},300);
},function() {
$(this).stop(true,false).animate({"opacity":"0","filter":"alpha(opacity=0)"},300);
});

// Prev
$("#slider_name .prev").click(function() {
index -= 1;
if(index == -1) {index = len - 1;}
showPics(index);
});

// Next
$("#slider_name .next").click(function() {
index += 1;
if(index == len) {index = 0;}
showPics(index);
});

//
$("#slider_name .silder_con").css("width",sWidth * (len));

// mouse
$("#slider_name").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if(index == len) {index = 0;}
},3000);
}).trigger("mouseleave");

// showPics
function showPics(index) {
var nowLeft = -index*sWidth;
$("#slider_name .silder_con").stop(true,false).animate({"left":nowLeft},300);
$("#slider_name .silder_nav li").removeClass("current").eq(index).addClass("current");
$("#slider_name .silder_nav li").stop(true,false).animate({"opacity":"0.5"},300).eq(index).stop(true,false).animate({"opacity":"1"},300);
}
});

其中要求.silder_panel这个class淡入淡出效果。现在是轮换，求高手修改代码~急~成功后继续追加分数。十分感谢

Answer 1

给你写了个jquery的 需要手动加载jquery插件

=======================js部分===========================
<script>
$(function(){
i=0;
n=$(".box").children().length;
time=setInterval("xianyin()",10000);//设置自动播放时间一万毫秒（10秒）
//time=window.clearInterval(time);//清除自动播放
})
function xianyin() {
i=i+1;
//alert(i);
$(".box li").hide();
$(".box li:eq("+i+")").fadeIn(500);//设置透明度变化快慢为500毫秒，删除这个数字即无透明度变化效果
if(i==n-1){
i=-1;
}

}
</script>

=======================css部分===========================

<style>
.box {
position:relative;
}
.box>li {
display:none;
}
</style>

=======================html部分===========================

<div class="box">
<li style="display:block;">1<img src="1.jpg" /></li>
<li>2<img src="2.jpg" /></li>
<li>3<img src="3.jpg" /></li>
<li>4<img src="4.jpg" /></li>
<li>5<img src="5.jpg" /></li>
</div>

Answer 2

去懒人资源库搜一下 很多很好的资源，