jquery 20行代码实现简单轮播效果 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>轮播demo</title>
 6     </head>
 7     <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
 8     <style>
 9         *{
10             margin: 0px;
11             padding: 0px;
12         }
13         li{
14             list-style-type: none;
15         }
16         a{
17             text-underline-style: none;
18         }
19         div{
20             width: 400px;
21             height: 200px;
22         }
23         img{
24             width：400px;
25             height: 200px;
26             position: absolute;
27             top: 0px;
28             left: 0px;
29             z-index: 1;
30         }
31         #ul2 li{
32             display: inline;
33             height: 20px;
34             float: left;
35             width: 30px;
36             line-height: 100%;
37             text-align: center;
38         }
39         #ul2{
40             position: absolute;
41             background-color: #ccc;
42             width: 150px;
43             height: 20px;
44             z-index: 100;
45             left: 0px;
46             top: 200px;
47         }
48         #ul2 li:hover{
49             background-color: red;
50         }
51     </style>
52     <body>
53         <div>
54             <ul>
55                 <li><a href="#"><img src="../img/1.jpg" /></a></li>
56                 <li><a href="#"><img src="../img/2.jpg" /></a></li>
57                 <li><a href="#"><img src="../img/3.jpg" /></a></li>
58                 <li><a href="#"><img src="../img/4.jpg" /></a></li>
59                 <li><a href="#"><img src="../img/5.jpg" /></a></li>
60             </ul>
61             <ul id="ul2">
62                 <li>1</li>
63                 <li>2</li>
64                 <li>3</li>
65                 <li>4</li>
66                 <li>5</li>
67             </ul>
68         </div>
69         <script type="text/javascript" src="../js/lunbo.js" ></script>
70     </body>
71 </html>
$(document).ready(function() {
    setInterval(function(){
        move();
    },1000);
    $("#ul2 li").on({
        "mouseover": function() {
            var index = $("#ul2 li").index(this);
            var x = $("img").eq(index).width();
            $("img").eq(index).css("z-index", 2);
        },
        "mouseout": function() {
            var index = $("#ul2 li").index(this);
            $("img").eq(index).css("z-index", 1);    
        }
    });
});
var i = 0;
function move(){
    if(i >= 5){
        i = 0;
    }
    $("img").eq(i).css("z-index",2);
    $("img").eq(i-1).css("z-index",1);
    i++;
}

 

posted @ 2015-04-02 15:28  beggarWang  阅读(248)  评论(0)    收藏  举报