作为一个想从事后台开发的人,我心里倒并不是排斥学习其前端,我自己也很喜欢web前端,只不过现在前端发展速度较快,我有点目不暇接了,我对web前端的印象还停留在html+css+div+js+jquery上,但是目前前端的发展,各种框架的出现以及node.js的出现,前台后台的界限已经模糊了好多,js一套语法可以实现前后台,各种听没听过的前台框架见没见过的前台框架如雨后春笋版涌出,而且自己去看了github上的star一千多以上的web开源框架,我发现我连语法都读不懂了,好累.所以还是要学习啊
简单实现jquery轮播图
思想:使用jquery动画实现改变ul的margin-left属性,代码如下:
<!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>轮播图</title>
</head>
<script src="jquery-1.12.4.js"></script>
<style>
*{margin:0;
padding:0;
}
body{
background:#000;
}
#container{
position:absolute;
margin-left:40%;
}
.banner {
position: relative;
width:300px;
overflow:hidden;
}
.banner ul{
width:1800px;
height:200px;
}
.banner li { list-style: none; }
.banner ul li { float: left; }
.banner ul li img{
width:300px;
height:200px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var len=$("ul li").length;
//需要注意的是,ul宽度必须是所有图片的宽度之和,而且banner的宽度为单个图片的宽度,超出隐藏
//var nextEnd=-$("img")[0].css("width");
//alert($("ul").css("width"));
//alert(nextEnd);
function getWidth(id){//获取width值
var widthPx=$(id).css("width");
return widthPx.replace(/[^0-9]/ig,"");
}
//计算向前轮播的界限值
var imgWidth=$("img").css("width");
var nextEnd=(getWidth("img")-getWidth("ul"))+"px";
alert(nextEnd);
$('#next').click(function(){
// $("p").text("margin-left------:"+$("ul").css("margin-left")
//显示margin-left
// );
if($("ul").css("margin-left")==nextEnd){//已经到最后一张时,
alert("已经是最后一张了")
}else{
$("ul").animate({"margin-left":"-="+imgWidth
},"slow");
}
});
$('#pre').click(function(){
// $("p").text("margin-left------:"+$("ul").css("margin-left"));
if($("ul").css("margin-left")=="0px"){
alert("已经是第一张了")
}else{
$("ul").animate({"margin-left":"+="+imgWidth
},"slow");
}
});
}
</script>
<body>
<div id="container">
<a href="#" id="pre">上一张</a>
<div class="banner">
<ul>
<li><img src="images/meinv (1).jpg" /></li>
<li><img src="images/meinv (2).jpg" /></li>
<li><img src="images/meinv (3).jpg" /></li>
<li><img src="images/meinv (4).jpeg" /></li>
<li><img src="images/meinv (5).jpg" /></li>
<li><img src="images/meinv (6).jpg" /></li>
</ul>
</div>
<a href="#" id="next">下一张</a>
<p style="display:block;width:200px;height:50px;background-color:#FFF;"></p>
<div>
</body>
</html>