1.jquery实现图片或层的自动轮换方法步骤:
创建一个文件可以命名为div_change.php,文件的内容如下所示:
$(function(){
$("#item li:not(:first)").css("display","none");//只显示第一张图片,其它隐藏
var bb = $("#item li:last");
var aa = $("#item li:first");
var intval=setInterval(function(){
if(bb.is(":visible")){
aa.fadeIn(1000).addClass("in");
bb.hide();
}else{
$("#item li:visible").addClass("in");
$("#item li.in").next().fadeIn(1000);
$("#item li.in").hide().removeClass("in");;
}
},4000);
$("#item li").hover(
function(){
clearInterval(intval);
},function(){
intval=setInterval(function(){
if(bb.is(":visible")){
aa.fadeIn(1000).addClass("in");
bb.hide();
}else{
$("#item li:visible").addClass("in");
$("#item li.in").next().fadeIn(1000);
$("#item li.in").hide(1000).removeClass("in");
}
},4000);
})
});
li{list-style:none;display:block;}
.in{display:block;}
一些常用的必备文件已经在压缩包里了,下载地址是:
img_change.rar,点击即可下载了。
2.js实现图片的自动和手动轮换方法:
首先创建一个文件命名为flexslider.php,文件的内容大致如下:
$(window).load(function() {
$('.flexslider').flexslider();
});
$(document).ready(function() {
$('.flexslider').hover(function() {
$('.flex-direction-nav li a.prev').css('display', 'block');
$('.flex-direction-nav li a.next').css('display', 'block');
}, function() {
$('.flex-direction-nav li a.prev').css('display', 'none');
$('.flex-direction-nav li a.next').css('display', 'none');
});
});
一些常用的必备文件已经在压缩包里了,下载地址是:
flexslider.rar,点击下载即可。
本文内容仅供参考,可根据你的需要进行适当的修改。。
阅读(1167) | 评论(0) | 转发(0) |