jQuery-slider1

浏览数：22 / 时间：2015年06月09日

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>Document</title>
 6     <style>
 7     *{padding:0;margin:0;}
 8     li{list-style-type: none;}
 9     body{margin: 50px;}
10     .wrap{border:3px solid #f00;width:800px;height: 200px;position: relative;overflow: hidden;}
11     .wrap ul{overflow: hidden;_height:1px;width:1600px;position: absolute;left:0;top:0;}
12     .wrap ul li{float:left;}
13 
14     </style>
15     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
16     <script type="text/javascript">
17     $(function(){
18         var oul = $(‘.wrap ul‘);
19         var oulHtml = oul.html();
20         oul.html(oulHtml+oulHtml);
21         var timeId = null;
22 
23 
24         //函数的作用，每隔一段时间，执行该函数内的代码
25         timeId = setInterval(function(){
26 
27 
28             /*
29             if(oul.css(‘left‘)==‘-800px‘){
30                 oul.css(‘left‘,0);
31             }
32             oul.css(‘left‘,‘+=-2px‘);
33             */
34             if(oul.css(‘left‘)==‘0px‘){
35                 oul.css(‘left‘,‘-800px‘);
36             }
37             oul.css(‘left‘,‘+=2‘);
38 
39 
40         },30);
41 
42         $(‘.wrap‘).mouseover(function(){
43             //下面的函数是用来清除定时器
44             clearInterval(timeId);
45         });
46         
47         $(‘.wrap‘).mouseout(function(){
48 
49                 timeId = setInterval(function(){
50 
51 
52                 /*
53                 if(oul.css(‘left‘)==‘-800px‘){
54                     oul.css(‘left‘,0);
55                 }
56                 oul.css(‘left‘,‘+=-2px‘);
57                 */
58                 if(oul.css(‘left‘)==‘0px‘){
59                     oul.css(‘left‘,‘-800px‘);
60                 }
61                     oul.css(‘left‘,‘+=2‘);
62 
63 
64             },30);
65 
66         });
67     });
68     </script>
69 </head>
70 <body>
71 
72 /*如果要使一个元素运动上进心来，一般情况下要有position属性,可以是absolute/relative*/
73     <div class="wrap">
74         <ul>
75             <li><img src="1.jpg" alt="" /></li>
76             <li><img src="2.jpg" alt="" /></li>
77             <li><img src="3.jpg" alt="" /></li>
78             <li><img src="4.jpg" alt="" /></li>
79 
80 
81         </ul>
82     </div>
83 
84 </body>
85 </html>