1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7
8 *{
9 margin: 0;
10 padding: 0;
11 }
12 #btn_mod{
13 width: 400px;
14 margin: 20px auto 0;
15 overflow: hidden;
16 }
17 #btn_li_list{
18 list-style: none;
19 }
20 #btn_li_list li,#btn_mod div{
21 float: left;
22 width: 60px;
23 height: 30px;
24 background: rgb(204,204,204);
25 margin-left: 6px;
26 text-align: center;
27 line-height: 30px;
28 color: rgb(102,102,102);
29 }
30 #img_box{
31 width: 400px;
32 height: 400px;
33 margin: 20px auto 0;
34 position: relative;
35 overflow: hidden;
36 }
37
38 #img_box img{
39 width: 400px;
40 height: 400px;
41 float: left;
42 }
43 #img_box #img_scroll{
44 height: 400px;
45 position: absolute;
46 left: 0;
47 overflow: hidden;
48 /*-webkit-transition: all 0.5s;*/
49 }
50
51 </style>
52 <script type="text/javascript" src="js/tween.js"></script>
53 </head>
54 <body>
55 <div id="btn_mod">
56 <div id="pre">
57 上一页
58 </div>
59 <ul id="btn_li_list">
60 <li style="background: rgb(153,153,153);">1</li>
61 <li>2</li>
62 <li>3</li>
63 <li>4</li>
64 </ul>
65 <div id="next">
66 下一页
67 </div>
68 </div>
69
70 <!--图片-->
71 <div id="img_box">
72 <div id="img_scroll">
73 <img src="img/1.jpg" alt="" />
74 <img src="img/2.jpg" alt="" />
75 <img src="img/3.jpg" alt="" />
76 <img src="img/4.jpg" alt="" />
77 <img src="img/1.jpg" alt="" />
78 </div>
79 </div>
80
81 </body>
82
83
84 <script type="text/javascript">
85 // 获取上一页按钮
86 var preBtn = document.getElementById("pre");
87 // 获取下一页按钮
88 var nextBtn = document.getElementById("next");
89 // 获取1、2、3、4这4个按钮
90 var ulList = document.getElementById("btn_li_list");
91 var liBtnArray = ulList.getElementsByTagName("li");
92 // 获取滚动的 div块
93 var scrollDiv = document.getElementById("img_scroll");
94 // 获取滚动 div 块下的所有 img 标签
95 var imgArray = scrollDiv.getElementsByTagName("img");
96 // 设置 滚动的 div块的宽度
97 scrollDiv.style.width = 400 * imgArray.length +"px";
98 // 定义用来记录滑动图片的位置
99 var scrollIndex = 0;
100
101 function startScroll(){
102 var t = 0;
103 var b = scrollDiv.offsetLeft;
104 var c = (imgArray.length - 1) * -400;
105 var d = 100;
106 var timer = setInterval(function(){
107 t++;
108 if(t >= d){
109 clearInterval(timer);
110 }
111 scrollDiv.style.left = Tween.Linear(t,b,c,d) + "px";
112 var currentLeft = scrollDiv.offsetLeft;
113 var currenti = parseInt(-currentLeft / 400);
114 for (var i = 0;i < liBtnArray.length;i++) {
115 liBtnArray[i].style.background = 'gray';
116 }
117 if(currenti == 4){
118 currenti = 0;
119 }
120 liBtnArray[currenti].style.background = "red";
121 },50);
122
123 }
124 startScroll();
125 setInterval(function(){
126 scrollDiv.style.left = "0px";
127 startScroll();
128 },90000);
129
130 </script>
131 </html>
