頁面核心代碼
<div class="first_top">
<div class="back">
<img src="../assets/img/back@3x.png" class="imgup"></img>
</div>
<div class="use_book">使用說明</div>
</div>
<article class="wrap">
<header>
<div class="bg-img" id="div1">
<img class="imgto" src="../assets/img/1.png" usemap="#planetmap" alt="Planets" border="0"/>
<button class="but1" ></bitton>
<map name="planetmap" id="planetmap">
<area
shape="rect"
coords="0,0,0,0"
alt="rec"
id="single_ac"
/>
</map>
</div>
</header>
</article>
js代碼：
$(function(){
// 創建對象
var img = new Image();
var src=jQuery(".imgto").attr("src");
img.src = src;
// 判斷是否有緩存
if(img.complete){
var divheight=document.getElementById("div1").offsetHeight;
var divwidth=document.getElementById("div1").offsetWidth;
var y1=Math.round(divheight*(420/1144));
var x1=0;
var x2=divwidth;
var y2=20000;
var coords=x1+","+y1+","+x2+","+y2;
$("#single_ac").attr("coords",coords);
}else{
img.onload = function(){
var divheight=document.getElementById("div1").offsetHeight;
var divwidth=document.getElementById("div1").offsetWidth;
var y1=Math.round(divheight*(420/1144));
var x1=0;
var x2=divwidth;
var y2=20000;
var coords=x1+","+y1+","+x2+","+y2;
$("#single_ac").attr("coords",coords);
};
};
})
//圖片的控制js代碼
jQuery("#single_ac").click(function(){
var src=jQuery(".imgto").attr("src");
var array=src.split("/");
var str=array[array.length-1];
var array2=str.split(".");
var imgsize=parseInt(array2[0])+parseInt(1);
if(array2[0]==3){
jQuery(".imgto").attr("src","../assets/img/11.png"); //拍照圖片
} else{
if(imgsize<11||(imgsize>11&&imgsize<17)){
jQuery(".imgto").attr("src","../assets/img/"+imgsize+".png");
}
//圖片點擊完成（自行處理）
if(imgsize==11||imgsize==17){
}
}
})
//下一張圖片
$(".imgto").click(function(){
var src=jQuery(".imgto").attr("src");
var array=src.split("/");
var str=array[array.length-1];
var array2=str.split(".");
var imgsize=parseInt(array2[0])+parseInt(1);
//控制顯示圖片的張數
if(imgsize<11||(imgsize>11&&imgsize<17)){
jQuery(".imgto").attr("src","../assets/img/"+imgsize+".png");
}
//圖片點擊完成（自行處理）
if(imgsize==11||imgsize==17){
}
})
//上一張圖片
$(".imgup").click(function(){
var src=jQuery(".imgto").attr("src");
var array=src.split("/");
var str=array[array.length-1];
var array2=str.split(".");
var imgsize=parseInt(array2[0])-parseInt(1);
//已經回到第一張
if(imgsize>0){
if(imgsize==10){
jQuery(".imgto").attr("src","../assets/img/"+3+".png");
}else{
jQuery(".imgto").attr("src","../assets/img/"+imgsize+".png");
}
}
})