jQuery轮播图2
另一种的轮播图
jQuery实现轮播图2（运动）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无逢滚动</title>
<style>
body,ul,li,a,img {
margin:0;
padding:0;
list-style-type:none;
}
.container {
width:1200px;
position: relative;
border: 1px solid green;
overflow: hidden;
margin: 20px auto;
}
/* 图片 */
.container .pic {
width: 6000px;
}
.container .pic ul li {
width: 1200px;
height: 338px;
float:left;
}
.container .pic ul li a img { /* 图片太大才设置的样式，配合止面的li样式使用 */
width: auto;
height: auto;
max-width: 100%;
max-height: 111%;
}
/* 小点 */
.container .btn {
width: 500px;
height: 20px;
position: absolute;
bottom: 20px;
left: 50%;
}
.container .btn span {
display: inline-block;
width: 15px;
height:15px;
border: 2px solid white;
border-radius: 15px;
opacity: 0.4;
cursor: pointer;
}
span.active {
width: 15px;
height: 15px;
background-color: white;
opacity: 1!important;
}
</style>
<script src="public/jquery.min.js"></script>
<script>
$(function()
{
var index = null; // 索引值
var widCon = $('.container').width(); // 容器的宽度，不带border
var marLe = null; // 移动的距离
// 初始化
$('.container .btn span').first().addClass('active').siblings('span').removeClass('active'); // 默认第一个
$('.container .pic').animate( // 默认的left值是0
{
'marginLeft':0 + 'px'
});
// 小圆点控制
$('.container .btn span').click(function() // 单击事件
{
index = $(this).index(); // 记录被点击的按键索引
marLe = index*widCon; // 每次点击时移动的距离
$(this).addClass('active').siblings('span').removeClass('active'); // 为按键添加和删除类
$('.container .pic').animate( // 图片运动
{
'marginLeft': -marLe + 'px'
});
});
/********************** 函数 ********************/
function riMove()
{
index++; // 向右移动索引++
if (index > 4) // 如果索引大于4，就赋值为0,回到第一张图片
{
index = 0;
marLe = 0;
}
marLe = index * widCon; // 每次运动的距离
$('.container .btn span').eq(index).addClass('active').siblings('span').removeClass('active'); // 每次运动都为span设置相应的类
$('.container .pic').animate( //运动
{
'marginLeft': -marLe + 'px'
});
}
/***********************************************/
// 定时器控制
var t = setInterval(riMove,2000); // 鼠标移入停止运动
$('.container .pic ul li').mouseenter(function()
{
clearInterval(t);
});
// 鼠标移出继续运动
$('.container .pic ul li').mouseleave(function()
{
t = setInterval(riMove,2000);
});
})
</script>
</head>
<body>
<div class="container">
<!-- 图片 start -->
<div class="pic">
<ul>
<li><a href="#" target="_blank"><img src="imgs/gaitubao_com_15128001664643_8vzp.jpg" alt=""></a></li>
<li><a href="#" target="_blank"><img src="imgs/banner1_qcmq.jpg" alt=""></a></li>
<li><a href="#" target="_blank"><img src="imgs/banner1_2bsu.jpg" alt=""></a></li>
<li><a href="#" target="_blank"><img src="imgs/banner_o0ak.jpg" alt=""></a></li>
<li><a href="#" target="_blank"><img src="imgs/07dn.jpg" alt=""></a></li>
</ul>
</div>
<!-- 图片 end -->
<!-- 按钮 start -->
<div class="btn">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!-- 按钮 end -->
</div>
</body>
</html>