做不出，搜不到，实在无奈，求一个效果！
<p ><strong>bdsdsh</strong> 发表于 2010-2-3 13:54</p>
<h3>做不出，搜不到，实在无奈，求一个效果！</h3>大家看图吧！
希望那个有个面向对象的
实在无奈啊<p ><strong>xxcss</strong> 发表于 2010-2-3 14:15</p>
这是典型的图片分页要具体问题具体分析 如果点下一组 页面跳转的话
和下一组 页面不跳是不一样的
如果点下一组 页面跳转的话 很简单你只要会分页就好了
如果是不变的话 就是一次把所有的图都载入进来 在js分页 表现象土豆下面影片导航 利用overflow:hidden在那里移动来移动去的
不过都是分页的变体
[[i] 本帖最后由 xxcss 于 2010-2-3 14:19 编辑 [/i]]<p ><strong>bdsdsh</strong> 发表于 2010-2-3 14:23</p>
不用分页的，就是一个div控制宽度，只让显示前6个，点击“下一组”显示后6个。
点击其中一个小图片，该小图片高亮，同时大图片也切换到。
应该是综合运用了tab选项卡和滚动的效果。
但是偶写不出啊<p ><strong>DellGrass</strong> 发表于 2010-2-3 16:25</p>
[code]
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>这个网页是我用来作试验的</title>
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
#content{text-align:center;width:300px;position:relative;margin:100px auto; 0}
#wrape{position:relative;height:70px;width:288px;margin:0 0 100px;overflow:hidden;z-index:10;}
#slid{position:absolute;left:0;top:0;}
#slid li{float:left;padding-right:5px;}
#slid img{width:85px;height:60px;padding:2px;border:1px solid #ccc;cursor:pointer;filter:alpha(opacity=50);opacity:0.5;}
#slid img.on{filter:alpha(opacity=100);opacity:1;cursor: auto;}
#pre,#next{position:absolute;top:0px;left:-30px;width:20px;cursor:pointer;}
#next{left:auto;right:-30px;}
</style>
</head>
<body>
<div id="content">
<div id="wrape">
<ul id="slid">
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_12651273848S6a_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_1265126178Wj9r_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_1265125144i1c0_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_1265124828qrfZ_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_1265124326Jc9z_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_1265124070F1Ls_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_12651233291P7P_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_12651273848S6a_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_12651273848S6a_t.jpg" alt="" /></li>
</ul>
</div>
<img id="img" src="http://home.blueidea.com/attachment/201002/2/340113_126512769357Z3_t.jpg" alt="" />
<p id="pre">
上一组
</p>
<p id="next">
下一组
</p>
</div>
<script type="text/javascript">
var $ = function(id){
return document.getElementById(id);
}
var width = $('wrape').clientWidth;
var imgs = $('slid').getElementsByTagName('img');
var lis = $('slid').getElementsByTagName('li');
var ulWidth = lis[0].clientWidth*lis.length
$('slid').style.width = ulWidth + 'px';
for(var i =0;i<imgs.length;i++){
imgs[i].onclick = function(){
var src = this.src;
removeClassName();
this.className = 'on';
$('img').src = src;
}
};
var removeClassName = function(){
for(var i =0;i<imgs.length;i++){
if(imgs[i].className == 'on'){
imgs[i].className ='';
}
};
}
$('pre').onclick = function(){
var left = parseInt($('slid').style.left) || 0;
if(left < 0){
$('slid').style.left = (left + width) + 'px';
}
}
$('next').onclick = function(){
var left = parseInt($('slid').style.left) || 0;
if(-left < ulWidth - width){
$('slid').style.left = (left - width) + 'px';
}
}
</script>
</body>
</html>
[/code]
随便写了个小效果，没有封装。应该是你想的效果
[[i] 本帖最后由 DellGrass 于 2010-2-3 16:28 编辑 [/i]]<p ><strong>nhbklc</strong> 发表于 2010-2-3 17:17</p>
非常好！谢谢楼上的
能不能再完美下，就是下一组到头的时候，再点下一组，会返回到第一组。
同理点击“上一组”也是如此。
大家一起努力下。<p ><strong>xxcss</strong> 发表于 2010-2-3 17:39</p>
ceil(图片总个数/每组个数)=总组数
用个变量currentGroup 记录当前组数
如果 currentGroup=总组数 left归0
如果 currentGroup=1上一组 left 归（总组数-1）*每组宽度
[[i] 本帖最后由 xxcss 于 2010-2-3 17:41 编辑 [/i]]<p ><strong>hpliu2729</strong> 发表于 2010-2-3 20:20</p>
楼主要开动脑筋啊，其实4楼的兄弟已经把大部分的工作都完成了
[code]<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>这个网页是我用来作试验的</title>
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
#content{text-align:center;width:300px;position:relative;margin:100px auto; 0}
#wrape{position:relative;height:70px;width:288px;margin:0 0 100px;overflow:hidden;z-index:10;}
#slid{position:absolute;left:0;top:0;}
#slid li{float:left;padding-right:5px;}
#slid img{width:85px;height:60px;padding:2px;border:1px solid #ccc;cursor:pointer;filter:alpha(opacity=50);opacity:0.5;}
#slid img.on{filter:alpha(opacity=100);opacity:1;cursor: auto;}
#pre,#next{position:absolute;top:0px;left:-30px;width:20px;cursor:pointer;}
#next{left:auto;right:-30px;}
</style>
</head>
<body>
<div id="content">
<div id="wrape">
<ul id="slid">
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_12651273848S6a_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_1265126178Wj9r_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_1265125144i1c0_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_1265124828qrfZ_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_1265124326Jc9z_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_1265124070F1Ls_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_12651233291P7P_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_12651273848S6a_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_12651273848S6a_t.jpg" alt="" /></li>
</ul>
</div>
<img id="img" src="http://home.blueidea.com/attachment/201002/2/340113_126512769357Z3_t.jpg" alt="" />
<p id="pre">
上一组
</p>
<p id="next">
下一组
</p>
</div>
<script type="text/javascript">
var $ = function(id){
return document.getElementById(id);
}
var width = $('wrape').clientWidth;
var imgs = $('slid').getElementsByTagName('img');
var lis = $('slid').getElementsByTagName('li');
var ulWidth = lis[0].clientWidth*lis.length
$('slid').style.width = ulWidth + 'px';
for(var i =0;i<imgs.length;i++){
imgs[i].onclick = function(){
var src = this.src;
removeClassName();
this.className = 'on';
$('img').src = src;
}
};
var removeClassName = function(){
for(var i =0;i<imgs.length;i++){
if(imgs[i].className == 'on'){
imgs[i].className ='';
}
};
}
$('pre').onclick = function(){
var left = parseInt($('slid').style.left) || 0;
if(left < 0){
$('slid').style.left = (left + width) + 'px';
}
else if(left == 0)
{
$('slid').style.left = -(ulWidth - width) + 'px';
}
}
$('next').onclick = function(){
var left = parseInt($('slid').style.left) || 0;
if(-left < ulWidth - width){
$('slid').style.left = (left - width) + 'px';
}
else if(-left == ulWidth - width)
{
$('slid').style.left = '0px';
}
}
</script>
</body>
</html>[/code]
[[i] 本帖最后由 hpliu2729 于 2010-2-3 20:23 编辑 [/i]]<p ><strong>micore</strong> 发表于 2010-2-4 15:19</p>
不错`一起借鉴。<p ><strong>nhbklc</strong> 发表于 2010-2-4 16:03</p>
一直点击“上一组”的按钮就会出现问题。而且滚动的效果的比较差，能不能滚动有个时间！那效果就更完美了。
[code]<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>这个网页是我用来作试验的</title>
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
#content{text-align:center;width:300px;position:relative;margin:100px auto; 0}
#wrape{position:relative;height:70px;width:288px;margin:0 0 100px;overflow:hidden;z-index:10;}
#slid{position:absolute;left:0;top:0;}
#slid li{float:left;padding-right:5px;}
#slid img{width:85px;height:60px;padding:2px;border:1px solid #ccc;cursor:pointer;filter:alpha(opacity=50);opacity:0.5;}
#slid img.on{filter:alpha(opacity=100);opacity:1;cursor: auto;}
#pre,#next{position:absolute;top:0px;left:-30px;width:20px;cursor:pointer;}
#next{left:auto;right:-30px;}
</style>
</head>
<body>
<div id="content">
<div id="wrape">
<ul id="slid">
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_12651273848S6a_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_1265126178Wj9r_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_1265125144i1c0_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_1265124828qrfZ_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_1265124326Jc9z_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_1265124070F1Ls_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_12651233291P7P_t.jpg" alt="" /></li>
<li><img src="http://home.blueidea.com/attachment/201002/2/340113_12651273848S6a_t.jpg" alt="" /></li>
</ul>
</div>
<img id="img" src="http://home.blueidea.com/attachment/201002/2/340113_126512769357Z3_t.jpg" alt="" />
<p id="pre">
上一组
</p>
<p id="next">
下一组
</p>
</div>
<script type="text/javascript">
var $ = function(id){
return document.getElementById(id);
}
var width = $('wrape').clientWidth;
var imgs = $('slid').getElementsByTagName('img');
var lis = $('slid').getElementsByTagName('li');
var ulWidth = lis[0].clientWidth*lis.length
$('slid').style.width = ulWidth + 'px';
for(var i =0;i<imgs.length;i++){
imgs[i].onclick = function(){
var src = this.src;
removeClassName();
this.className = 'on';
$('img').src = src;
}
};
var removeClassName = function(){
for(var i =0;i<imgs.length;i++){
if(imgs[i].className == 'on'){
imgs[i].className ='';
}
};
}
$('pre').onclick = function(){
var left = parseInt($('slid').style.left) || 0;
if(left < 0){
$('slid').style.left = (left + width) + 'px';
}
else if(left == 0)
{
$('slid').style.left = -(ulWidth - width) + 'px';
}
}
$('next').onclick = function(){
var left = parseInt($('slid').style.left) || 0;
if(-left < ulWidth - width){
$('slid').style.left = (left - width) + 'px';
}
else if(-left == ulWidth - width)
{
$('slid').style.left = '0px';
}
}
</script>
</body>
</html>[/code]
[[i] 本帖最后由 nhbklc 于 2010-2-4 16:05 编辑 [/i]]
页:
[1]