每天一个JS 小demo之韩雪冬轮播图。主要知识点：html，css布局，对于数组和对象的理解和运用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了每天一个JS 小demo之韩雪冬轮播图。主要知识点：html，css布局，对于数组和对象的理解和运用相关的知识，希望对你有一定的参考价值。
1 @charset "utf-8"; 2 /* CSS Document */ 3 4 * { padding: 0; margin: 0; } 5 li { list-style: none; } 6 img { border: none; } 7 body { background: #ececec; padding-top: 50px; } 8 9 #automatic { width: 970px; height: 344px; position: relative; margin: 0 auto; overflow: hidden; } 10 11 .prev_div { width: 130px; height: 72px; position: absolute; top: 128px; left: 92px; z-index: 5; background: red; filter: alpha(opacity=0); opacity: 0; cursor: pointer; } 12 .next_div { width: 130px; height: 72px; position: absolute; top: 128px; right: 92px; z-index: 5; background: red; filter: alpha(opacity=0); opacity: 0; cursor: pointer; } 13 14 #automatic .prev { width: 120px; height: 72px; position: absolute; top: 108px; left: 72px; z-index: 4; } 15 #automatic .prev .ico { width: 76px; height: 112px; position: absolute; top: 0; left: 0; background: url(images/prev.png); } 16 #automatic .prev .ico1 { width: 76px; height: 112px; position: absolute; top: 0; left: 0; background: url(images/prev_1.png); z-index: 2; filter: alpha(opacity=0); opacity: 0; } 17 #automatic .prev .txt { width: 106px; height: 112px; position: absolute; top: 0; left: 65px; background: url(images/prev_txt.png) no-repeat; filter: alpha(opacity=0); opacity: 0; } 18 19 #automatic .next { width: 120px; height: 72px; position: absolute; top: 108px; right: 72px; z-index: 4; } 20 #automatic .next .ico { width: 76px; height: 112px; position: absolute; top: 0; right: 0; background: url(images/next.png) no-repeat; } 21 #automatic .next .ico1 { width: 76px; height: 112px; position: absolute; top: 0; right: 0px; background: url(images/next_1.png) no-repeat; z-index: 2; filter: alpha(opacity=0); opacity: 0; } 22 #automatic .next .txt { width: 106px; height: 112px; position: absolute; top: 0; right: 65px; background: url(images/next_txt.png) no-repeat; filter: alpha(opacity=0); opacity: 0; } 23 24 #automatic ul { width: 970px; height: 344px; position: absolute; top: 0; left: 0; z-index: 1; } 25 #automatic li { position: absolute; } 26 27 #automatic .line { border: 4px solid #fff; width: 672px; height: 336px; position: absolute; top: 0; left: 50%; margin-left: -340px; z-index: 3; } 28 29 #automatic .pos_0 { top: -104px; left: 0; z-index: 1; filter: alpha(opacity=0); opacity: 0; } 30 #automatic .pos_1 { top: 104px; left: 0; z-index: 2; filter: alpha(opacity=60); opacity: 0.6; } 31 #automatic .pos_2 { top: 43px; left: 50px; z-index: 3; filter: alpha(opacity=80); opacity: 0.8; } 32 #automatic .pos_3 { top: 0; left: 145px; z-index: 4; } 33 #automatic .pos_4 { top: 43px; right: 50px; z-index: 3; filter: alpha(opacity=80); opacity: 0.8; } 34 #automatic .pos_5 { top: 104px; right: 0; z-index: 2; filter: alpha(opacity=60); opacity: 0.6; } 35 #automatic .pos_6 { top: -104px; right: 0; z-index: 1; filter: alpha(opacity=0); opacity: 0; } 36 37 #footer { width: 970px; height: 30px; text-align: center; padding-top: 50px; margin: 0 auto; } 38 #footer a { color: #930; font-family: arial; font-size: 15px; text-decoration: none; border-bottom: 1px dotted #930; } 39 #footer a:hover { border-bottom: 1px solid #930; }
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>韩雪冬网站效果 - 妙味课堂 - www.miaov.com</title> 6 <!--[if lte IE 6]> 7 <script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script> 8 <script type="text/javascript"> 9 DD_belatedPNG.fix(‘span‘); 10 </script> 11 <![endif]--> 12 <link href="style.css" rel="stylesheet" type="text/css" /> 13 </head> 14 15 <body> 16 17 <div id="automatic"> 18 19 <div class="prev_div"></div> 20 <a class="prev" href="###"> 21 <span class="ico1"></span> 22 <span class="ico"></span> 23 <span class="txt"></span> 24 </a> 25 26 <div class="next_div"></div> 27 <a class="next" href="###"> 28 <span class="ico1"></span> 29 <span class="ico"></span> 30 <span class="txt"></span> 31 </a> 32 33 <div class="line"></div> 34 35 <ul class="picList"> 36 <li class="pos_0"><a href="http://www.miaov.com"><img src="images/8.jpg" width="100" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li> 37 <li class="pos_1"><a href="http://www.miaov.com"><img src="images/1.jpg" width="270" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li> 38 <li class="pos_2"><a href="http://www.miaov.com"><img src="images/2.jpg" width="510" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li> 39 <li class="pos_3"><a href="http://www.miaov.com"><img src="images/3.jpg" width="680" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li> 40 <li class="pos_4"><a href="http://www.miaov.com"><img src="images/4.jpg" width="510" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li> 41 <li class="pos_5"><a href="http://www.miaov.com"><img src="images/5.jpg" width="270" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li> 42 <li class="pos_6"><a href="http://www.miaov.com"><img src="images/6.jpg" width="270" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li> 43 <li class="pos_6"><a href="http://www.miaov.com"><img src="images/7.jpg" width="270" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li> 44 </ul> 45 </div> 46 <p id="footer"><a href="http://www.miaov.com">妙味课堂 - www.miaov.com</a></p> 47 </body> 48 </html> 49 <script type="text/javascript" src="../../startmove.js"></script> 50 <script type="text/javascript"> 51 /*初始宽度*/ 52 // 使用函数自执行写法，防止全局污染 53 (function(){ 54 var picList = document.querySelectorAll(‘.picList>li‘); 55 for(var i = 0; i <picList.length;i++){ 56 // 为什么要加个[0]？ 57 var img = picList[i].getElementsByTagName("img")[0]; 58 css(picList[i],"width",img.width); 59 img.style.width = "100%"; 60 } 61 })(); 62 /* 左侧按钮的鼠标移入移出动画 */ 63 (function(){ 64 // 由于prev内部的元素层级都比它自身高，盖在它上面，所以如果在prev上加onmouseover或者onmouseout,实际上鼠标根本移动不到prev上，所以添加一个层级较高的prevBtn来防止干扰，nextBtn同理 65 var prevBtn = document.querySelector(‘.prev_div‘); 66 var prev = document.querySelector(‘.prev‘); 67 var prevSpan = prev.querySelectorAll(‘span‘); 68 prevBtn.onmouseover = function(){ 69 startMove({ 70 el: prevSpan[1], 71 target: { 72 left: 12 73 }, 74 time: 300, 75 type: "easeBoth" 76 }); 77 startMove({ 78 el: prevSpan[0], 79 target: { 80 opacity:1, 81 left: 12 82 }, 83 time: 300, 84 type: "easeBoth" 85 }); 86 startMove({ 87 el: prevSpan[2], 88 target: { 89 opacity:1, 90 left: 53 91 }, 92 time: 300, 93 type: "easeBoth" 94 }); 95 }; 96 prevBtn.onmouseout = function(){ 97 startMove({ 98 el: prevSpan[1], 99 target: { 100 left: 0 101 }, 102 time: 300, 103 type: "easeBoth" 104 }); 105 startMove({ 106 el: prevSpan[0], 107 target: { 108 opacity:0, 109 left: 0 110 }, 111 time: 300, 112 type: "easeBoth" 113 }); 114 startMove({ 115 el: prevSpan[2], 116 target: { 117 opacity:0, 118 left: 65 119 }, 120 time: 300, 121 type: "easeBoth" 122 }); 123 }; 124 })(); 125 /* 右侧按钮的鼠标移入移出动画 */ 126 (function(){ 127 var nextBtn = document.querySelector(‘.next_div‘); 128 var next = document.querySelector(‘.next‘); 129 var nextSpan = next.querySelectorAll(‘span‘); 130 nextBtn.onmouseover = function(){ 131 startMove({ 132 el: nextSpan[1], 133 target: { 134 right: 12 135 }, 136 time: 300, 137 type: "easeBoth" 138 }); 139 startMove({ 140 el: nextSpan[0], 141 target: { 142 opacity:1, 143 right: 12 144 }, 145 time: 300, 146 type: "easeBoth" 147 }); 148 startMove({ 149 el: nextSpan[2], 150 target: { 151 opacity:1, 152 right: 53 153 }, 154 time: 300, 155 type: "easeBoth" 156 }); 157 }; 158 nextBtn.onmouseout = function(){ 159 startMove({ 160 el: nextSpan[1], 161 target: { 162 right: 0 163 }, 164 time: 300, 165 type: "easeBoth" 166 }); 167 startMove({ 168 el: nextSpan[0], 169 target: { 170 opacity:0, 171 right: 0 172 }, 173 time: 300, 174 type: "easeBoth" 175 }); 176 startMove({ 177 el: nextSpan[2], 178 target: { 179 opacity:0, 180 right: 65 181 }, 182 time: 300, 183 type: "easeBoth" 184 }); 185 }; 186 })(); 187 /* 188 点击切换动画 189 */ 190 (function(){ 191 var wrap = document.querySelector(‘#automatic‘); 192 var prevBtn = document.querySelector(‘.prev_div‘); 193 var nextBtn = document.querySelector(‘.next_div‘); 194 var picList = document.querySelectorAll(‘.picList>li‘); 195 var line = document.querySelector(‘.line‘); 196 var attrs = []; 197 var timer = 0; 198 for(var i = 0; i <picList.length; i++){ 199 // 先给li在数组中对应的空间内添加一个对象，用于存储它的各项属性数据 200 attrs[i] = {}; 201 attrs[i].width = css(picList[i],"width"); 202 attrs[i].left = css(picList[i],"left"); 203 attrs[i].top = css(picList[i],"top"); 204 attrs[i].opacity = css(picList[i],"opacity"); 205 attrs[i].zIndex = css(picList[i],"zIndex"); 206 } 207 prevBtn.onclick = function(){ 208 attrs.push(attrs.shift()); 209 setStyle(); 210 }; 211 nextBtn.onclick = function(){ 212 attrs.unshift(attrs.pop()); 213 setStyle(); 214 }; 215 function setStyle(){ 216 css(line,"opacity",0); 217 for(var i = 0; i <picList.length; i++){ 218 // css(picList[i],"left",attrs[i].left); 219 // css(picList[i],"top",attrs[i].top); 220 // css(picList[i],"opacity",attrs[i].opacity); 221 // css(picList[i],"zIndex",attrs[i].zIndex); 222 // 让图片提前显示出来再变化样式 223 css(picList[i],"zIndex",attrs[i].zIndex); 224 startMove({ 225 el: picList[i], 226 target: attrs[i], 227 time: 500, 228 type: "easeOut", 229 callBack: function(){ 230 startMove({ 231 el:line, 232 target:{opacity:1}, 233 time: 200, 234 type: "easeOut", 235 callBack:function(){ 236 console.log(1); 237 } 238 }); 239 } 240 }); 241 } 242 } 243 timer = setInterval(function(){ 244 nextBtn.onclick(); 245 },3000); 246 wrap.onmouseover = function(){ 247 clearInterval(timer); 248 } 249 wrap.onmouseout = function(){ 250 timer = setInterval(function(){ 251 nextBtn.onclick(); 252 },3000); 253 } 254 })(); 255 </script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>韩雪冬网站效果 - 妙味课堂 - www.miaov.com</title>
<!--[if lte IE 6]>
<script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>
<script type="text/javascript">
DD_belatedPNG.fix(‘span‘);
</script>
<![endif]-->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="automatic">
<div class="prev_div"></div>
<a class="prev" href="###">
<span class="ico1"></span>
<span class="ico"></span>
<span class="txt"></span>
</a>
<div class="next_div"></div>
<a class="next" href="###">
<span class="ico1"></span>
<span class="ico"></span>
<span class="txt"></span>
</a>
<div class="line"></div>
<ul class="picList">
<li class="pos_0"><a href="http://www.miaov.com"><img src="images/8.jpg" width="100" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li>
<li class="pos_1"><a href="http://www.miaov.com"><img src="images/1.jpg" width="270" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li>
<li class="pos_2"><a href="http://www.miaov.com"><img src="images/2.jpg" width="510" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li>
<li class="pos_3"><a href="http://www.miaov.com"><img src="images/3.jpg" width="680" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li>
<li class="pos_4"><a href="http://www.miaov.com"><img src="images/4.jpg" width="510" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li>
<li class="pos_5"><a href="http://www.miaov.com"><img src="images/5.jpg" width="270" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li>
<li class="pos_6"><a href="http://www.miaov.com"><img src="images/6.jpg" width="270" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li>
<li class="pos_6"><a href="http://www.miaov.com"><img src="images/7.jpg" width="270" alt="妙味课堂 www.miaov.com" longdesc="http://www.miaov.com" /></a></li>
</ul>
</div>
<p id="footer"><a href="http://www.miaov.com">妙味课堂 - www.miaov.com</a></p>
</body>
</html>
<script type="text/javascript" src="../../startmove.js"></script>
<script type="text/javascript">
/*初始宽度*/
// 使用函数自执行写法，防止全局污染
(function(){
var picList = document.querySelectorAll(‘.picList>li‘);
for(var i = 0; i <picList.length;i++){
// 为什么要加个[0]？
var img = picList[i].getElementsByTagName("img")[0];
css(picList[i],"width",img.width);
img.style.width = "100%";
}
})();
/* 左侧按钮的鼠标移入移出动画 */
(function(){
// 由于prev内部的元素层级都比它自身高，盖在它上面，所以如果在prev上加onmouseover或者onmouseout,实际上鼠标根本移动不到prev上，所以添加一个层级较高的prevBtn来防止干扰，nextBtn同理
var prevBtn = document.querySelector(‘.prev_div‘);
var prev = document.querySelector(‘.prev‘);
var prevSpan = prev.querySelectorAll(‘span‘);
prevBtn.onmouseover = function(){
startMove({
el: prevSpan[1],
target: {
left: 12
},
time: 300,
type: "easeBoth"
});
startMove({
el: prevSpan[0],
target: {
opacity:1,
left: 12
},
time: 300,
type: "easeBoth"
});
startMove({
el: prevSpan[2],
target: {
opacity:1,
left: 53
},
time: 300,
type: "easeBoth"
});
};
prevBtn.onmouseout = function(){
startMove({
el: prevSpan[1],
target: {
left: 0
},
time: 300,
type: "easeBoth"
});
startMove({
el: prevSpan[0],
target: {
opacity:0,
left: 0
},
time: 300,
type: "easeBoth"
});
startMove({
el: prevSpan[2],
target: {
opacity:0,
left: 65
},
time: 300,
type: "easeBoth"
});
};
})();
/* 右侧按钮的鼠标移入移出动画 */
(function(){
var nextBtn = document.querySelector(‘.next_div‘);
var next = document.querySelector(‘.next‘);
var nextSpan = next.querySelectorAll(‘span‘);
nextBtn.onmouseover = function(){
startMove({
el: nextSpan[1],
target: {
right: 12
},
time: 300,
type: "easeBoth"
});
startMove({
el: nextSpan[0],
target: {
opacity:1,
right: 12
},
time: 300,
type: "easeBoth"
});
startMove({
el: nextSpan[2],
target: {
opacity:1,
right: 53
},
time: 300,
type: "easeBoth"
});
};
nextBtn.onmouseout = function(){
startMove({
el: nextSpan[1],
target: {
right: 0
},
time: 300,
type: "easeBoth"
});
startMove({
el: nextSpan[0],
target: {
opacity:0,
right: 0
},
time: 300,
type: "easeBoth"
});
startMove({
el: nextSpan[2],
target: {
opacity:0,
right: 65
},
time: 300,
type: "easeBoth"
});
};
})();
/*
点击切换动画
*/
(function(){
var wrap = document.querySelector(‘#automatic‘);
var prevBtn = document.querySelector(‘.prev_div‘);
var nextBtn = document.querySelector(‘.next_div‘);
var picList = document.querySelectorAll(‘.picList>li‘);
var line = document.querySelector(‘.line‘);
var attrs = [];
var timer = 0;
for(var i = 0; i <picList.length; i++){
// 先给li在数组中对应的空间内添加一个对象，用于存储它的各项属性数据
attrs[i] = {};
attrs[i].width = css(picList[i],"width");
attrs[i].left = css(picList[i],"left");
attrs[i].top = css(picList[i],"top");
attrs[i].opacity = css(picList[i],"opacity");
attrs[i].zIndex = css(picList[i],"zIndex");
}
prevBtn.onclick = function(){
attrs.push(attrs.shift());
setStyle();
};
nextBtn.onclick = function(){
attrs.unshift(attrs.pop());
setStyle();
};
function setStyle(){
css(line,"opacity",0);
for(var i = 0; i <picList.length; i++){
// css(picList[i],"left",attrs[i].left);
// css(picList[i],"top",attrs[i].top);
// css(picList[i],"opacity",attrs[i].opacity);
// css(picList[i],"zIndex",attrs[i].zIndex);
// 让图片提前显示出来再变化样式
css(picList[i],"zIndex",attrs[i].zIndex);
startMove({
el: picList[i],
target: attrs[i],
time: 500,
type: "easeOut",
callBack: function(){
startMove({
el:line,
target:{opacity:1},
time: 200,
type: "easeOut",
callBack:function(){
console.log(1);
}
});
}
});
}
}
timer = setInterval(function(){
nextBtn.onclick();
},3000);
wrap.onmouseover = function(){
clearInterval(timer);
}
wrap.onmouseout = function(){
timer = setInterval(function(){
nextBtn.onclick();
},3000);
}
})();
</script>
以上是关于每天一个JS 小demo之韩雪冬轮播图。主要知识点：html，css布局，对于数组和对象的理解和运用的主要内容，如果未能解决你的问题，请参考以下文章
每天一个JS 小demo之表单排序。主要知识点：DOM中的表单操作，节点操作
每天一个JS 小demo之通过事件委托实现菜单展开及选中特效。主要知识点：事件
每天一个JS 小demo之通过键盘方向键操作图片上下左右无缝切换。主要知识点：事件
每天一个JS 小demo之日历制作。主要知识点：日期函数和对于函数封装的灵活运用