jQuery实现的轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入淡出</title>
<style>
body,ul,li,a {
margin:0;
padding: 0;
list-style-type: none;
text-decoration: none;
}
.div1 {
width: 592px;
height: 472px;
position: relative;
border: 1px solid green;
margin: 0 auto;
}
/* 图片 start */
.div1 .pic ul li {
width: 590px;
height: 470px;
float:left;
position: absolute;
left:0;
top:0;
display: none;
}
/* 图片 end */
/* 小圆点start */
.div1 .btn-bot {
width: 500px;
height: 20px;
position: absolute;
left: 20%;
bottom: 15px;
}
.div1 .btn-bot span {
display: inline-block;
width: 8px;
height: 8px;
border: 2px solid white;
border-radius: 8px;
cursor: pointer;
}
span.active {
width: 10px;
height: 10px;
background-color: white;
}
/* 小圆点end
/* 左右键 start */
.btn-LR .le,.ri {
width: 25px;
height: 40px;
position: absolute;
top: 50%;
margin-top: -20px;
background-color: white;
opacity: 0.3;
cursor: pointer;
text-align: center;
line-height: 40px;
}
.btn-LR .le{
left: 0;
float: left;
}
.btn-LR .ri {
right: 0;
float: right;
}
/* 左右键 end */
</style>
<script src="public/jquery.min.js"></script>
<script>
$(function()
{
var $index = null;
// 初始化
$('.div1 .btn-bot span').first().addClass('active').siblings('span').removeClass('active');
$('.div1 .pic ul li').first().show();
/**************************************/
// 函数
// 向右走
function riMar ()
{
$index++; // 向右索引++
if($index > 7)
{
$index = 0;
}
$('.div1 .btn-bot span').eq($index).addClass('active').siblings('span').removeClass('active');
$('.div1 .pic ul li').eq($index).fadeIn().siblings('li').fadeOut(); // 以索引值对应的图片淡入,其余的淡出
}
// 向左走
function leMar ()
{
$index--; // 向左索引--
if ($index < 0)
{
$index = 7;
}
$('.div1 .btn-bot span').eq($index).addClass('active').siblings('span').removeClass('active');
$('.div1 .pic ul li').eq($index).fadeIn().siblings('li').fadeOut(); // 以索引值对应的图片淡入,其余的淡出
}
// 小圆点移入事件
function circleBtn() // 添加单击事件
{
$index = $(this).index(); // 小点的索引
$(this).addClass('active').siblings('span').removeClass('active');
$('.div1 .pic ul li').eq($index).fadeIn().siblings('li').fadeOut(); // 相关连的图片淡入时,其他图片淡出
}
/************************************/
/*************功能***************/
// 鼠标移入控制
$('.div1 .btn-bot span').mouseenter(circleBtn);
// 左键控制
$('.div1 .btn-LR .le').click(leMar);
// 右键控制
$('.div1 .btn-LR .ri').click(riMar);
// 定时器控制
var t = setInterval(riMar,2000);
// 鼠标移进图片停止
$('.div1 .pic ul li').mouseenter(function()
{
clearInterval(t);
});
// 鼠标移出图片播放
$('.div1 .pic ul li').mouseleave(function()
{
t = setInterval(riMar,2000);
});
});
</script>
</head>
<body>
<div class="div1">
<div class="pic">
<ul>
<li><a href="#" target="_blank"><img src="imgs/5add8464N9c52e077.jpg" alt=""></a></li>
<li><a href="#" target="_blank"><img src="imgs/5b3b4b38N9dffcd0e.jpg" alt=""></a></li>
<li><a href="#" target="_blank"><img src="imgs/5b3b4333N744b6569.jpg" alt=""></a></li>
<li><a href="#" target="_blank"><img src="imgs/5b3decccN3c3f598e.jpg" alt=""></a></li>
<li><a href="#" target="_blank"><img src="imgs/5b15dff1N8fec67b1.jpg" alt=""></a></li>
<li><a href="#" target="_blank"><img src="imgs/5b35c71eN06564f81.jpg" alt=""></a></li>
<li><a href="#" target="_blank"><img src="imgs/5b35ee58Nb0aa81d4.jpg" alt=""></a></li>
<li><a href="#" target="_blank"><img src="imgs/5b359609Ne8307b0f.jpg" alt=""></a></li>
</ul>
</div>
<div class="btn-bot">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="btn-LR">
<div class="le"><</div>
<div class="ri">></div>
</div>
</div>
</body>
</html>