JS翻页效果按钮怎么改
我想知道这个翻页按钮是怎么弄的，代码里只能改鼠标未经过时按钮的显示图片：left.gif和right.gif，鼠标经过时显示的图片是默认：left_on.gif和righ...
我想知道这个翻页按钮是怎么弄的，代码里只能改鼠标未经过时按钮的显示图片：left.gif和right.gif，鼠标经过时显示的图片是默认：left_on.gif和right_on.gif,这就造成了按钮的图片只能是这个文件名，如果要替换为网络图片的链接就不能用了，有什么办法改掉么？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}，属于站长常用代码，更多{keyword}代码请访问懒人图库JS代码频道。" />
<title>{title}_懒人图库</title>
<script type="text/javascript" src="js/jquery.pack.js"></script>
<script type="text/javascript" src="js/slides.js"></script>
<script type="text/javascript" src="js/slide.js"></script>
<link href="css/lrtk.css" rel="stylesheet" type="text/css">
</head>
<body style="text-align:center">
<div id="maincontent">
<div class="element pict"><a href="#"><img src="image/0001.jpg"></a></div>
<div class="element pict"><a href="#"><img src="image/zhaopin.jpg"></a></div>
<div class="element pict main"><a href="#"><img src="image/002.jpg"></a></div>
<div class="element pict"><a href="#"><img src="image/003.jpg"></a></div>
<div class="element pict"><a href="#"><img src="image/0004.gif"></a></div>
<div class="element pict"><a href="#"><img src="image/weibo.jpg"></a></div>
<div class="element navi left"><img src="image/left.gif" alt="left"></div>
<div class="element navi right"><img src="image/right.gif" alt="right"></div>
</div>
</body>
</html> 展开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}，属于站长常用代码，更多{keyword}代码请访问懒人图库JS代码频道。" />
<title>{title}_懒人图库</title>
<script type="text/javascript" src="js/jquery.pack.js"></script>
<script type="text/javascript" src="js/slides.js"></script>
<script type="text/javascript" src="js/slide.js"></script>
<link href="css/lrtk.css" rel="stylesheet" type="text/css">
</head>
<body style="text-align:center">
<div id="maincontent">
<div class="element pict"><a href="#"><img src="image/0001.jpg"></a></div>
<div class="element pict"><a href="#"><img src="image/zhaopin.jpg"></a></div>
<div class="element pict main"><a href="#"><img src="image/002.jpg"></a></div>
<div class="element pict"><a href="#"><img src="image/003.jpg"></a></div>
<div class="element pict"><a href="#"><img src="image/0004.gif"></a></div>
<div class="element pict"><a href="#"><img src="image/weibo.jpg"></a></div>
<div class="element navi left"><img src="image/left.gif" alt="left"></div>
<div class="element navi right"><img src="image/right.gif" alt="right"></div>
</div>
</body>
</html> 展开
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<title></title>
<style type="text/css">
img{
width:120px;
height:80px;
}
.show{
width:595px;
height:380px;
}
.back{
background-color:blue;
width:700px;
height:380px;
margin:auto;
}
.img1{
background-color:red;
width:120px;
height:80px;
margin-left:600px;
}
.img2{
background-color:red;
width:120px;
height:80px;
margin-top:20px;
margin-left:600px;
}
.img3{
background-color:red;
width:120px;
height:80px;
margin-top:20px;
margin-left:600px;
}
.img4{
background-color:red;
width:120px;
height:80px;
margin-top:20px;
margin-left:600px;
}
.imgc{
background-color:green;
width:595px;
height:380px;
margin-top:-380px;
margin-left:0px;
}
</style>
<script type="text/javascript">
var isone = false;
var istwo = false;
var isthre = false;
var isfour = false;
window.onload = function(){
var showimg = document.getElementById("showImg");
var one = document.getElementById("cho1");
var two = document.getElementById("cho2");
var thre = document.getElementById("cho3");
var four = document.getElementById("cho4");
one.onmouseover = function(){
isone = true;
}
one.onmouseleave = function(){
isone = false;
}
two.onmouseover = function(){
istwo = true;
}
two.onmouseleave = function(){
istwo = false;
}
thre.onmouseover = function(){
isthre = true;
}
thre.onmouseleave = function(){
isthre = false;
}
four.onmouseover = function(){
isfour = true;
}
four.onmouseleave = function(){
isfour = false;
}
this.setInterval(function(){
if(isone){
showimg.src = "mm1_002.jpg";
}
if(istwo){
showimg.src = "mm10_002.jpg";
}
if(isthre){
showimg.src = "mm15_002.jpg";
}
if(isfour){
showimg.src = "mm1_002.jpg";
}
},10);
}
</script>
</head>
<body>
<div class="back">
<div class="img1" id="cho1"><img src="mm1_002.jpg"/></div>
<div class="img2" id="cho2"><img src="mm10_002.jpg"/></div>
<div class="img3" id="cho3"><img src="mm15_002.jpg"/></div>
<div class="img4" id="cho4"><img src="mm1_002.jpg"/></div>
<div class="imgc" id="show"><img src="mm1_002.jpg" id="showImg" class="show"/></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<title></title>
<style type="text/css">
img{
width:120px;
height:80px;
}
.show{
width:595px;
height:380px;
}
.back{
background-color:blue;
width:700px;
height:380px;
margin:auto;
}
.img1{
background-color:red;
width:120px;
height:80px;
margin-left:600px;
}
.img2{
background-color:red;
width:120px;
height:80px;
margin-top:20px;
margin-left:600px;
}
.img3{
background-color:red;
width:120px;
height:80px;
margin-top:20px;
margin-left:600px;
}
.img4{
background-color:red;
width:120px;
height:80px;
margin-top:20px;
margin-left:600px;
}
.imgc{
background-color:green;
width:595px;
height:380px;
margin-top:-380px;
margin-left:0px;
}
</style>
<script type="text/javascript">
var isone = false;
var istwo = false;
var isthre = false;
var isfour = false;
window.onload = function(){
var showimg = document.getElementById("showImg");
var one = document.getElementById("cho1");
var two = document.getElementById("cho2");
var thre = document.getElementById("cho3");
var four = document.getElementById("cho4");
one.onmouseover = function(){
isone = true;
}
one.onmouseleave = function(){
isone = false;
}
two.onmouseover = function(){
istwo = true;
}
two.onmouseleave = function(){
istwo = false;
}
thre.onmouseover = function(){
isthre = true;
}
thre.onmouseleave = function(){
isthre = false;
}
four.onmouseover = function(){
isfour = true;
}
four.onmouseleave = function(){
isfour = false;
}
this.setInterval(function(){
if(isone){
showimg.src = "mm1_002.jpg";
}
if(istwo){
showimg.src = "mm10_002.jpg";
}
if(isthre){
showimg.src = "mm15_002.jpg";
}
if(isfour){
showimg.src = "mm1_002.jpg";
}
},10);
}
</script>
</head>
<body>
<div class="back">
<div class="img1" id="cho1"><img src="mm1_002.jpg"/></div>
<div class="img2" id="cho2"><img src="mm10_002.jpg"/></div>
<div class="img3" id="cho3"><img src="mm15_002.jpg"/></div>
<div class="img4" id="cho4"><img src="mm1_002.jpg"/></div>
<div class="imgc" id="show"><img src="mm1_002.jpg" id="showImg" class="show"/></div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
