使用jQuery怎么实现一个淡入淡出图片轮播效果
这篇文章给大家介绍使用jQuery怎么实现一个淡入淡出图片轮播效果，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
创新互联公司是一家网站设计制作、网站制作，提供网页设计，网站设计，网站制作，建网站，按需网站策划，网站开发公司，从2013年开始是互联行业建设者，服务者。以提升客户品牌价值为核心业务，全程参与项目的网站策划设计制作，前端开发，后台程序制作以及后期项目运营并提出专业建议和思路。
jquery是什么
jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。
1.HTML 框架搭建（css代码里宽高的大小与图片的大小一致）
css部分：
HTML部分：
<
>
juery代码实现图片的自动轮播和 手动轮播效果
$(function() {
//代码初始化
var size=$(".img li").size();
for (var i = 1; i <= size; i++) {
var li=""+i+"";
$(".num").append(li);
};
//手动控制轮播效果
$(".img li").eq(0).show();
$(".num li").eq(0).addClass("active");
$(".num li").mouseover(function() {
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index();
i=index;
$(".img li").eq(index).fadeIn(300).siblings().fadeOut(300);
})
//自动
var i = 0;
var t = setInterval(move, 1500);
//核心向左的函数
function moveLeft() {
i--;
if (i == -1) {
i = size-1;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
}
//核心向右的函数
function move() {
i++;
if (i == size) {
i = 0;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
}
//定时器的开始与结束
$(".out").hover(function() {
clearInterval(t);
}, function() {
t = setInterval(move, 1500)
})
//左边按钮的点击事件
$(".out .left").click(function() {
moveLeft();
})
//右边按钮的点击事件
$(".out .right").click(function() {
move();
})
})
这里使用本站演示图片，构建完整代码如下：
www.jb51.net jQuery淡入淡出轮播图
<
