在线求有左右箭头浏览图片的代码

Jackin86 2010-08-31 09:43:40

点击左箭头标则向左滚动一张反之则向右滚动一张，希望这里的朋友可以帮帮忙，不胜感激！

...全文

853 24 打赏收藏转发到动态举报

写回复

用AI写文章

24 条回复

切换为时间正序

请发表友善的回复…

发表回复

Adechen 2010-09-01

打赏
举报

搜索楼上的条件，有好多的

yuxh81 2010-09-01

打赏
举报

搜索：
js图片切换效果，jquery图片切换插件

hu_86727515 2010-09-01

打赏
举报

jquery 插件

离洛 2010-09-01

打赏
举报

http://www.scriptlover.com/controls/main.html 简单易懂；并且实用；

而且还包含了很多的效果，对你很有帮助；

脾气不坏 2010-09-01

打赏
举报

http://www.po-soft.com/blog/xuan

找找吧

wosizy 2010-09-01

打赏
举报

仿QQ相册带左右箭头控制的图片浏览效果
自己去下载吧..........
http://www.codefans.net/soft/8135.shtml

mengjun5200 2010-09-01

打赏
举报

用jquery来实现，很方便

liaay 2010-09-01

打赏
举报

我是新手，顶下

porschev 2010-09-01

打赏
举报

可左右翻页的相册效果

阿彪兄 2010-09-01

打赏
举报

*{margin:0;padding:0;}
body {font-size: 12px;margin: 20px;}
/*核心CSS*/
.box,p {
margin:0 auto;
text-align:center;
width:550px;
}
.CRviewer {
position:relative;
overflow:hidden;
height:450px;
width:550px;
background:#fff url(images/loading.gif) center center no-repeat;
}
.CRslide{
position:absolute;
width:550px;
height:450px;
left:0;
top:0;
}
.CRslide li {
float:left;
display:none;
}
#myImgs {
display:none;
}
.hoverNav {
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
z-index:100;
}
.prevLink, .nextLink , .full {
background:transparent url(images/blank.gif) no-repeat scroll 0 0;
display:block;
height:100%;
width:30%;
position:absolute;
}
.prevLink { left: 0;x}
.nextLink { right: 0;}
.full { left:190px;}
.prevLink:hover, .prevLink:visited:hover {
background: url(images/prevlabel.gif) left 50% no-repeat ;
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}
.nextLink:hover, .nextLink:visited:hover {
background: url(images/nextlabel.gif) right 50% no-repeat;
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}
.full:hover, .full:visited:hover {
background: url(images/full.gif) center 50% no-repeat;
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}

/**/
.CRrain{color:red;}
p{margin-top:30px;font-size:14px;}

<!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>三种不同的实现方法完成类似QQ空间图片展示效果(上一张、下一张) by www.865171.cn</title>
<link rel="stylesheet" type="text/css" href="cr.css" />
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var $lists = $(".CRslide li");
var length = $lists.length;
var i = 0;
/*下一张*/
$(".nextLink").click(function(){
i++;
if( i > (length-1)){
i = 0 ;
}
showImg(i);
return false;
});
/*上一张*/
$(".prevLink").click(function(){
i--;
if( i < 0){
i = length-1 ;
}
showImg(i);
return false;
});

$("a").focus(function(){
$(this).blur();
return false;
});

function showImg(i) {
$lists.hide().eq(i).show();
$(".CRrain").text(i+1);
}

showImg(0);//进入页面初始化
});
</script>
</head>
<body>
<div class="box">
<div class="CRviewer">
<ul class="CRslide" >
<li><img src="images/q1.jpg"/></li>
<li><img src="images/q2.jpg"/></li>
<li><img src="images/q3.jpg"/></li>
<li><img src="images/q4.jpg"/></li>
</ul>
<div class="hoverNav">
<a class="prevLink" href="#"></a>
<a class="nextLink" href="#"></a>
</div>
</div>
</div>

<p>当前显示的是第 <strong class="CRrain">0</strong> 张</p>

<p>© <a href="http://www.865171.cn" >www.865171.cn</a></p>
</body>
</html>

myhope88 2010-09-01