可点击的焦点图

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>滑动的焦点图</title>
 6         <script src="WebUI/js/jquery-1.4.1.min.js" type="text/javascript" charset="utf-8"></script>
 7         <script type="text/javascript" src="WebUI/js/slide.js" charset="utf-8"></script>
 8         <style type="text/css">
 9             .container{width:100%;height:500px;margin:100px auto 0px;}
10             .focus{width:1200px;height:100%;margin:0px auto ;overflow: hidden;position:relative;}
11             .focus ul{width:8000px;height:100%;margin:0px;padding:0px;}
12             .focus ul li{width:1200px;height:100%;list-style:none;float:left; overflow:hidden ;}
13             img{ width:1200px;}
14             .btn_ape,.btn_pre{width:50px;height:50px;background-color:blue;position:absolute;z-index:100;top:225px;}
15             .btn_pre{left:50px;background:url(WebUI/images/icons_cb372887.png) no-repeat left top;}
16             .btn_ape{right:50px;background:url(WebUI/images/icons_cb372887.png) no-repeat right top;}
17         </style>
18     </head>
19 
20     <body>
21         <div class="container">
22             <div class="focus">
23                 <ul>
24                     <li><a href="javascript://"><img src="WebUI/images/f01.jpg"/></a></li>
25                     <li><a href="javascript://"><img src="WebUI/images/f02.jpeg"/></a></li>
26                     <li><a href="javascript://"><img src="WebUI/images/f03.jpg"/></a></li>
27                     <li><a href="javascript://"><img src="WebUI/images/f04.jpg"/></a></li>
28                     <li><a href="javascript://"><img src="WebUI/images/f05.jpg"/></a></li>
29                 </ul>
30                 <div class="btn_pre"></div>
31                 <div class="btn_ape"></div>
32             </div>
33 
34         </div>
35     </body>
36 
37 </html>

 1 $(function() {
 2     setAnimate();
 3     $(".btn_pre").click(function() {
 4         if (!isrun) {
 5             _index--;
 6             Slide();
 7         }
 8 
 9     });
10     $(".btn_ape").click(function() {
11         if (!isrun) {
12             _index++;
13             Slide();
14         }
15 
16     });
17     $(".focus ul").mouseenter(function() {
18         clearTimeout(intervalProcessH);
19     }).mouseleave(function() {
20         clearTimeout(intervalProcessH);
21         setAnimate();
22     });
23 })
24 var _index = 0;
25 var _length = 5;
26 var isrun = false;
27 window.intervalProcessH;
28 
29 function setAnimate() {
30     intervalProcessH = setInterval(function() {
31         if (!isrun) {
32             _index++;
33             Slide();
34         }
35     }, 2000);
36 }
37 
38 function Slide() {
39     isrun = true;
40     clearTimeout(intervalProcessH);
41     var first = 0;
42     if (_index == -1) {
43                 $(".focus ul").css("margin-left", -1200 *_length);_index = _length-1;
44             $(".focus ul").append("<li>"+$(".focus ul li:first").html()+"</li>");
45 
46         first = 1;
47     }
48     if (_index == _length) {
49 
50         $(".focus ul").css("margin-left", "0px");_index=1;
51         $(".focus ul").prepend("<li>" + $(".focus ul li:last").html() + "</li>");
52         first = 2;
53     }
54     $(".focus ul").animate({"margin-left": (-1200 * _index) + "px"}, 500, function() {
55         
56         isrun = false;
57         setAnimate();
58         if (first == 1) {
59             //$(".focus ul").css("margin-left",-1200*(_length)+"px");
60             $(".focus ul li:last").remove();
61         }
62         if (first == 2) {
63             if (_index == 1) {
64             _index = 0;
65             $(".focus ul").css("margin-left", "0px");
66         }
67             $(".focus ul li:first").remove();
68             $(".focus ul").css("margin-left", "0px");
69         }
70     });
71 
72 }

posted @ 2015-08-30 21:10 OPIG 阅读(365) 评论(0) 收藏举报

刷新页面返回顶部

OPIG

可点击的焦点图

公告