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

最新推荐文章于 2021-05-30 22:37:39 发布

ios0213

最新推荐文章于 2021-05-30 22:37:39 发布

阅读量1.7k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/ios0213/article/details/51834490

版权

JavaScript 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

<!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.οnlοad=imgMove;
</script>
</body>
</html>

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

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

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

ios0213

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
自己写的鼠标单击按钮实现图片切换

无标题文档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
复制链接

扫一扫

专栏目录