jQuery实现的淡入淡出图片轮播效果示例
程序员文章站
2023-11-06 16:58:10
本文实例讲述了jquery实现的淡入淡出图片轮播效果。分享给大家供大家参考，具体如下：
1.html 框架搭建（css代码里宽高的大小与图片的大小一致）
css部分：...
本文实例讲述了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程序设计有所帮助。
下一篇： 减肥餐，看了你是不是立马感觉离瘦不远了?