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

最新推荐文章于 2025-07-02 18:01:25 发布

都市桃源

最新推荐文章于 2025-07-02 18:01:25 发布

阅读量3.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web 文章标签： java junit spring mvc web开发 jquery

本文链接：https://blog.youkuaiyun.com/do_bset_yourself/article/details/51604253

web 专栏收录该内容

19 篇文章

订阅专栏

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