求JS特效:首页是从左到右的滚动的图片缩略图(绑定到数据库) 点击进入后是图片列表 怎么实现啊
类似电子相册 但我不知道滚动的效果怎么弄
我用的是在ASP.NET中的

解决方案 »

  1.   

    图片滚动效果,给你参考下
    <!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>
      

  2.   

    http://topic.csdn.net/u/20100621/17/fa45cfe5-87b8-46f8-a198-e67b04f10b5b.html?seed=400703215&r=66398529#r_66398529
      

  3.   

    直接使用 HTML 的 marquee 就可以了嘛
      

  4.   

    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("未提供正确的参数")
    }
    }
    }
      

  5.   

    缩略图就把图片的宽度和高度设置小点,点击进入列表。根据图片编号查询图片列表了
    下面是滚动图片的demo
    http://blog.csdn.net/IBM_hoojo/archive/2010/06/07/5653246.aspx