前台代码:
<div id="soutu">
<div id="zhuan">这里只是放一张图片而已
<img alt="" src="../Images/a.jpg?http://www.xvna.com" width="750" height="330" />
</div>
</div>
<div id="tuzi">这里调用脚本函数
<a href="#" onmousemove="showLink(1)" class="aTaohang">1</a>
<a href="#" onmousemove="showLink(2)"class="aTaohang">2</a>
<a href="#" onmousemove="showLink(3)" class="aTaohang">3</a>
<a href="#" onmousemove="showLink(4)" class="aTaohang">4</a>
</div>
脚本:这里可我做成一个JS文件,放在前台调用,这样就方便点。
var time = window.setInterval("luen()", 5000);
function showLink(num) {
window.clearTimeout(time);
if (num == 1) {
document.getElementById("soutu").innerHTML = "<div id='zhuan' ><img src='../DataImages/1342.jpg?http://www.xvna.com' width='750' height='330' /></div>"
}
if (num == 2) {
document.getElementById("soutu").innerHTML = "<div id='zhuan' ><img src='../DataImages/1370.jpg?http://www.xvna.com' width='750' height='330'/></div>"
}
if (num == 3) {
document.getElementById("soutu").innerHTML = "<div id='zhuan' ><img src='../DataImages/1452.jpg?http://www.xvna.com' width='750' height='330'/></div>"
}
if (num == 4) {
document.getElementById("soutu").innerHTML = "<div id='zhuan' ><img src='../DataImages/1448.jpg?http://www.xvna.com' width='750' height='330'/></div>"
}
}
function out() {
time = window.setInterval("luen()", 5000);
}
var tmp = 0;
function luen() {
tmp++;
if (tmp == 1) {
document.getElementById("soutu").innerHTML = "<div id='zhuan' ><img src='../DataImages/1342.jpg?http://www.xvna.com' width='750' height='330'/></div>"
}
else if (tmp == 2) {
document.getElementById("soutu").innerHTML = "<div id='zhuan' ><img src='../DataImages/1370.jpg?http://www.xvna.com' width='750' height='330'/></div>"
}
else if (tmp == 3) {
document.getElementById("soutu").innerHTML = "<div id='zhuan' ><img src='../DataImages/1452.jpg?http://www.xvna.com' width='750' height='330'/></div>"
}
else if (tmp == 4) {
document.getElementById("soutu").innerHTML = "<div id='zhuan' ><img src='../DataImages/1448.jpg?http://www.xvna.com' width='750' height='330'/></div>"
}
else {
tmp = 0;
}
}
function showbuy(divId) {
document.getElementById(divId).style.display = "block";
}
function disbuy(divId){
document.getElementById(divId).style.display = "none";
}
样式:
.aTaohang
{
display: block;
float: left;
font-size: 15px;
font-weight: 600;
color: White;
background-color: Gray;
width: 173px;
height: 20px;
text-align: center;
margin: 1px;
text-decoration: none;
}
.aTaohang:hover
{
color: Gray;
background-color: White;
}