web前端复习(一):jquery实现轮播

时间：2021-11-04 21:59:30

作为一个想从事后台开发的人,我心里倒并不是排斥学习其前端,我自己也很喜欢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>

注意:ul的宽度最好所有img宽度之和,而且容器的宽度为一个img的宽度,overflow:hidden

bug:不要点击过快,由于实现jquery的动画属性设置了slow,点击过快会导致bug

效果:

web前端复习(一):jquery实现轮播

标签：

相关文章