制作漂亮的轮波图

因为自己的专业主要是Java后端，所以对Jquery是一知半解。所以就参考了一下网上

然后编写了一个简单的轮波图下面来演示一下代码

这个是body标签里面的页面内容

   

   
• 

   
• 

   
• 

   
• 

   
• 

   
• 

   

   

    哼
    我
    是
    最
    可
    爱
   

 

这是css样式，设计出自己或大家喜欢的页面
*{
    padding:0px;
    border:0px;
    margin:0px;
}
ul {
    list-style:none;
}
.slideBox {
    margin:50px auto;
    width:450px;
    height:720px;
    box-shadow:2px 2px 10px #C38DD4;
    border-radius:20px;
    position:relative;
    overflow:hidden;
}
.slideBox ul {
    position:relative;
    width:2700px;}
.slideBox ul li {
    float:left;
    width:450px;
    height:720px;
    position:relative;
   
}
.spanBox {
    position:absolute;
    width:450px;
    height:20px;
    bottom:10px;
    left:80px;
}
.spanBox span {
    width:25px;
    height:25px;
    margin-left:5px;
    background-color:#F0F;
    float:left;
    line-height:16px;
    text-align:center;
    text-shadow:2px 2px 2px #C5EBF0;
    font-family:cabin-sketch;
    font-size:20px;
 border-radius:50%;
 cursor:pointer
}
.slideBox .spanBox .active {
    background-color:#CF3;
    border:solid 1px #FF0000;
   
}
.prev {
    position:absolute;
    left:0px;
    top:320px;
    float:left;
    border-left:solid 1px rgba(251,245,246,1.00);
    opacity:0.5;
}
.next {
    width:15px;
    height:50px;
    position:absolute;
    right:0px;
    top:320px;
    float:right;
    border-right:solid 1px rgba(245,237,237,1.00);
    opacity:0.5
}

 

 

 

用jquery做网页的动画实现轮播的效果