jQuery实现的淡入淡出图片轮播效果示例

来源：动视网责编：小采时间：2020-11-27 22:08:57

jQuery实现的淡入淡出图片轮播效果示例

jQuery实现的淡入淡出图片轮播效果示例:本文实例讲述了jQuery实现的淡入淡出图片轮播效果。分享给大家供大家参考，具体如下： 1.HTML 框架搭建（css代码里宽高的大小与图片的大小一致） css部分： <style> * { padding: 0; margin:0; } ul { list-style: none;

推荐度：

点击下载本文 文档为doc格式

导读jQuery实现的淡入淡出图片轮播效果示例:本文实例讲述了jQuery实现的淡入淡出图片轮播效果。分享给大家供大家参考，具体如下： 1.HTML 框架搭建（css代码里宽高的大小与图片的大小一致） css部分： <style> * { padding: 0; margin:0; } ul { list-style: none;

本文实例讲述了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 "  ">
 </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 "  ">
 </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 "  ">
 </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 "  ">
 </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 "  ">
 </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.gxlcms.com 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"  ">
 </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"  ">
 </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"  ">
 </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"  ">
 </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"  ">
 </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程序设计有所帮助。

jQuery实现的淡入淡出图片轮播效果示例

推荐度：

点击下载本文 文档为doc格式

标签：实现代码效果

热门焦点

jQuery实现的淡入淡出图片轮播效果示例

jQuery实现的淡入淡出图片轮播效果示例

jQuery实现的淡入淡出图片轮播效果示例

最新推荐

猜你喜欢

热门推荐