本帖最后由 cglmj 于 2019-12-5 11:13 编辑
[JavaScript] 纯文本查看 复制代码 [mw_shl_code=html,true]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-size: 12px;
}
#div1{
border: 1px solid silver;
width: 426px;
margin:0 auto;
}
#div1 img{
display: block;
}
.samding{
width: 426px;
}
#div2{
height: 20px;
background: silver;
}
#div2 ul{
list-style: none;
display: block;
}
#div2 ul li{
float: left;
width: 18px;
height: 18px;
background: #9E2E07;
margin-left: 10px;
margin-top: 1px;
color: white;
text-align: center;
}
#div2 ul li a{
text-decoration: none;
color: white;
}
#div2 ul li a:hover {
text-decoration:underline;
color: red
}
.over{
width: 200px !important;
background: white !important;
color: red !important;
}
/*-------------------------------*/
</style>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<div id="div1">
<img src="images1/1.jpg" id="img1">
<div id="div2">
<ul>
<li><a href="javascript:void(0)">1</a></li>
<li><a href="javascript:void(0)">2</a></li>
<li><a href="javascript:void(0)">3</a></li>
<li><a href="javascript:void(0)">4</a></li>
<li><a href="javascript:void(0)">5</a></li>
</ul>
</div>
</div>
<script>
window.onload=init
var lis=document.getElementsByTagName('li')
function init(){
for (var i = 0; i < lis.length; i++) {
(function(i){
lis[i].onmouseover=function(){
click(i)
}
lis[i].onmouseout=function(){
myTime = setTimeout('update()',2000);
}
})(i)
}
update()
}
var img1=document.getElementById("img1")
var arr_img=['images1/1.jpg','images1/2.jpg','images1/3.jpg','images1/4.jpg','images1/5.jpg']
//--------------------------
var arr_adv=["广告1","广告2","广告3","广告4","广告5"]
var index=0
var oldindex=-1
var myTime;
//-----------------------------
function update(){
img1.src=arr_img[index]
//-----------------------
var arr=document.getElementsByTagName('li')
arr[index].innerHTML=arr_adv[index]
arr[index].className='over'
if(oldindex!=-1){
arr[oldindex].innerHTML=oldindex+1
arr[oldindex].className='licopy'
}
oldindex=index
//-----------------------
index++
if(index==arr_img.length){
index=0
}
myTime = setTimeout('update()',2000)
}
function click(i){
img1.src=arr_img[i];
window.clearTimeout(myTime);
var arr=document.getElementsByTagName('li');
for(var j = 0; j < lis.length; j++){
var temp = arr[j];
if(temp.classList.contains("over")){
arr[j].innerHTML=j+1;
arr[j].className='licopy';
}
}
arr[i].innerHTML=arr_adv[i];
arr[i].className='over';
}
</script>
</body>
</html> [/mw_shl_code] |