JavaScript

超轻量级php框架startmvc

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

更新时间:2020-07-24 04:42:01 作者:startmvc
本文实例讲述了jQuery实现的淡入淡出图片轮播效果。分享给大家供大家参考,具体如下:1.H

本文实例讲述了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测试,可获得如下运行效果: