1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="content-type" content="text/html;charset=utf-8">
5 <title></title>
6 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
7 <meta content="always" name="referrer">
8 <meta name="theme-color" content="#2932e1">
9 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
10 <link href="base.css" rel="stylesheet" type="text/css" />
11 <style type="text/css" media="screen">
12 .al{height: 600px;width: 1000px;position: relative;margin: 30px auto 0;}
13 .wrap,.imgbox,.num{height: 600px;width: 1000px;position: absolute;overflow: hidden;}
14 .imgbox li{height: 600px;width: 1000px;float: left;}
15 .imgbox li img{height: 600px;width: 1000px;display: inline-block;}
16 .numbox{height: 30px;width:300px;position: absolute;bottom: 30px;right: 280px;}
17 .numbox li{width: 15px;height: 15px;font-size: 16px;color: #fff; text-align: center;line-height: 30px;border-radius:50%;float: left;margin-left:10px;background: blue;}
18 .numbox .select{width: 15px;height: 15px;font-size: 16px;color: #fff; text-align: center;line-height: 30px;border-radius:50%;float: left;margin-left:10px;background: red;}
19 .left,.right{width: 41px;height: 69px;position: absolute;display: inline-block;z-index: 9999;}
20 .left{top:280px;left:0;background:url(images/icon.png)-84px 0 no-repeat;}
21 .right{top:280px;right:0;background:url(images/icon.png)-125px 0 no-repeat;}
22 .left:hover{background: url(images/icon.png)0 0 no-repeat;}
23 .right:hover{background: url(images/icon.png)-43px 0 no-repeat;}
24 </style>
25 </head>
26 <body>
27 <div class="al">
28 <a href="#" class="left"></a>
29 <a href="#" class="right"></a>
30 <div class="wrap">
31 <ul class="imgbox">
32 <li><img src="images/bg1.jpg" /></li>
33 <li><img src="images/bg2.jpg" /></li>
34 <li><img src="images/bg3.jpg" /></li>
35 <li><img src="images/bg4.jpg" /></li>
36 <li><img src="images/bg5.jpg" /></li>
37 </ul>
38 </div>
39 <div class="num">
40 <ul class="numbox">
41 <li class="select"></li>
42 <li></li>
43 <li></li>
44 <li></li>
45 <li></li>
46 </ul>
47 </div>
48
49 </div>
50 <script>
51 /* var time = "";
52 var index = 1;
53 $(function () {
54 showimg(index);
55 //鼠标移入移出
56 $(".numbox li").hover(function () {
57 clearTimeout(time);
58 var ind=$(this).index();
59 $(this).addClass(‘select‘).siblings().removeClass(‘select‘);
60 $(".imgbox li").hide().stop(true,true).eq(ind).fadeIn("slow");
61 }, function () {
62 index=$(this).index()+2> 5 ? 1 :$(this).index()+2;
63 time = setTimeout("showimg(" + index+ ")", 3000);
64 });
65 });
66
67 function showimg(num) {
68 index = num;
69 $(".numbox li").removeClass("select").eq(index-1).addClass("select");
70 $(".imgbox li").hide().stop(true,true).eq(index-1).fadeIn("slow");
71 index = index + 1 > 5 ? 1 : index + 1;
72 time = setTimeout("showimg(" + index + ")", 3000);
73 }*/
74
75 var index=1;
76 var timer="";
77 autopl(index);
78 $(‘.numbox li‘).mouseover(function(){
79 clearTimeout(timer);
80 var num=$(this).index();
81 $(this).addClass(‘select‘).siblings().removeClass(‘select‘);
82 $(‘.imgbox li‘).eq(num).fadeIn(‘slow‘).siblings().hide();
83 });
84 $(‘.numbox li‘).mouseout(function(){
85 index=$(this).index()+2> 5 ? 1 :$(this).index()+2;
86 timer = setTimeout("autopl(" + index+ ")", 3000);
87 });
88
89 function autopl(numb){
90 index =numb;
91 $(‘.numbox li‘).eq(index-1).addClass(‘select‘).siblings().removeClass(‘select‘);
92 $(‘.imgbox li‘).eq(index-1).fadeIn(‘slow‘).siblings().hide();
93 index=index+1 > 5 ? 1 : index + 1;
94 timer = setTimeout(‘autopl(‘ +index+ ‘)‘,3000);
95 }
96 $(‘.left‘).click(function(){
97 clearTimeout(timer);
98 var ind=$(‘.numbox li‘).index($(‘.select‘));
99 var inde=ind+1>1?ind-1:4;
100 $(‘.numbox li‘).eq(inde).addClass(‘select‘).siblings().removeClass(‘select‘);
101 $(‘.imgbox li‘).eq(inde).fadeIn(‘slow‘).siblings().hide();
102 index=inde+1<5?inde+1:0;
103 timer=setTimeout(‘autopl(‘+index+‘)‘,3000);
104 })
105 $(‘.right‘).click(function(){
106 clearTimeout(timer);
107 var ind=$(‘.select‘).index();
108 var inde=ind+1<5?ind+1:0;
109 $(‘.numbox li‘).eq(inde).addClass(‘select‘).siblings().removeClass(‘select‘);
110 $(‘.imgbox li‘).eq(inde).fadeIn(‘slow‘).siblings().hide();
111 index=inde+1<5?inde+1:0;
112 timer=setTimeout(‘autopl(‘+index+‘)‘,3000);
113 })
114
115 </script>
116
117 </body>
118 </html>
时间： 2024-10-10 20:34:15