刚开始学习JQ，试着自己写了一个轮播图。
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播效果图</title>
<script type="text/javascript" src='jquery-3.1.1.min.js'></script>
<body>
<div id="banner">
<ul>
<li><a href="跳转的地址" target="_blank"></a></li>
<li><a href="跳转的地址" target="_blank"></a></li>
<li><a href="跳转的地址" target="_blank"></a></li>
</ul>
<span class="b-btn left"><</span>
<span class="b-btn right">></span>
</div>
</body>
</html>
CSS部分
*{margin: 0;padding: 0;}
#banner{
margin: 0 auto;
background: #ebebeb;
width: 600px;
height: 300px;
}
#banner ul{
position: absolute;
width: 600px;
height: 300px;
overflow: hidden;
}
#banner li{
display: none;
}
#banner img{
width: 600px;
height: 300px;
}
#banner .b-btn{
display: inline-block;
height: 300px;
width: 100px;
font: 70px/300px '微软雅黑';
text-align: center;
color: #8B7B8B;
opacity: 0.2;
/*防止双击的时候出现蓝底*/
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
#banner .b-btn:hover{
background: #cdc1c5;
color: #f8f8ff;
opacity: 0.5;
cursor: pointer;
}
#banner .right{
float: right;
}
JS部分
var time;
var num=$('#banner li').length;
var b_num=1;
//初始设置显示第一张轮播图
$('#banner li').eq(0).show();
//轮播图自动切换
function bannerMove(){
time=setInterval(function(){
//轮播图淡入淡出
$('#banner li').eq(b_num%num).fadeIn(500).siblings('li').fadeOut(200);
b_num++;
},3000)
};
bannerMove();//开始自动轮播
//鼠标移入图片和左右按钮时停止自动播放
$('#banner li,#banner .right,#banner .left').mouseover(function(){
clearInterval(time)
});
//鼠标移出图片和左右按钮时开始自动播放
$('#banner li,#banner .right,#banner .left').mouseout(function(){
bannerMove()
});
//点击右键切换图片
$('#banner .right').click(function(){
$('#banner li').eq(b_num%num).fadeIn(500).siblings('li').fadeOut(200);
b_num++;
})
//点击左键切换图片
$('#banner .left').click(function(){
if (b_num%num==0) {
b_num=3;
}
$('#banner li').eq(b_num-2%num).fadeIn(500).siblings('li').fadeOut(200);
b_num--;
});
希望大家能够多多指出错误和不够完善的地方，谢谢。
网友评论