jquery实现京东轮播图的简单写法
时间：04-05来源：作者：点击数：
今天来写一个轮播图的案例，之前的博客中是有写过的，不过都是通过原生js来写的，比较复杂一些，今天来通过jquary的简单几句代码就可以实现这个轮播图效果。来看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{ margin:0; padding:0;}
ul,li{list-style: none;}
a{text-decoration: none;}
.box{ width:720px; height:340px; margin:0 auto;position:relative;}
.box ul{ width:720px; height:340px;}
.box ul li{position: absolute;z-index: 101;width:720px; height:340px;display: none;}
.box ul li:first-child{display: block}
.box ul li img{border:0;width:100%;height:100%}
.arrLeft,.arrRight{position:absolute;top:50%;margin-top:-30px;color:#333;font-size:50px;z-index: 999}
.arrRight{right:5px}
.arrLeft{left:5px;}
</style>
<body>
<div class="box">
<ul>
<li><img src="img/pic1.jpg"/></li>
<li><img src="img/pic2.jpg"/></li>
<li><img src="img/pic3.jpg"/></li>
<li><img src="img/pic4.jpg"/></li>
</ul>
<div class="arrow">
<a href="javascript:void(0)" class="arrLeft"> < </a>
<a href="javascript:void(0)" class="arrRight"> > </a>
</div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
var num=0;
$(".arrRight").click(function(){
var liLength = $("li").length;
num++;
if(num==liLength){
num=0;
}
$(".box li").eq(num).fadeIn().siblings().fadeOut();
});
$(".arrLeft").click(function(){
var liLength = $("li").length;
num--;
if(num==-1){
num=liLength-1;
}
$(".box li").eq(num).fadeIn().siblings().fadeOut();
})
})
</script>
</body>
</html>
效果图如下：
当然我的布局比较简单，用在项目中的时候可以稍微更改修饰一下即可。
好了，今天就到这里！
方便获取更多学习、工作、生活信息请关注本站微信公众号
上一篇:jq几句代码实现返回顶部效果
下一篇:jquery实现点击小图实现大图的案例
湘公网安备 43102202000103号