自己寫的滑鼠單擊按鈕實現圖片切換
阿新 • • 發佈：2019-02-05
<!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瀏覽器下存在問題。