求JS特效:首页是从左到右的滚动的图片缩略图(绑定到数据库) 点击进入后是图片列表 怎么实现啊 求JS特效:首页是从左到右的滚动的图片缩略图(绑定到数据库) 点击进入后是图片列表 怎么实现啊类似电子相册 但我不知道滚动的效果怎么弄我用的是在ASP.NET中的 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 图片滚动效果,给你参考下<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><SCRIPT LANGUAGE="JavaScript"><!-- var Lefts = "left"; var stat = 10; //来回走 function show() { var curLeft = document.getElementById("picId").style.pixelLeft; var maxLeft = document.body.offsetWidth - document.getElementById("picId").offsetWidth; if (curLeft <= 0) { Lefts = "right"; } else if (curLeft >= maxLeft) { Lefts = "left"; } if (Lefts == "left") { curLeft = curLeft - stat; } else if (Lefts == "right") { curLeft = curLeft + stat; } document.getElementById("picId").style.pixelLeft = curLeft; setTimeout("show()",100); } //像左走 function showDown() { var curLeft = document.getElementById("picId").style.pixelLeft; var maxLeft = document.body.offsetWidth - document.getElementById("picId").offsetWidth; if (curLeft <= 0) { curLeft = 0; } if (Lefts == "left") { curLeft = curLeft - stat; } document.getElementById("picId").style.pixelLeft = curLeft; setTimeout("showDown()",100); }//--></SCRIPT></HEAD><BODY onLoad="show()"><img src="three_s.jpg" id="picId" style="position:absolute;Left:1000px;"></BODY></HTML> http://topic.csdn.net/u/20100621/17/fa45cfe5-87b8-46f8-a198-e67b04f10b5b.html?seed=400703215&r=66398529#r_66398529 直接使用 HTML 的 marquee 就可以了嘛 if(typeof PicFocusManager == "undefined") { PicFocusManager =[]; } function PicFocus(imageContainerID,textContainerID,buttonContainerID,intervarTime){ this.$ = function (id){return document.getElementById(id)} this.index = PicFocusManager.length; PicFocusManager[PicFocusManager.length] = this; this.imageContainer = this.$(imageContainerID); this.textContainer = this.$(textContainerID); this.buttonContainer = this.$(buttonContainerID); this.firstShow = 0; //默认显示项 this.interval = (isNaN(intervarTime)?0:intervarTime) || 5000; //切换时间 this.canAutoPlay = true; //是否可以自动切换 this.currentPosition = this.firstShow; this.timer; this.images = []; this.texts = []; this.buttons = []; this.bindEvent = function(){ var _self = this; for(var i=0;i<this.images.length;i++){ this.images[i].onmouseover = function(){ _self.stop(); } this.images[i].onmouseout = function(){ _self.timer = setTimeout('PicFocusManager[' + _self.index + '].play()' , _self.interval ) } } for(var i=0;i<this.buttons.length;i++){ this.buttons[i].onclick = function(){ _self.focus(this); } } } this.play = function(){ if(this.canAutoPlay){ this.setFocus(this.currentPosition ++ ) if(this.currentPosition >= this.images.length)this.currentPosition =0 ; this.timer = setTimeout('PicFocusManager[' + this.index + '].play()' , this.interval ) } } this.stop = function(){ clearTimeout( this.timer ); } this.focus = function(button){ for(var i=0;i<this.buttons.length;i++){ if(this.buttons[i] == button){ this.currentPosition = i; this.setFocus(this.currentPosition); break; } } } this.setFocus = function(i){ if(/Microsoft/.test(navigator.appName)){ this.imageContainer.filters[0].apply(); this.imageContainer.filters[0].play(); } for(var j=0;j<this.images.length;j++){ this.images[j].style.display = (i==j)?"":"none"; } for(var j=0;j<this.texts.length;j++){ this.texts[j].style.display = (i==j)?"":"none"; } for(var j=0;j<this.buttons.length;j++){ this.buttons[j].className = (i==j)? this.buttons[j].getAttribute("focusClass") :this.buttons[j].getAttribute("normalClass"); } if(/Microsoft/.test(navigator.appName)){ //滤镜版本 new ActiveXObject("DXImageTransform.Microsoft.Fade"); this.imageContainer.filters[0].play(); } } this.init = function(){ if(this.imageContainer && this.imageContainer && this.imageContainer){ //init this.images=this.imageContainer.getElementsByTagName("img"); if(this.textContainer) this.texts=this.textContainer.getElementsByTagName("label"); this.buttons=this.buttonContainer.getElementsByTagName("a"); this.bindEvent(); for(var i=0;i<this.images.length;i++){ this.images[i].style.display = "none"; if(i<this.texts.length) this.texts[i].style.display = "none"; this.buttons[i].className = this.buttons[i].getAttribute("normalClass"); this.buttons[i].target="_self"; } this.images[this.firstShow].style.display = ""; if(this.firstShow<this.texts.length) this.texts[this.firstShow].style.display = ""; this.buttons[this.firstShow].className = this.buttons[this.firstShow].getAttribute("focusClass"); }else{ alert("未提供正确的参数") } } } 缩略图就把图片的宽度和高度设置小点,点击进入列表。根据图片编号查询图片列表了下面是滚动图片的demohttp://blog.csdn.net/IBM_hoojo/archive/2010/06/07/5653246.aspx 关于js html 文本框问题,求教 求教!!!! jquery 选择器,圈定一个范围选择,FF下不兼容 怎么利用JavaScript在别的页面进行打印? jquery-easyui struts2 整合问题 脚本注入 无刷新获取服务器数据返回客户端???,谢谢 在IE页面离开时提示的问题 javascript 问题 ToolBar 为什么有的IE可以显示有的却不可以呢? 初学canvas画圆,为什么不圆呢? FF阻止冒泡传递 javascript为什么显示不出来背景
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE><SCRIPT LANGUAGE="JavaScript">
<!--
var Lefts = "left";
var stat = 10;
//来回走
function show() {
var curLeft = document.getElementById("picId").style.pixelLeft;
var maxLeft = document.body.offsetWidth - document.getElementById("picId").offsetWidth;
if (curLeft <= 0) {
Lefts = "right";
} else if (curLeft >= maxLeft) {
Lefts = "left";
} if (Lefts == "left") {
curLeft = curLeft - stat;
} else if (Lefts == "right") {
curLeft = curLeft + stat;
} document.getElementById("picId").style.pixelLeft = curLeft; setTimeout("show()",100); }
//像左走
function showDown() {
var curLeft = document.getElementById("picId").style.pixelLeft;
var maxLeft = document.body.offsetWidth - document.getElementById("picId").offsetWidth;
if (curLeft <= 0) {
curLeft = 0;
}
if (Lefts == "left") {
curLeft = curLeft - stat;
}
document.getElementById("picId").style.pixelLeft = curLeft; setTimeout("showDown()",100); }//-->
</SCRIPT></HEAD><BODY onLoad="show()">
<img src="three_s.jpg" id="picId" style="position:absolute;Left:1000px;">
</BODY>
</HTML>
{
PicFocusManager =[];
}
function PicFocus(imageContainerID,textContainerID,buttonContainerID,intervarTime){
this.$ = function (id){return document.getElementById(id)}
this.index = PicFocusManager.length;
PicFocusManager[PicFocusManager.length] = this;
this.imageContainer = this.$(imageContainerID);
this.textContainer = this.$(textContainerID);
this.buttonContainer = this.$(buttonContainerID);
this.firstShow = 0; //默认显示项
this.interval = (isNaN(intervarTime)?0:intervarTime) || 5000;
//切换时间
this.canAutoPlay = true; //是否可以自动切换
this.currentPosition = this.firstShow;
this.timer;
this.images = [];
this.texts = [];
this.buttons = [];
this.bindEvent = function(){
var _self = this;
for(var i=0;i<this.images.length;i++){
this.images[i].onmouseover = function(){
_self.stop();
}
this.images[i].onmouseout = function(){
_self.timer = setTimeout('PicFocusManager[' + _self.index + '].play()' , _self.interval )
}
}
for(var i=0;i<this.buttons.length;i++){
this.buttons[i].onclick = function(){
_self.focus(this);
}
}
}
this.play = function(){
if(this.canAutoPlay){
this.setFocus(this.currentPosition ++ )
if(this.currentPosition >= this.images.length)this.currentPosition =0 ;
this.timer = setTimeout('PicFocusManager[' + this.index + '].play()' , this.interval )
}
}
this.stop = function(){
clearTimeout( this.timer );
}
this.focus = function(button){
for(var i=0;i<this.buttons.length;i++){
if(this.buttons[i] == button){
this.currentPosition = i;
this.setFocus(this.currentPosition);
break;
}
}
}
this.setFocus = function(i){
if(/Microsoft/.test(navigator.appName)){
this.imageContainer.filters[0].apply();
this.imageContainer.filters[0].play();
}
for(var j=0;j<this.images.length;j++){
this.images[j].style.display = (i==j)?"":"none";
}
for(var j=0;j<this.texts.length;j++){
this.texts[j].style.display = (i==j)?"":"none";
}
for(var j=0;j<this.buttons.length;j++){
this.buttons[j].className = (i==j)? this.buttons[j].getAttribute("focusClass") :this.buttons[j].getAttribute("normalClass");
}
if(/Microsoft/.test(navigator.appName)){ //滤镜版本
new ActiveXObject("DXImageTransform.Microsoft.Fade");
this.imageContainer.filters[0].play();
}
}
this.init = function(){
if(this.imageContainer && this.imageContainer && this.imageContainer){
//init
this.images=this.imageContainer.getElementsByTagName("img");
if(this.textContainer) this.texts=this.textContainer.getElementsByTagName("label");
this.buttons=this.buttonContainer.getElementsByTagName("a");
this.bindEvent();
for(var i=0;i<this.images.length;i++){
this.images[i].style.display = "none";
if(i<this.texts.length) this.texts[i].style.display = "none";
this.buttons[i].className = this.buttons[i].getAttribute("normalClass");
this.buttons[i].target="_self";
}
this.images[this.firstShow].style.display = "";
if(this.firstShow<this.texts.length) this.texts[this.firstShow].style.display = "";
this.buttons[this.firstShow].className = this.buttons[this.firstShow].getAttribute("focusClass");
}else{
alert("未提供正确的参数")
}
}
}
下面是滚动图片的demo
http://blog.csdn.net/IBM_hoojo/archive/2010/06/07/5653246.aspx