这篇文章给大家介绍使用jQuery怎么实现一个淡入淡出图片轮播效果，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。
1.HTML 框架搭建（css代码里宽高的大小与图片的大小一致）
css部分：
<style>
* {
padding: 0;
margin:0;
}
ul {
list-style: none;
}
.out {
width: 640px;
height: 270px;
margin:50px auto;
position: relative;
}
.out img{
width: 640px;
height: 270px;
}
.out .img li {
position: absolute;
left:0;
top:0;
display: none;
}
.out .num {
position: absolute;
bottom: 20px;
left: 0;
font-size:0px;
text-align:center;
width: 100%;
}
.out .num li {
width: 20px;
height: 20px;
line-height:20px;
border-radius:50%;
background:#666;
color: #fff;
text-align:center;
display: inline-block;
font-size:16px;
margin:0 3px;
cursor: pointer;
}
.out .num li.active {
background:#a00;
}
.out .btn {
position:absolute;
top: 50%;
margin-top:-30px;
width: 30px;
height: 60px;
line-height:60px;
background:rgba(0, 0, 0, 0.5);
font-size:40px;
color: #fff;
text-align:center;
display: none;
}
.out .left {
left: 0;
}
.out .right {
right: 0;
}
.out:hover .btn {
display: block;
cursor: pointer;
}
</style>HTML部分：
<body> <div class="out "> <ul class="img "> <li> <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="image/1.jpg " alt=" "> </a> </li> <li> <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="image/2.jpg " alt=" "> </a> </li> <li> <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="image/3.jpg " alt=" "> </a> </li> <li> <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="image/4.jpg " alt=" "> </a> </li> <li> <a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="image/5.jpg " alt=" "> </a> </li> </ul> <ul class="num "> </ul> <div class="left btn "> <</div> <div class="right btn ">></div> </div> </body>
juery代码实现图片的自动轮播和 手动轮播效果
<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript">
$(function() {
//代码初始化
var size=$(".img li").size();
for (var i = 1; i <= size; i++) {
var li="<li>"+i+"</li>";
$(".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();
})
})
</script>这里使用本站演示图片，构建完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net jQuery淡入淡出轮播图</title>
<style>
* {
padding: 0;
margin:0;
}
ul {
list-style: none;
}
.out {
width: 640px;
height: 270px;
margin:50px auto;
position: relative;
}
.out .img li {
position: absolute;
left:0;
top:0;
display: none;
}
.out .num {
position: absolute;
bottom: 20px;
left: 0;
font-size:0px;
text-align:center;
width: 100%;
}
.out .num li {
width: 20px;
height: 20px;
line-height:20px;
border-radius:50%;
background:#666;
color: #fff;
text-align:center;
display: inline-block;
font-size:16px;
margin:0 3px;
cursor: pointer;
}
.out .num li.active {
background:#a00;
}
.out .btn {
position:absolute;
top: 50%;
margin-top:-30px;
width: 30px;
height: 60px;
line-height:60px;
background:rgba(0, 0, 0, 0.5);
font-size:40px;
color: #fff;
text-align:center;
display: none;
}
.out .left {
left: 0;
}
.out .right {
right: 0;
}
.out:hover .btn {
display: block;
cursor: pointer;
}
</style>
</head>
<body>
<div class="out ">
<ul class="img ">
<li>
<a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/Guardians-of-the-Galaxy-Poster-High-Res.jpg" alt=" ">
</a>
</li>
<li>
<a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/Blade-Runner-poster-art-Harrison-Ford.jpg" alt=" ">
</a>
</li>
<li>
<a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/2017_alien_covenant_4k-5120x2880-1920x1080.jpg" alt=" ">
</a>
</li>
<li>
<a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg" alt=" ">
</a>
</li>
<li>
<a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg" alt=" ">
</a>
</li>
</ul>
<ul class="num ">
</ul>
<div class="left btn ">
<</div>
<div class="right btn ">></div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//代码初始化
var size=$(".img li").size();
for (var i = 1; i <= size; i++) {
var li="<li>"+i+"</li>";
$(".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();
})
})
</script>
</body>
</html>关于使用jQuery怎么实现一个淡入淡出图片轮播效果就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
