<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>æç®åçè½®æ广å</title>
<style>
body, div, ul, li {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
body {
background: #000;
text-align: center;
font: 12px/20px Arial;
}
#box {
position: relative;
width: 492px;
height: 172px;
background: #fff;
border-radius: 5px;
border: 8px solid #fff;
margin: 10px auto;
}
#box .list {
position: relative;
width: 490px;
height: 170px;
overflow: hidden;
border: 1px solid #ccc;
}
#box .list li {
position: absolute;
top: 0;
left: 0;
width: 490px;
height: 170px;
opacity: 0;
transition: opacity 0.5s linear
}
#box .list li.current {
opacity: 1;
}
#box .count {
position: absolute;
right: 0;
bottom: 5px;
}
#box .count li {
color: #fff;
float: left;
width: 20px;
height: 20px;
cursor: pointer;
margin-right: 5px;
overflow: hidden;
background: #F90;
opacity: 0.7;
border-radius: 20px;
}
#box .count li.current {
color: #fff;
opacity: 0.7;
font-weight: 700;
background: #f60
}
</style>
</head>
<body>
<div id="box">
<ul class="list">
<li class="current" style="opacity: 1;"><img src="img/images04/01.jpg" width="490" height="170"></li>
<li style="opacity: 0;"><img src="img/images04/02.jpg" width="490" height="170"></li>
<li style="opacity: 0;"><img src="img/images04/03.jpg" width="490" height="170"></li>
<li style="opacity: 0;"><img src="img/images04/04.jpg" width="490" height="170"></li>
<li style="opacity: 0;"><img src="img/images04/05.jpg" width="490" height="170"></li>
</ul>
<ul class="count">
<li class="current">1</li>
<li class="">2</li>
<li class="">3</li>
<li class="">4</li>
<li class="">5</li>
</ul>
</div>
<script>
var box=document.getElementById('box');
var uls=document.getElementsByTagName('ul');
var imgs=uls[0].getElementsByTagName('li');
var btn=uls[1].getElementsByTagName('li');
var i=index=0; //ä¸é´éï¼ç»ä¸å£°æï¼
var play=null;
console.log(box,uls,imgs,btn);//è·åæ£ç¡®
//å¾çåæ¢, æ·¡å
¥æ·¡åºææææ¯ç¨ï¼transition: opacity 0.8s linearï¼åç,ä¸çº ç»ãç®å å¨csséé¢
function show(a){ //æ¹æ³å®ä¹çæ¯å½ä¼ å
¥ä¸ä¸ªä¸æ æ¶ï¼æé®åå¾çååºå¯¹çååº
for(i=0;i<btn.length;i++ ){
btn[i].className=''; //å¾å®¹æçæå§ï¼æ¯ä¸ªæé®é½å
设置æçä¸è§ï¼ç¶åæå½åæé®è®¾ç½®æå¯è§ã
btn[a].className='current';
}
for(i=0;i<imgs.length;i++){ //æå¾ççææ设置åæé®ç¸å
imgs[i].style.opacity=0;
imgs[a].style.opacity=1;
}
}
//åæ¢æé®åè½ï¼ååºå¯¹åºå¾ç
for(i=0;i<btn.length;i++){
btn[i].index=i; //ä¸ç¥éä½ æ没æåç°ï¼å¾ªç¯éçæ¹æ³å»è°ç¨å¾ªç¯éçåéä½iï¼ä¼åºç°è°å°çä¸æ¯içåå¨å¼çé®é¢ãæ以æå
å¨å¾ªç¯å¤ä¿åä½
btn[i].onmouseover=function(){
show(this.index);
clearInterval(play); //è¿å°±æ¯æåé£å¥è¯è¿½å çåè½
}
}
//èªå¨è½®ææ¹æ³
function autoPlay(){
play=setInterval(function(){ //è¿ä¸ªpalyæ¯ä¸ºäºä¿åå®æ¶å¨çï¼åéå¿
é¡»å¨å
¨å±å£°æ ä¸ç¶å
¶ä»æ¹æ³è°ä¸å° æè
ä½ å¯ä»¥è°ç¨auto.play ä¹è®¸å¯ä»¥ä½æ¯æ²¡æ¶é´è¯äº
index++;
index>=imgs.length&&(index=0);//å¯è½æä¼å
级é®é¢ï¼æ以ç¨äºæ¬å·ï¼æ²¡æ¶é´æµè¯äºã
show(index);
},1000)
}
autoPlay();//马ä¸è°ç¨ï¼æè¯è¿ç¨window.onloadè°ç¨è¿ä¸ªæ¹æ³ï¼ä½æ¯è°ç¨ä¹åå½±åå°äºå
¶ä»æ¹æ³ï¼ä½¿ç¨autoPlayæ以åªè½è¿æ ·è°ç¨äº
//divçé¼ æ 移å
¥ç§»åºäºä»¶
box.onmouseover=function(){
clearInterval(play);
};
box.onmouseout=function(){
autoPlay();
};
//æé®ä¸æ ä¹è¦å ä¸ç¸åçé¼ æ äºä»¶ï¼ä¸ç¶å¾çåæ¢äºï¼å®æ¶å¨æ²¡åï¼ä¼çªç¶éªå°å¾å¤§çæ°åä¸ã è²ä¼¼æå¯ä»¥ç´æ¥è¿½å å°ä¹åå®ä¹äºä»¶ä¸ã
</script>
</body>
</html>
温馨提示:内容为网友见解,仅供参考