社区
JavaScript
帖子详情
手动点击翻滚图片
hengjian168520
2010-11-12 04:13:25
今天我们领导给我一个这样任务,要用手动点击翻滚图片,就和百度图片库里面那种差不多一样,有一个小箭头点击跳入下一张图片,我从来没做过这种,请问哪位大哥会做给个方案,或实例。在这里先感谢一下。。
...全文
105
4
打赏
收藏
手动点击翻滚图片
今天我们领导给我一个这样任务,要用手动点击翻滚图片,就和百度图片库里面那种差不多一样,有一个小箭头点击跳入下一张图片,我从来没做过这种,请问哪位大哥会做给个方案,或实例。在这里先感谢一下。。
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
4 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
mokson
2010-11-14
打赏
举报
回复
启发很大!
304的的哥
2010-11-12
打赏
举报
回复
希望能给你些提示!
http://student.csdn.net/space.php?uid=442626&do=blog&id=47110
hch126163
2010-11-12
打赏
举报
回复
http://www.popub.net/script/MSClass.html
wjq520xmf
2010-11-12
打赏
举报
回复
修改一下就可以了
<!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; vertical-align:top;}
img{border:0 none}
.photo{ width:736px; height:213px; overflow:hidden; position:relative}
.photo .step{ position:absolute; bottom:10px;right:15px; height:23px; z-index:2; color:#fff; font-size:14px; font-weight:bold;vertical-align:middle; cursor:pointer}
.photo .step em{ margin:0 5px}
.photo ul{ float:left; position:absolute;top:0;left:0;width:2208px}
.photo li{ float:left;background:#09e; }
.photo li img{ display:block;width:736px;height: 213px; }
</style>
</head>
<body>
<!--column-->
<div class="column">
<div class="photo" id="photo">
<ul class="clear" id="photo-sub" style="width:2944px">
<li><a href="#nogo" title="四季如春" target="_blank"><img src="/jscss/demoimg/wall1.jpg" alt="" /></a></li>
<li><a href="#nogo" title="世界风光" target="_blank"><img src="/jscss/demoimg/wall2.jpg" alt="" /></a></li>
<li><a href="#nogo" title="黄河之谜" target="_blank"><img src="/jscss/demoimg/wall3.jpg" alt="" /></a></li>
<li><a href="#nogo" title="仅供测试" target="_blank"><img src="/jscss/demoimg/wall4.jpg" alt="" /></a></li>
</ul>
<div class="step" id="step-num"><span>上一页</span><em>1</em>/<em>3</em><span>下一页</span></div>
</div>
</div>
<!--column end-->
<script type="text/javascript">
function photoAlbumn(photoObj,btnObj,numObj){
var moveNum = 1,
_void=true,
cloneObj,nums,
voidClone=false,
d=document,
elem = d.getElementById(photoObj),
btnObj=d.getElementById(btnObj),
numObj=d.getElementById(numObj);
if (!elem) return false;
if (!btnObj) return false;
var elemObj = elem.getElementsByTagName("li"),
autoWidth = elemObj[0].offsetWidth,
btns = btnObj.getElementsByTagName("span"),
max=elemObj.length;
elem.style.width = (max+1)*autoWidth + "px";
var numElement =function(){
if(numObj){
nums = numObj.getElementsByTagName("em");
nums[1].innerHTML = max;
nums[0].innerHTML = moveNum;
}
}
var moveElement =function(final_x,final_y,interval){
_void = false;
var step = function () {
if (elem.movement) clearTimeout(elem.movement);
if (!elem.style.left) elem.style.left = "0px";
if (!elem.style.top) elem.style.top = "0px";
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
//alert(xpos)
if (xpos == final_x && ypos == final_y) {
_void = true;
if(voidClone){
elem.style.left = (moveNum > 2)?(-(max-1)*autoWidth +"px"):"0px";
elem.removeChild(cloneObj);
voidClone = false;
}
return true;
}
if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if (ypos < final_y) {
var dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if (ypos > final_y) {
var dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
elem.movement = setTimeout(function(){step()},interval);
}
elem.movement = setTimeout(function(){step()},interval);
} ;
var moveAutoShow = function (){
moveNum++;
if(moveNum > max){
cloneObj = elemObj[0].cloneNode(true);
elem.appendChild(cloneObj);
voidClone = true;
}
moveElement(-autoWidth*(moveNum-1),0,5);
if(moveNum > max) moveNum=1;
numElement();
};
var prepareSlideshow = function (){
var moveAuto = setInterval(function(){moveAutoShow()},5000);
btns[0].onmousedown = function() {
if(!_void) return false;
clearInterval(moveAuto);
moveNum--;
if(moveNum < 1){
cloneObj = elemObj[(max-1)].cloneNode(true);
cloneObj.style.cssText=";position:absolute;left:-" + autoWidth +"px";
elem.insertBefore(cloneObj,elemObj[0]);
voidClone = true;
}
moveElement(-autoWidth*(moveNum-1),0,5);
moveAuto = setInterval(function(){moveAutoShow()},5000);
if(moveNum < 1) moveNum=max;
numElement();
}
btns[1].onmousedown = function() {
if(!_void) return false;
clearInterval(moveAuto);
moveNum++;
if(moveNum > max){
cloneObj = elemObj[0].cloneNode(true);
elem.appendChild(cloneObj);
voidClone = true;
}
moveElement(-autoWidth*(moveNum-1),0,5);
moveAuto = setInterval(function(){moveAutoShow()},5000);
if(moveNum > max) moveNum=1;
numElement();
}
};
numElement();
prepareSlideshow();
}
photoAlbumn("photo-sub","photo","step-num");
</script>
</body>
</html>
cms后台管理
5.classes下有四个文件,
手动
烤到myeclipse项目src根目录下中 6.将服务器上jeecms项目删掉,发布新建的jeecms项目。 三 首页的加载过程 在浏览器中输入http://localhost:8080/jeecms,回车 首先进入配置文件web....
网页特效——
图片
翻页和
图片
滚动的实现方法
图片
翻页特效: <br />效果:多张
图片
逐个翻页显示,也可用鼠标
点击
图片
区域下方的页码
手动
翻页。每张
图片
上都可添加链接引向不同位置的帖子。 <br />演示:在专刊盛世奥运之奢华盘点上半部分中间“华美...
html+css+js的完整版轮播图:
手动
轮播,自动轮播,鼠标移入暂停轮播,可左右切换轮播
html+css+js的完整版轮播图:
手动
轮播,自动轮播,鼠标移入暂停轮播,可左右切换轮播
jquery实现
图片
显示上下左右
翻滚
这两天要么不是折腾shopex,要么弄discuz,咱的...今天分享一个早上整的jquery实现
图片
显示上下左右
翻滚
。大体思路是这样的,鼠标移动到
图片
上
图片
上去,显示另外一个,实现上下 左右显隐效果。其实是一张
图片
利用...
JavaScript
87,910
社区成员
224,616
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章