CSS+JS经典实用的图片展示效果丨芯晴网页特效丨CsrCode.Cn
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS+JS经典实用的图片展示效果丨芯晴网页特效丨CsrCode.Cn</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
body,div,dl,dt,dd,ul,li{margin:0;padding:0;}
ul,li{list-style:none;}
img {border:none;}
a:link,a:visited{color:black;text-decoration:none;}
a:hover{text-decoration:underline;}
h3{font-size:14px;font-family:"微软雅黑";}
.wrap{width:960px;height:570px;margin:10px auto;padding:5px 0px;background:#333;}
#viewbox{width:960px;height:570px;margin:0px auto;}
#bigPicList{width:950px;height:480px;margin:0px 5px;background:#fff;position:relative;z-index:2;overflow:hidden;}
#bigpic{width:950px;height:480px;position:absolute;left:0px;top:0px;z-index:11;}
#bigpic.loading{background:#040204 url(http://www.csrcode.cn/imagesforcode/201207/loading.gif) 50% 50% no-repeat;}
.p_left{width:475px;height:480px;position:absolute;left:0px;top:0px;z-index:111;}
.p_left a.prev,.p_right a.next{display:block;position:aboslute;z-index:211;width:475px;height:480px;top:5px;left:5px;background:url(http://www.csrcode.cn/imagesforcode/201207/prev-next.png) no-repeat -90px center;_background:url(http://www.csrcode.cn/imagesforcode/201207/prev-next.gif) no-repeat -90px center;}
.p_left a.prev:hover{background:url(http://www.csrcode.cn/imagesforcode/201207/prev-next.png) no-repeat 0px center;_background:url(http://www.csrcode.cn/imagesforcode/201207/prev-next.gif) no-repeat 0px center;}
.p_right{width:475px;height:480px;position:absolute;right:0px;top:0px;z-index:111;cursor:pointer;}
.p_right a.next:hover{background:url(http://www.csrcode.cn/imagesforcode/201207/prev-next.png) no-repeat -445px center;_background:url(http://www.csrcode.cn/imagesforcode/201207/prev-next.gif) no-repeat -475px center;}
#smallPicList{width:950px;height:90px;margin:0px auto;overflow:hidden;}
#smallPicList ul{width:952px;}
#smallPicList ul li{width:117px;height:80px;float:left;padding:10px 0px 0px;margin:0px 2px 0px 0px;display:inline;}
#smallPicList ul li.current{background:url(http://www.csrcode.cn/imagesforcode/201207/arrow.gif) center top no-repeat;}
#smallPicList ul li a{display:block;width:113px;height:76px;background:#fff; border:2px #fff solid;}
</style>
<script type="text/javascript">
function getStyle(obj, attr){return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]}
function G(o){return document.getElementById(o)}
window.onload = function(){
var oData = [
{"big_src":"http://www.csrcode.cn/images/1.jpg"},{"big_src":"http://www.csrcode.cn/images/2.jpg"},{"big_":"http://www.csrcode.cn/images/3.jpg"},{"big_src":"http://www.csrcode.cn/images/4.jpg"},{"big_src":"http://www.csrcode.cn/images/5.jpg"},{"big_src":"http://www.csrcode.cn/images/6.jpg"},{"big_src":"http://www.csrcode.cn/images/7.jpg"},{"big_src":"http://www.csrcode.cn/images/8.jpg"},{"big_src":"http://www.csrcode.cn/images/9.jpg"},{"big_src":"http://www.csrcode.cn/images/10.jpg"}];
var iNow = oScroll = start = 0;
var timer = null;
var oBig = G("bigpic");
var oBtnL = G("prev");
var oBtnR = G("next");
var oUl = G("smallPicList").getElementsByTagName("ul")[0];
var smallpic = G("smallPicList").getElementsByTagName("li");
var oLi_width = smallpic[0].clientWidth + 2;
var oLi_num = smallpic.length;
var oUl_allWidth = oLi_width * oLi_num;
oUl.style.width = oUl_allWidth + "px";
oBtnL.onclick = function(){
if(iNow <= 0)
{
alert("前面已经没有图片了");
return;
}
doLMove();
iNow--;
loadImg();
};
oBtnR.onclick = function(){
if(iNow >= oData.length-1)
{
alert("这是最后一张图片了");
return;
}
iNow++;
doRMove();
loadImg();
};
function doRMove(){
if(iNow>7)
{
var num = iNow-7;
oScroll = -(num*oLi_width) + "px";
oUl.style.marginLeft = oScroll;
}
}
function doLMove(){
if(iNow >=7){
var num = iNow -7;
oUl.style.marginLeft = -(num*oLi_width) + "px";
}
}
for(var n=0; n<oLi_num;n++)
{
smallpic[n].index = n;
smallpic[n].onmouseover = function(){
for(var f=0; f<oLi_num;f++)
{
smallpic[f].className = "";
this.className = "current";
}
iNow = this.index;
loadImg();
};
};
loadImg();
function loadImg(){
oBig.className = "loading";
var oImg = oBig.getElementsByTagName("img");
if(oImg.length){
oBig.innerHTML = "";
}
var oTemp = document.createElement("img");
var oNewImg = new Image();
oNewImg.onload = function(){
oBig.className = "";
oTemp.src = this.src;
oBig.appendChild(oTemp);
oTemp.style.width = "950px";
oTemp.style.height = "480px";
}
oNewImg.src = oData[iNow].big_src;
for(var i =0; i<oLi_num; i++)
{
if(i == iNow)
{
smallpic[i].className = "current";
}else {
smallpic[i].className = "";
}
}
}
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="wrap">
<div id="viewbox">
<div id="bigPicList">
<div class="p_left"><a href="javascript:void(0)" class="prev" id="prev" onfocus="this.blur();"></a></div>
<div class="p_right"><a href="javascript:void(0)" class="next" id="next" onfocus="this.blur();"></a></div>
<div id="bigpic"></div>
</div>
<div id="smallPicList">
<ul>
<li><a href="#nogo"><img src="http://www.csrcode.cn/images/s1.jpg" width="113" height="76"></a></li>
<li><a href="#nogo"><img src="http://www.csrcode.cn/images/s2.jpg" width="113" height="76"></a></li>
<li><a href="#nogo"><img src="http://www.csrcode.cn/images/s3.jpg" width="113" height="76"></a></li>
<li><a href="#nogo"><img src="http://www.csrcode.cn/images/s4.jpg" width="113" height="76"></a></li>
<li><a href="#nogo"><img src="http://www.csrcode.cn/images/s5.jpg" width="113" height="76"></a></li>
<li><a href="#nogo"><img src="http://www.csrcode.cn/images/s6.jpg" width="113" height="76"></a></li>
<li><a href="#nogo"><img src="http://www.csrcode.cn/images/s7.jpg" width="113" height="76"></a></li>
<li><a href="#nogo"><img src="http://www.csrcode.cn/images/s8.jpg" width="113" height="76"></a></li>
<li><a href="#nogo"><img src="http://www.csrcode.cn/images/s9.jpg" width="113" height="76"></a></li>
<li><a href="#nogo"><img src="http://www.csrcode.cn/images/s10.jpg" width="113" height="76"></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS+JS经典实用的图片展示效果丨芯晴网页特效丨CsrCode.Cn</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
body,div,dl,dt,dd,ul,li{margin:0;padding:0;}
ul,li{list-style:none;}
img {border:none;}
a:link,a:visited{color:black;text-decoration:none;}
a:hover{text-decoration:underline;}
h3{font-size:14px;font-family:"微软雅黑";}
.wrap{width:960px;height:570px;margin:10px auto;padding:5px 0px;background:#333;}
#viewbox{width:960px;height:570px;margin:0px auto;}
#bigPicList{width:950px;height:480px;margin:0px 5px;background:#fff;position:relative;z-index:2;overflow:hidden;}
#bigpic{width:950px;height:480px;position:absolute;left:0px;top:0px;z-index:11;}
#bigpic.loading{background:#040204 url(http://www.csrcode.cn/imagesforcode/201207/loading.gif) 50% 50% no-repeat;}
.p_left{width:475px;height:480px;position:absolute;left:0px;top:0px;z-index:111;}
.p_left a.prev,.p_right a.next{display:block;position:aboslute;z-index:211;width:475px;height:480px;top:5px;left:5px;background:url(http://www.csrcode.cn/imagesforcode/201207/prev-next.png) no-repeat -90px center;_background:url(http://www.csrcode.cn/imagesforcode/201207/prev-next.gif) no-repeat -90px center;}
.p_left a.prev:hover{background:url(http://www.csrcode.cn/imagesforcode/201207/prev-next.png) no-repeat 0px center;_background:url(http://www.csrcode.cn/imagesforcode/201207/prev-next.gif) no-repeat 0px center;}
.p_right{width:475px;height:480px;position:absolute;right:0px;top:0px;z-index:111;cursor:pointer;}
.p_right a.next:hover{background:url(http://www.csrcode.cn/imagesforcode/201207/prev-next.png) no-repeat -445px center;_background:url(http://www.csrcode.cn/imagesforcode/201207/prev-next.gif) no-repeat -475px center;}
#smallPicList{width:950px;height:90px;margin:0px auto;overflow:hidden;}
#smallPicList ul{width:952px;}
#smallPicList ul li{width:117px;height:80px;float:left;padding:10px 0px 0px;margin:0px 2px 0px 0px;display:inline;}
#smallPicList ul li.current{background:url(http://www.csrcode.cn/imagesforcode/201207/arrow.gif) center top no-repeat;}
#smallPicList ul li a{display:block;width:113px;height:76px;background:#fff; border:2px #fff solid;}
</style>
<script type="text/javascript">
function getStyle(obj, attr){return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]}
function G(o){return document.getElementById(o)}
window.onload = function(){
var oData = [
{"big_src":"http://www.csrcode.cn/images/1.jpg"},{"big_src":"http://www.csrcode.cn/images/2.jpg"},{"big_":"http://www.csrcode.cn/images/3.jpg"},{"big_src":"http://www.csrcode.cn/images/4.jpg"},{"big_src":"http://www.csrcode.cn/images/5.jpg"},{"big_src":"http://www.csrcode.cn/images/6.jpg"},{"big_src":"http://www.csrcode.cn/images/7.jpg"},{"big_src":"http://www.csrcode.cn/images/8.jpg"},{"big_src":"http://www.csrcode.cn/images/9.jpg"},{"big_src":"http://www.csrcode.cn/images/10.jpg"}];
var iNow = oScroll = start = 0;
var timer = null;
var oBig = G("bigpic");
var oBtnL = G("prev");
var oBtnR = G("next");
var oUl = G("smallPicList").getElementsByTagName("ul")[0];
var smallpic = G("smallPicList").getElementsByTagName("li");
var oLi_width = smallpic[0].clientWidth + 2;
var oLi_num = smallpic.length;
var oUl_allWidth = oLi_width * oLi_num;
oUl.style.width = oUl_allWidth + "px";
oBtnL.onclick = function(){
if(iNow <= 0)
{
alert("前面已经没有图片了");
return;
}
doLMove();
iNow--;
loadImg();
};
oBtnR.onclick = function(){
if(iNow >= oData.length-1)
{
alert("这是最后一张图片了");
return;
}
iNow++;
doRMove();
loadImg();
};
function doRMove(){
if(iNow>7)
{
var num = iNow-7;
oScroll = -(num*oLi_width) + "px";
oUl.style.marginLeft = oScroll;
}
}
function doLMove(){
if(iNow >=7){
var num = iNow -7;
oUl.style.marginLeft = -(num*oLi_width) + "px";
}
}
for(var n=0; n<oLi_num;n++)
{
smallpic[n].index = n;
smallpic[n].onmouseover = function(){
for(var f=0; f<oLi_num;f++)
{
smallpic[f].className = "";
this.className = "current";
}
iNow = this.index;
loadImg();
};
};
loadImg();
function loadImg(){
oBig.className = "loading";
var oImg = oBig.getElementsByTagName("img");
if(oImg.length){
oBig.innerHTML = "";
}
var oTemp = document.createElement("img");
var oNewImg = new Image();
oNewImg.onload = function(){
oBig.className = "";
oTemp.src = this.src;
oBig.appendChild(oTemp);
oTemp.style.width = "950px";
oTemp.style.height = "480px";
}
oNewImg.src = oData[iNow].big_src;
for(var i =0; i<oLi_num; i++)
{
if(i == iNow)
{
smallpic[i].className = "current";
}else {
smallpic[i].className = "";
}
}
}
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="wrap">
<div id="viewbox">
<div id="bigPicList">
<div class="p_left"><a href="javascript:void(0)" class="prev" id="prev" onfocus="this.blur();"></a></div>
<div class="p_right"><a href="javascript:void(0)" class="next" id="next" onfocus="this.blur();"></a></div>
<div id="bigpic"></div>
</div>
<div id="smallPicList">
<ul>
<li><a href="#nogo"><img src="http://www.csrcode.cn/images/s1.jpg" width="113" height="76"></a></li>
<li><a href="#nogo"><img src="http://www.csrcode.cn/images/s2.jpg" width="113" height="76"></a></li>
<li><a href="#nogo"><img src="http://www.csrcode.cn/images/s3.jpg" width="113" height="76"></a></li>
<li><a href="#nogo"><img src="http://www.csrcode.cn/images/s4.jpg" width="113" height="76"></a></li>
<li><a href="#nogo"><img src="http://www.csrcode.cn/images/s5.jpg" width="113" height="76"></a></li>
<li><a href="#nogo"><img src="http://www.csrcode.cn/images/s6.jpg" width="113" height="76"></a></li>
<li><a href="#nogo"><img src="http://www.csrcode.cn/images/s7.jpg" width="113" height="76"></a></li>
<li><a href="#nogo"><img src="http://www.csrcode.cn/images/s8.jpg" width="113" height="76"></a></li>
<li><a href="#nogo"><img src="http://www.csrcode.cn/images/s9.jpg" width="113" height="76"></a></li>
<li><a href="#nogo"><img src="http://www.csrcode.cn/images/s10.jpg" width="113" height="76"></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
网页特效：www.CsrCode.cn 快播电影：www.33567.cn丨www.7caidy.com
