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> <ul> <li> <a href="# " > <img src="image/1.jpg " alt=" "> </a> </li> <li> <a href="# " > <img src="image/2.jpg " alt=" "> </a> </li> <li> <a href="# " > <img src="image/3.jpg " alt=" "> </a> </li> <li> <a href="# " > <img src="image/4.jpg " alt=" "> </a> </li> <li> <a href="# " > <img src="image/5.jpg " alt=" "> </a> </li> </ul> <ul> </ul> <div> <</div> <div>></div> </div> </body>
juery代码实现图片的自动轮播和 手动轮播效果
<script type="text/javascript" src="https://www.jb51.net/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> 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> <ul> <li> <a href="# " > <img src="https://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="# " > <img src="https://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="# " > <img src="https://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="# " > <img src="https://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg" alt=" "> </a> </li> <li> <a href="# " > <img src="https://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg" alt=" "> </a> </li> </ul> <ul> </ul> <div> <</div> <div>></div> </div> <script src="https://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代码运行工具：测试，可获得如下运行效果：
