仿淘宝幻灯片,基础版,后期效果是要做到每次点击小圆点,切换都无缝
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <title>4.淘宝幻灯片</title>
8 <meta name="author" content="Administrator" />
9 <!-- Date: 2014-12-11 -->
10 <style>
11 *{margin:0;padding:0}
12 #div1{width:400px;height:215px; border:1px solid red;margin:40px auto; overflow:hidden;position:relative }
13 ul{position:absolute;left:0;top:0}
14 li{list-style:none;float:left; position: relative}
15 li.active{background:red}
16 li.active2{border:1px solid red}
17 li img{width:400px;}
18 ol{position:absolute}
19 ol li{width:15px;height:15px;border-radius:10px;background:#808080;margin:0 3px}
20 .t{position:absolute;font-size:80px;z-index:2;left:200px;top:100px;color:red;width:100px;height:100px;background:#fff;text-align:center; border:1px solid black}
21 </style>
22 <script>
23 window.onload=function(){
24 var oDiv1=document.getElementById(‘div1‘);
25 var oUl=oDiv1.getElementsByTagName(‘ul‘)[0];
26 var aLi=oUl.getElementsByTagName(‘li‘);
27 var arr=[‘3-images/1.jpg‘,‘3-images/2.jpg‘,‘3-images/3.jpg‘,‘3-images/4.jpg‘,‘3-images/5.jpg‘];
28 var arr1=[‘1‘,‘2‘,‘3‘,‘4‘,‘5‘];
29 oUl.style.width = aLi.length * aLi[0].offsetWidth +‘px‘;
30
31 var oL=document.createElement(‘ol‘);
32 var str=‘‘;
33 for( var i=0;i<aLi.length;i++ ){
34
35 str += ‘<li></li>‘
36 }
37 oL.innerHTML=str;
38 oDiv1.appendChild( oL );
39 document.title = oDiv1.offsetWidth +‘-‘+oL.offsetWidth;
40 oL.style.left = (oDiv1.offsetWidth - oL.offsetWidth)/2 +‘px‘;
41 oL.style.bottom=‘0px‘;
42 var aLi1=oL.getElementsByTagName(‘li‘);
43
44 var timer=null;
45 var num=0;
46
47 function init(){
48 for(var i=0;i<aLi1.length;i++){
49 aLi1[i].className=‘‘
50 }
51 aLi1[num].className=‘active‘
52 }
53 init();
54 function slide(){
55 num++;
56 if(num>=aLi.length) {
57 num=0;
58 oUl.style.left = 0;
59 }
60 init();
61 hcMove(oUl,{
62 ‘left‘:-400*num
63 })
64 }
65 timer=setInterval(function(){
66 slide()
67 },1000)
68
69 oDiv1.onmouseover=function(){
70 clearInterval(timer)
71 }
72 oDiv1.onmouseout=function(){
73 timer=setInterval(function(){
74 slide()
75 },1000)
76 }
77 for(var i=0;i<aLi.length;i++){
78 aLi1[i].index=i;
79 aLi1[i].onclick=function(){
80 num = this.index;
81 init();
82 hcMove(oUl,{‘left‘:-400*num})
83 }
84 }
85
86
87
88 }
89 function css(obj,attr) {
90 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]
91 }
92 /**完美 缓冲运动 带opacity**/
93 function hcMove(obj,json,fn){
94 clearInterval( obj.timer );
95
96 obj.timer=setInterval(function(){
97 var iBtn=true;
98
99 for(var attr in json){
100 var target=json[attr];
101
102 if( attr == ‘opacity‘ ){
103 var iSpeed = (target-Math.round(css(obj,attr))*100)/6;
104 }else{
105 var iSpeed = (target-parseInt(css(obj,attr)))/6;
106 }
107
108
109 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);//速度取整,因为js中的小数是经过计算的,默认四舍五入,但是不够0.5的就不会动了
110
111 if( parseInt(css(obj,attr)) != target ){
112 iBtn=false;//如果有运动没到达目标点,iBtn为false
113
114 if( attr == ‘opacity‘ ){
115 var sNow=Math.round(css(obj,attr)*100) + iSpeed;
116
117 //先做处理 再赋值
118 if( sNow > target && iSpeed >0 || sNow < target && iSpeed <0 ){
119 sNow = target
120 }
121
122 obj.style[attr] = sNow/100;
123 obj.style.filter = ‘alpha(opacity=‘+sNow+‘)‘;
124 }else{
125
126 var sNow = parseInt(css(obj,attr)) + iSpeed;
127
128 //先做处理 再赋值
129 if( sNow > target && iSpeed >0 || sNow < target && iSpeed <0 ){
130 sNow = target
131 }
132 obj.style[attr] = sNow +‘px‘;
133 }
134
135 }
136
137 }
138
139 if(iBtn){ //如果运动全部完成,iBtn为true
140 clearInterval(obj.timer);
141 fn && fn()
142 }
143
144 },30)
145 }
146
147 </script>
148 </head>
149 <body>
150 <div id="div1">
151 <ul>
152 <li mars=‘1‘><img src="3-images/1.jpg"><span class="t">1</span></li>
153 <li mars=‘2‘><img src="3-images/2.jpg"><span class="t">2</span></li>
154 <li mars=‘3‘><img src="3-images/3.jpg"><span class="t">3</span></li>
155 <li mars=‘4‘><img src="3-images/4.jpg"><span class="t">4</span></li>
156 <li mars=‘5‘><img src="3-images/5.jpg"><span class="t">5</span></li>
157 </ul>
158 </div>
159 </body>
160 </html>
时间： 2024-11-05 11:28:25