<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
var i = 1;
$(document).ready(function () {
$("#perDiv").mouseover(function () {
$("#perDiv").css({ "background": "none" });
});
$("#nextDiv").mouseover(function () {
$("#nextDiv").css({ "background": "none" });
});
$("#perDiv").mouseleave(function () {
$("#perDiv").css({ "background": "none" });
});
$("#nextDiv").mouseleave(function () {
$("#nextDiv").css({ "background": "none" });
});
$("#perDiv").click(function () {
if (i >= 8) {
i = 8;
}
i--;
switch (i) {
case 1:
$("#img1Div").css({ "background-image": "url(http://www.elecshack.com/800/UploadFiles/Halley1.jpg)", "display": "block" }).siblings().css({ "display": "none" });
break;
case 2:
$("#img2Div").css({ "background-image": "url(http://www.elecshack.com/800/UploadFiles/Halley2.jpg)", "display": "block" }).siblings().css({ "display": "none" });
break;
case 3:
$("#img3Div").css({ "background-image": "url(http://www.elecshack.com/800/UploadFiles/Halley3.jpg)", "display": "block" }).siblings().css({ "display": "none" });
break;
case 4:
$("#img4Div").css({ "background-image": "url(http://www.elecshack.com/800/UploadFiles/Halley4.jpg)", "display": "block" }).siblings().css({ "display": "none" });
break;
case 5:
$("#img5Div").css({ "background-image": "url(http://www.elecshack.com/800/UploadFiles/Halley5.jpg)", "display": "block" }).siblings().css({ "display": "none" });
break;
case 6:
$("#img6Div").css({ "background-image": "url(http://www.elecshack.com/800/UploadFiles/Halley6.jpg)", "display": "block" }).siblings().css({ "display": "none" });
break;
case 7:
$("#img7Div").css({ "background-image": "url(http://www.elecshack.com/800/UploadFiles/Halley7.jpg)", "display": "block" }).siblings().css({ "display": "none" });
break;
default:
$("#img8Div").css({ "background-image": "url(http://www.elecshack.com/800/UploadFiles/Halley1.jpg)", "display": "block" }).siblings().css({ "display": "none" });
break;
}
});
$("#nextDiv").click(function () {
if (i <= 1) {
i = 1;
}
i++;
switch (i) {
case 1:
$("#img1Div").css({ "background-image": "url(http://www.elecshack.com/800/UploadFiles/Halley1.jpg)", "display": "block" }).siblings().css({ "display": "none" });
break;
case 2:
$("#img2Div").css({ "background-image": "url(http://www.elecshack.com/800/UploadFiles/Halley2.jpg)", "display": "block" }).siblings().css({ "display": "none" });
break;
case 3:
$("#img3Div").css({ "background-image": "url(http://www.elecshack.com/800/UploadFiles/Halley3.jpg)", "display": "block" }).siblings().css({ "display": "none" });
break;
case 4:
$("#img4Div").css({ "background-image": "url(http://www.elecshack.com/800/UploadFiles/Halley4.jpg)", "display": "block" }).siblings().css({ "display": "none" });
break;
case 5:
$("#img5Div").css({ "background-image": "url(http://www.elecshack.com/800/UploadFiles/Halley5.jpg)", "display": "block" }).siblings().css({ "display": "none" });
break;
case 6:
$("#img6Div").css({ "background-image": "url(http://www.elecshack.com/800/UploadFiles/Halley6.jpg)", "display": "block" }).siblings().css({ "display": "none" });
break;
case 7:
$("#img7Div").css({ "background-image": "url(http://www.elecshack.com/800/UploadFiles/Halley7.jpg)", "display": "block" }).siblings().css({ "display": "none" });
break;
default:
$("#img8Div").css({ "background-image": "url(http://www.elecshack.com/800/UploadFiles/Halley1.jpg)", "display": "block" }).siblings().css({ "display": "none" });
break;
}
});
});
</script>
<div id="outDiv" style=" position: absolute; width:1150px; height:658px;">
<div>
<div id="img1Div" style="display:block; width:1150px; height:658px; background-image:url(http://www.elecshack.com/800/UploadFiles/Halley1.jpg);">
</div>
<div id="img2Div" style="display:none; width:1150px; height:658px; background-image:url(http://www.elecshack.com/800/UploadFiles/Halley2.jpg);">
</div>
<div id="img3Div" style="display:none; width:1150px; height:658px;background-image:url(http://www.elecshack.com/800/UploadFiles/Halley3.jpg);">
</div>
<div id="img4Div" style="display:none; width:1150px; height:658px; background-image:url(http://www.elecshack.com/800/UploadFiles/Halley4.jpg);">
</div>
<div id="img5Div" style="display:none; width:1150px; height:658px; background-image:url(http://www.elecshack.com/800/UploadFiles/Halley5.jpg);">
</div>
<div id="img6Div" style="display:none; width:1150px; height:658px; background-image:url(http://www.elecshack.com/800/UploadFiles/Halley6.jpg);">
</div>
<div id="img7Div" style="display:none; width:1150px; height:658px; background-image:url(http://www.elecshack.com/800/UploadFiles/Halley7.jpg);">
</div>
<div id="img8Div" style="display:none; width:1150px; height:658px; background-image:url(http://www.elecshack.com/800/UploadFiles/Halley1.jpg);">
</div>
</div>
<div id="perDiv" style="display:block; position: absolute;width:100px; height:600px; top:20px; left:20px; z-index: 10; cursor: pointer;"></div>
<div id="nextDiv" style="display:block; position: absolute;width:100px; height:600px; top:20px; right:20px; z-index: 10; cursor: pointer;"></div>
</div>