本文实例讲述了jQuery实现的淡入淡出图片轮播效果。分享给大家供大家参考，具体如下：
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>使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试，可获得如下运行效果：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery图片操作技巧大全》、《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
Peter-Zhu
大家讲道理
