一个按钮控制图片上下滚动

mll1219 2011-05-26 02:53:12
求:一个按钮控制图片上下或左右滚动
...全文
729 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
萤火架构 2011-06-03
  • 打赏
  • 举报
回复
实现很多动态效果js是必须的。
看看这个:
http://blog.bossma.cn/javascript/javascript-flexible-scroll-words-or-images/

这个程序可以自己设置水平(左右)、垂直(上下)滚动,设置滚动时间间隔和每次滚动距离,并且兼容多种浏览器。

用起来也很简单:
<html>
<head>
<title>图片向左滚动</title>
<script type="text/javascript" src="bossma-jscroll.js"></script>
<script type="text/javascript">
window.onload=function(){
//参数依次为:滚动方向,滚动速度,容器ID,容器宽度,容器高度,滚动内容宽度,滚动内容高度,滚动步长
var scroll =new JScroll("left",30,"content",558,165,1674,165,1);
scroll.Start();
};
</script>
</head>
<body>
<div id="title" style="width:100%;height:40px;">图片向左滚动</div>
<div id="content">
<!--
滚动元素内部的水平排列需要自己来写,不要写到容器div(比如这里的id:content)的样式中。
-->
<div style="float:left"><img src="images/1.png" /></div>
<div style="float:left"><img src="images/2.png" /></div>
<div style="float:left"><img src="images/3.png" /></div>
</div>
<div id="foot"></div>
</body>
</html>


调用scroll.Start();是开始滚动,
调用scroll.Pause();是暂停滚动。

不过不能完全适应你的程序,如果你想用需要自己修改下。

devil52052 2011-06-03
  • 打赏
  • 举报
回复
非原创 ,可以参考着用下
devil52052 2011-06-03
  • 打赏
  • 举报
回复
上面是jquery 这是 页面代码 看变量在哪里 自己去改


<table cellpadding="0" cellspacing="0" width="655px" height="151" class="HomeHotA">
<tr>
<td class="HomeHotTdArowleft">
<span class="pre">
<img src="../Image/home_50_a.gif" /></span></td>
<td class="HomeHottdInco">
<div id="idContainer2" class="ibox">
<div class="showbox">
<ul class="HomeHotUL">
<cc:HKIRepeater ID="rpHomeHot" runat="server">
<ItemTemplate>
<li class="HomeHotli">
<table cellpadding="0" cellspacing="0" width="140px" height="120px" class="center" style="margin-top:15px;">
<tr>
<td class="HomeHotreptd">
<div class="divlblID">
<cc:HKILabel ID="lblID" Text='<%# Eval("ID") %>' runat="server" />
</div>
<div class="HomeHotDivImgText" align=center>
<div class="HomeHotDivImgTexts">
<cc:HKIImage ID="img0" runat="server" Width="120px" Height="100px" />
</div>
<div class="divpartnos">
<%# Eval("PartNo")%>
</div>
</div>
</td>
</tr>
</table>
</li>
</ItemTemplate>
</cc:HKIRepeater>
</ul>
</div>
</div>
</td>
<td class="HomeHotTdArowright">
<span class="next">
<img src="../Image/home_53_a.gif" /></span></td>
</tr>
</table>
devil52052 2011-06-03
  • 打赏
  • 举报
回复
jquery的


<script src="../Script/jquery-1.4.2.min.js">

</script>

<script>
jQuery.noConflict();
jQuery(document).ready(function($){
//变量
var $cur = 1;//初始化显示的版面
var $i = 4;//每版显示数
var $len = $('.showbox>ul>li').length;//计算列表总长度(个数)
var $pages = Math.ceil($len / $i);//计算展示版面数量
var $w = $('.ibox').width();//取得展示区外围宽度
var $showbox = $('.showbox');
var $num = $('span.num li')
var $pre = $('span.pre')
var $next = $('span.next');
var $autoFun;
//调用自动滚动
autoSlide();
//向前滚动
$pre.click(function(){
if (!$showbox.is(':animated')) { //判断展示区是否动画
if ($cur == 1) { //在第一个版面时,再向前滚动到最后一个版面
$showbox.animate({
left: '-=' + $w * ($pages - 1)
}, 100); //改变left值,切换显示版面,500(ms)为滚动时间,下同
$cur = $pages; //初始化版面为最后一个版面
}
else {
$showbox.animate({
left: '+=' + $w
}, 200); //改变left值,切换显示版面
$cur--; //版面累减
}
$num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //为对应的版面数字加上高亮样式,并移除同级元素的高亮样式
}
});
//向后滚动
$next.click(function(){
if (!$showbox.is(':animated')) { //判断展示区是否动画
if ($cur == $pages) { //在最后一个版面时,再向后滚动到第一个版面
$showbox.animate({
left: 0
}, 100); //改变left值,切换显示版面,500(ms)为滚动时间,下同
$cur = 1; //初始化版面为第一个版面
}
else {
$showbox.animate({
left: '-=' + $w
}, 200);//改变left值,切换显示版面
$cur++; //版面数累加
}
$num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //为对应的版面数字加上高亮样式,并移除同级元素的高亮样式
}
});
//数字点击事件
$num.click(function(){
if (!$showbox.is(':animated')) { //判断展示区是否动画
var $index = $num.index(this); //索引出当前点击在列表中的位置值
$showbox.animate({
left: '-' + ($w * $index)
}, 200); //改变left值,切换显示版面,500(ms)为滚动时间
$cur = $index + 1; //初始化版面值,这一句可避免当滚动到第三版时,点击向后按钮,出面空白版.index()取值是从0开始的,故加1
$(this).addClass('numcur').siblings().removeClass('numcur'); //为当前点击加上高亮样式,并移除同级元素的高亮样式
}
});
//停止滚动
clearFun($showbox);
clearFun($pre);
clearFun($next);
clearFun($num);
//事件划入时停止自动滚动
function clearFun(elem){
elem.hover(function(){
clearAuto();
}, function(){
autoSlide();
});
}
//自动滚动
function autoSlide(){
$next.trigger('click');
$autoFun = setTimeout(autoSlide, 5000);//此处不可使用setInterval,setInterval是重复执行传入函数,这会引起第二次划入时停止失效
}
//清除自动滚动
function clearAuto(){
clearTimeout($autoFun);
}
});
</script>
北鱼扶摇 2011-06-03
  • 打赏
  • 举报
回复
看到好多贴都是要会js的,看来不学会js在这里混不下去啊。。。汗颜了
mll1219 2011-06-02
  • 打赏
  • 举报
回复
js太弱了要是有就贴出来啊,让我们都学习一下
古兰色回忆 2011-05-31
  • 打赏
  • 举报
回复
用JS写一个方法就好。可以控制计时器控制图片的坐标变化,从而使图片移动,然后用switch控制图片的方向……
love121070145 2011-05-30
  • 打赏
  • 举报
回复
没积分了
zou_changcheng123 2011-05-29
  • 打赏
  • 举报
回复
用js就可以调用 啊, ,
孟子E章 2011-05-26
  • 打赏
  • 举报
回复
用按钮控制的左右图片滚动特效
http://tommyhu.cn/post/814/

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧