1、焦點圖
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>焦點圖</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 ul,ol{
12 list-style: none;
13 }
14 img{
15 border: none;
16 }
17 .box{
18 width: 490px;
19 height: 170px;
20 margin:100px auto;
21 overflow: hidden;
22 position: relative;
23 }
24 .box ul{
25 width: 500%;
26 position: absolute;
27 left:0;
28 top:0;
29 }
30 .box ul li{
31 float: left;
32 }
33 .box ol{
34 width: 180px;
35 position: absolute;
36 right:20px;
37 bottom: 10px;
38
39 }
40 .box ol li{
41 float: left;
42 width: 18px;
43 height: 18px;
44 border:1px solid #c1c1c1;
45 background-color: #f1f1f1;
46 color: #000000;
47 text-align: center;
48 margin-left: 10px;
49 line-height:18px;
50 }
51 .box ol .current{
52 background-color: yellow;
53 cursor: pointer;
54 }
55 </style>
56 </head>
57 <body>
58 <div class="box" id="jd">
59 <div id="inner">
60 <ul >
61 <li><img src="images/01.jpg" alt=""></li>
62 <li><img src="images/02.jpg" alt=""></li>
63 <li><img src="images/03.jpg" alt=""></li>
64 <li><img src="images/04.jpg" alt=""></li>
65 <li><img src="images/05.jpg" alt=""></li>
66 </ul>
67 </div>
68 <ol >
69 <li class="current">1</li>
70 <li>2</li>
71 <li>3</li>
72 <li>4</li>
73 <li>5</li>
74 </ol>
75 </div>
76 <script>
77 var box=document.getElementById("jd");
78 var ul=jd.children[0].children[0];
79 var ol=jd.children[1];
80 var olis=ol.children;
81 for(var i=0;i<olis.length;i++){
82 olis[i].index=i;//得到li的索引值
83 olis[i].onmouseover=function(){
84 for(var j=0;j<olis.length;j++){
85 olis[j].className="";
86 }
87 this.className="current";
88 target=this.index*(-490);//目前索引号乘以一個盒子的寬度
89
90 }
91 }
92
93 var leader=0;
94 var target=0;
95 setInterval(function(){
96 leader=leader+(target-leader)/10;
97 ul.style.left=leader+"px";
98 },30);
99
100 </script>
101 </body>
102 </html>
運作效果：
2、左右焦點圖
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>左右輪播圖</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 ul{
12 list-style: none;
13 }
14 img{
15 border:none;
16 }
17 .all{
18 width: 520px;
19 height: 280px;
20 margin: 100px auto;
21 position: relative;
22 overflow: hidden;
23 }
24 .all ul{
25 width: 500%;
26 position: absolute;
27 left:0;
28 top:0;
29 }
30 .all ul li{
31 float: left;
32 }
33 #arr{
34 display: none;
35 }
36 #arr span{
37 display: block;
38 position: absolute;
39 top:50%;
40 margin-top: -40px;
41 width: 40px;
42 height: 80px;
43 text-align: center;
44 background-color: #888888;
45 opacity: 0.8;
46 color: #333333;
47 line-height:80px;
48 font-size: 30px;
49 cursor: pointer;
50 }
51 #arr #left{
52 left: 0;
53 }
54 #arr #right{
55 right:0;
56 }
57 </style>
58 </head>
59 <body>
60 <div class="all" id="box">
61 <div id="ad">
62 <ul id="imgs">
63 <li><img src="images/1.jpg" alt=""></li>
64 <li><img src="images/2.jpg" alt=""></li>
65 <li><img src="images/3.jpg" alt=""></li>
66 <li><img src="images/4.jpg" alt=""></li>
67 <li><img src="images/5.jpg" alt=""></li>
68 </ul>
69 </div>
70 <div id="arr"><span id="left"><</span><span id="right">></span></div>
71 </div>
72 </body>
73
74 </html>
75 <script>
76 function $(id){return document.getElementById(id);}
77 var box=document.getElementById("box");
78 box.onmouseover=function(){
79 $("arr").style.display="block";
80 };
81 box.onmouseout=function(){
82 $("arr").style.display="none";
83 };
84 $("right").onclick=function(){//右邊按鈕
85 target-=520;
86 };
87 $("left").onclick=function(){//左邊按鈕
88 target+=520;
89 };
90
91 //緩動動畫
92 var leader=0;
93 var target=0;
94 setInterval(function(){
95 if(target>=0){
96 target=0;
97 }else if(target<=-2080){
98 target=-2080;
99 }
100 leader=leader+(target-leader)/10;
101 $("imgs").style.left=leader+"px";
102 },30)
103 </script>
運作效果：
![Oracle索引内部結構研究[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)