极客观点
项目管理
HarmonyOS
现在是可以执行，请问改如果改成淡入淡出类的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
<style>
*{margin:0px;padding:0px;}
img{border:none;}
ol li,ul li{list-style-type:none;}
body{
text-align:center;
color:#333;
font-family:"Microsoft YaHei";
}
#tags {
width: 100%;
height: 100px;
overflow: hidden;
}
#tags li {
float: left;
list-style-type: none;
margin: 0 10px;
}
#tags li a {
float: left;
color: #999;
text-decoration: none;
width: 225px;
height: 100px;
}
#tags li.selectTag {
background-position: left top;
position: relative;
height: 100px;
}
#tags li.selectTag a {
background-position: right top;
height: 100px;
}
#tagContent {width: 100%;}
#tagContent div.selectTag {display: block}
.tagContent {
display: none;
width: 100%;
}
.tagContent img{width: 100%;}
</style>
</head>
<body>
<ul id="tags">
<li class="selectTag"><a onmouseover="selectTag('tagContent0',this)" href="1"><img src="banner_01.png" /></a></li>
<li><a onmouseover="selectTag('tagContent1',this)" href="2"><img src="banner_02.png" /></a></li>
<li><a onmouseover="selectTag('tagContent2',this)" href="3"><img src="banner_03.png" /></a></li>
<li><a onmouseover="selectTag('tagContent3',this)" href="4"><img src="banner_04.png" /></a></li>
</ul>
<div id="tagContent">
<div class="tagContent selectTag" id="tagContent0"><a href="1"><img src="banner_1.jpg" /></a></div>
<div class="tagContent" id="tagContent1"><a href="2"><img src="banner_2.jpg" /></a></div>
<div class="tagContent" id="tagContent2"><a href="3"><img src="banner_1.jpg" /></a></div>
<div class="tagContent" id="tagContent3"><a href="4"><img src="banner_2.jpg" /></a></div>
</div>
<script type="text/javascript">
function selectTag(showContent,selfObj){
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
for(i=0; j=document.getElementById("tagContent"+i); i++){
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}
var x=0;
function scrollTag(){
var tags=document.getElementById("tags").getElementsByTagName("a");
if(x<2){x=x+1}
else
x=0;
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
tags[x].parentNode.className = "selectTag";
for(i=0; j=document.getElementById("tagContent"+i);i++){
j.style.display = "none";
}
document.getElementById("tagContent"+x).style.display = "block";
}
var scrolll=setInterval(scrollTag,3000);
function zhuan(){
clearInterval(scrolll);
}
function jixu(){
scrolll=setInterval(scrollTag,3000);
}
</script>
</body>
</html>
呃，我就想知道题主为啥挂着jq不用……