您的位置：首页 > 其它

自己写的鼠标单击按钮实现图片切换

2016-07-05 20:47 344 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
div{
margin:0 auto;
width:960px;
margin-top:80px;
position:relative;
}
div a{
outline:none;
}
div img{
border:0;
}
div span{
-webkit-opacity: 0.3;
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: .3;
filter:alpha(opacity=30);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
}
div span:hover{
-webkit-opacity: 1.0;
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
opacity: 1.0;
filter:alpha(opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

.left{
background-image:url(140825ad_prevxx.png);
background-repeat:no-repeat;
display: inline-block;
width:50px;
height:50px;
position:absolute;
left:0;
top:136px;
}
.right{
background-image:url(140825ad_nextw.png);
background-repeat:no-repeat;
display: inline-block;
width:50px;
height:50px;
position:absolute;
right:0;
top:136px;
}
</style>
<script>
var img=new Array();
img[0]="1.jpg";
img[1]="2.jpg";
img[2]="3.jpg";
img[3]="4.jpg";
img[4]="5.jpg";

var lianjie=new Array();
lianjie[0]="http://www.123.com";
lianjie[1]="http://www.456.com";
lianjie[2]="http://www.789.com";
lianjie[3]="http://www.369.com";
lianjie[4]="http://www.258.com";

var i=0;
var j=0;
var t=0;

function right()
{
var imgsrc=document.getElementById("img");
var href=document.getElementById("lj");
var numberRight=parseInt(imgsrc.getAttribute("src"));
if(numberRight>=img.length)
{
i=0;
imgsrc.setAttribute("src",img[i]);
href.setAttribute("href",lianjie[i]);
}
else
{
i=numberRight;
imgsrc.setAttribute("src",img[i]);
href.setAttribute("href",lianjie[i]);
}
}

function left()
{
var imgsrc=document.getElementById("img");
var href=document.getElementById("lj");
var numberLeft=parseInt(imgsrc.getAttribute("src"));
if(numberLeft<=1)
{
j=4;
imgsrc.setAttribute("src",img[j]);
href.setAttribute("href",lianjie[j]);
}
else
{
j=numberLeft;
imgsrc.setAttribute("src",img[j-2]);
href.setAttribute("href",lianjie[j-2]);
}
}

function imgMove()
{
var imgsrc=document.getElementById("img");
var href=document.getElementById("lj");
var numberRight=parseInt(imgsrc.getAttribute("src"));
if(numberRight>=img.length)
{
t=0;
imgsrc.setAttribute("src",img[t]);
href.setAttribute("href",lianjie[t]);
}
else
{
i=numberRight;
imgsrc.setAttribute("src",img[t]);
href.setAttribute("href",lianjie[t]);
}
t++;
setTimeout("imgMove()",5000);
}
</script>
</head>

<body>
<div>
<a id="lj" href="http://www.123.com" target="_blank"><img id="img" src="1.jpg" /></a>
<a href="javascript:;"><span class="left" onClick="left()"></span></a>
<a href="javascript:;"><span class="right" onClick="right()"></span></a>
</div>
<script>
window.onload=imgMove;
</script>
</body>
</html>

1.360 ，火狐，谷歌浏览器可以实现其功能，但是存在一个bug, 就是鼠标不停的单击按钮的时候，单击若干次会发生图片无法显示的情况，目前不知道哪里出现问题。

2.IE8 可以兼容，7.6不兼容，不知道哪里出现了问题。

3，按钮背景透明在IE浏览器下存在问题。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航