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?1.1.11" type="text/javascript"></script> 8 <script type="text/javascript"> 9 dd_belatedpng.fix('span'); 10 </script> 11 <![endif]--> 12 <link href="style.css?1.1.11" 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?1.1.11"></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: 0101 },102 time: 300,103 type: "easeboth"104 });105 startmove({106 el: prevspan[0],107 target: {108 opacity:0,109 left: 0110 },111 time: 300,112 type: "easeboth"113 });114 startmove({115 el: prevspan[2],116 target: {117 opacity:0,118 left: 65119 },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: 12135 },136 time: 300,137 type: "easeboth"138 });139 startmove({140 el: nextspan[0],141 target: {142 opacity:1,143 right: 12144 },145 time: 300,146 type: "easeboth"147 });148 startmove({149 el: nextspan[2],150 target: {151 opacity:1,152 right: 53153 },154 time: 300,155 type: "easeboth"156 });157 };158 nextbtn.onmouseout = function(){159 startmove({160 el: nextspan[1],161 target: {162 right: 0163 },164 time: 300,165 type: "easeboth"166 });167 startmove({168 el: nextspan[0],169 target: {170 opacity:0,171 right: 0172 },173 time: 300,174 type: "easeboth"175 });176 startmove({177 el: nextspan[2],178 target: {179 opacity:0,180 right: 65181 },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
// 为什么要加个[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
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
// 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之韩雪冬轮播图的图文实例的详细内容。