请教 鼠标点击控制图片左右移动的问题

http://bbs.blueidea.com/thread-2771731-1-1.html

解决方案 »

  1.   

    http://www.zcool.com.cn/jscode/ggcode/20080612/code_061254Z2008.html
      

  2.   

    真是感谢s_liangchao1s  不过 发给我的两个网址 我都曾经找到过 而且没最后达倒我要的东西  改还改不对
      

  3.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html lang=it dir=ltr xml:lang="it" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>css+js控制图片展示</title>
    <style>
    body{
      padding-right: 0px;
      padding-left: 0px;
      padding-bottom: 0px;
      margin: 0px;
      font: 70% verdana, geneva, arial, helvetica, sans-serif;
      color: #000;
      padding-top: 0px;
      text-align: center
      }
    #outer{
      padding-right: 0px;
      padding-left: 0px;
      background: url(/images/bg-outer.gif) repeat-y center top;
      padding-bottom: 0px;
      margin: 0px auto;
      width: 780px;
      padding-top: 0px;
      text-align: left
      }
    #wrapper{
      background: #fff;
      margin: 0px 4px
      }
    #content{
      padding-right: 0px;
      padding-left: 0px;
      min-height: 400px;
      padding-bottom: 20px;
      margin: 20px 30px;
      padding-top: 0px;
      position: relative
      }
    #focus{
      border-right: #ccc 2px solid;
      padding-right: 0px;
      border-top: #ccc 2px solid;
      padding-left: 0px;
      min-height: 188px;
      background: url(/images/tile.gif) #eee repeat-y left top;
      padding-bottom: 10px;
      margin: 25px 0px 30px;
      border-left: #ccc 2px solid;
      width: 100%;
      padding-top: 15px;
      border-bottom: #ccc 2px solid;
      position: relative;
      height: 188px
      }
    #beni{
      padding-right: 0px;
      padding-left: 0px;
      left: 0px;
      padding-bottom: 0px;
      margin: 0px;
      width: 250px;
      padding-top: 0px;
      list-style-type: none;
      position: absolute;
      top: 15px
      }
    #beni li{
      border-top: #fff 1px solid;
      font-size: 12px;
      float: left;
      width: 250px;
      text-indent: 24px;
      line-height: 26px
      }
    #beni li.first{
      border-top: 0px
      }
    #beni li a{
      border-right: 0px;
      padding-right: 0px;
      border-top: 0px;
      display: block;
      padding-left: 0px;
      font-weight: bold;
      background: #eee;
      padding-bottom: 0px;
      margin: 0px;
      border-left: 0px;
      padding-top: 0px;
      border-bottom: 0px;
      text-decoration: none
      }
    #beni li a:hover{
      background: #f9f9f9
      }
    #description{
      width:420px;
      height:188px;
      overflow:hidden;
      float:right;
      margin-right:15px;
      }
    </STYLE>
    <script>
    window.onload=function(){
      var ele=document.getElementById("description");
      var w=ele.clientWidth;
      var n=20,t=20;
      var timers=new Array(n);
      var c=document.getElementById("beni").getElementsByTagName("li");
      for(var i=0;i<c.length;i++){
        c[i].index=i;
        document.getElementById("first").onclick=doSlide;
    document.getElementById("first1").onclick=doSlide;
      }
      c=null;
      function doSlide(){
        var x=ele.scrollLeft;

        var d=this.index*w-x;
        if(!d) return;
        for(var i=0;i<n;i++)(function(){
          if(timers[i])
            clearTimeout(timers[i]);
          var j=i;
          timers[i]=setTimeout(function(){
            ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));
          },(i+1)*t);
        })();
      }
    }
    </script>
    </head>
    <body id=home>
    <div id=outer>
      <div id=wrapper>
        <div id=content>
          <div id=focus>
            <ul id=beni>
              <li id=first><</li>
              <li id=first1>></li>
            </ul>
            <div id=description>
              <img src="http://bbs.blueidea.com/attachments/2007/6/20/20070620_1a29ea694d0607dfd111izjllnr3ddlf.jpg" />
            </div>
          </div>
        </div>
      </div>
    </div>
    </body>
    </html>
      

  4.   

    哈哈 chimo手头真快。楼主这种代码你就网上找 谁也不能先给你写个
    http://www.zcool.com.cn/jscode/page_6.html你看第9个 跟你的就是很像 代码可以直接下
      

  5.   

    我在7楼的基础上改出了你要的效果,代码如下：
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html lang=it dir=ltr xml:lang="it" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>css+js控制图片展示</title>
    <style>
    body{
      padding-right: 0px;
      padding-left: 0px;
      padding-bottom: 0px;
      margin: 0px;
      font: 70% verdana, geneva, arial, helvetica, sans-serif;
      color: #000;
      padding-top: 0px;
      text-align: center
      }
    #outer{
      padding-right: 0px;
      padding-left: 0px;
      background: url(/images/bg-outer.gif) repeat-y center top;
      padding-bottom: 0px;
      margin: 0px auto;
      width: 780px;
      padding-top: 0px;
      text-align: left
      }
    #wrapper{
      background: #fff;
      margin: 0px 4px
      }
    #content{
      padding-right: 0px;
      padding-left: 0px;
      min-height: 400px;
      padding-bottom: 20px;
      margin: 20px 30px;
      padding-top: 0px;
      position: relative
      }
    #focus{
      border-right: #ccc 2px solid;
      padding-right: 0px;
      border-top: #ccc 2px solid;
      padding-left: 0px;
      min-height: 188px;
      background: url(/images/tile.gif) #eee repeat-y left top;
      padding-bottom: 10px;
      margin: 25px 0px 30px;
      border-left: #ccc 2px solid;
      width: 100%;
      padding-top: 15px;
      border-bottom: #ccc 2px solid;
      position: relative;
      height: 188px
      }
    #beni{
      padding-right: 0px;
      padding-left: 0px;
      left: 0px;
      padding-bottom: 0px;
      margin: 0px;
      width: 250px;
      padding-top: 0px;
      list-style-type: none;
      position: absolute;
      top: 15px
      }
    #beni li{
      border-top: #fff 1px solid;
      font-size: 12px;
      float: left;
      width: 250px;
      text-indent: 24px;
      line-height: 26px
      }
    #beni li.first{
      border-top: 0px
      }
    #beni li a{
      border-right: 0px;
      padding-right: 0px;
      border-top: 0px;
      display: block;
      padding-left: 0px;
      font-weight: bold;
      background: #eee;
      padding-bottom: 0px;
      margin: 0px;
      border-left: 0px;
      padding-top: 0px;
      border-bottom: 0px;
      text-decoration: none
      }
    #beni li a:hover{
      background: #f9f9f9
      }
    #description{
      width:420px;
      height:188px;
      overflow:hidden;
      float:right;
      margin-right:15px;
      }
    </STYLE></head>
    <body id=home>
    <div id=outer>
      <div id=wrapper>
        <div id=content>
          <div id=focus>
            <ul id=beni>
              <li id=first onClick="doSlide(1)"><</li>
              <li id=first1 onClick="doSlide(2)">></li>
            </ul>
            <div id=description>
              <img src="http://bbs.blueidea.com/attachments/2007/6/20/20070620_1a29ea694d0607dfd111izjllnr3ddlf.jpg" />
            </div>
          </div>
        </div>
      </div>
    </div><script>
    //window.onload=function(){
      var ele=document.getElementById("description");
      var w=ele.clientWidth;
      var n=20,t=20;
      var z=0;
      var timers=new Array(n);
      //var c=document.getElementById("beni").getElementsByTagName("li");
      //for(var i=0;i<c.length;i++){
        //c[i].index=i;
        //c[i].onclick=doSlide;
    //document.getElementById("first").onclick=doSlide(1);
        //document.getElementById("first1").onclick=doSlide(2);
      //}
      //c=null;
      function doSlide(value){
        var x=ele.scrollLeft;
    var c;
    if(value==2){
    z=z+1;
    document.getElementById("first").index=z-1;
    document.getElementById("first1").index=z;
    c=z;
    }
    if(value==1){
    z=document.getElementById("first").index-1;
    document.getElementById("first").index=z-1;
    document.getElementById("first1").index=z;
    c=z;
    }
        //var d=this.index*w-x;
    var d=c*w-x;
        if(!d) return;
        for(var i=0;i<n;i++)(function(){
          if(timers[i])
            clearTimeout(timers[i]);
          var j=i;
          timers[i]=setTimeout(function(){
            ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));
          },(i+1)*t);
        })();
      }
    //}
    </script>
    </body>
    </html>
      

  6.   

    Slide-Show User Control
      

  7.   

    核心代码：（先看懂，再自己修改实践）
     /// <summary>
        /// This method is used to generate CSS code for this user control.
        /// </summary>
        /// <returns>CSS as a string object.</returns>
        private string GetCSS()
        {
            StringBuilder CSS = new StringBuilder();        CSS.Append("<style type=\"text/css\">\n");        CSS.Append(".Base\n");
            CSS.Append("{\n");
            CSS.Append("background-color: Transparent;\n");
            CSS.Append("border: 0;\n");
            CSS.Append("position: relative;\n");
            CSS.Append("overflow: hidden;\n");
            CSS.Append("}\n");        CSS.Append(".Parent\n");
            CSS.Append("{\n");
            CSS.Append("border-style:solid;\n");
            CSS.Append("border-width:1px;\n");
            CSS.Append("}\n");        CSS.Append("</style>");        return CSS.ToString();
        }    /// <summary>
        /// This method is used to generate JS code for this user control.
        /// </summary>
        /// <returns>JS as a string object.</returns>
        private string GetJS()
        {
            StringBuilder JS = new StringBuilder();        JS.Append("<script type=\"text/javascript\">\n");        JS.Append("var IsPaused=false;\n");
            JS.Append("var pix = 0;\n");
            JS.AppendFormat("var divWidth = {0};\n", _Items.Count * (_ImageWidth + 1));
            JS.AppendFormat("var divVirtualWidth = {0};\n", _NoOfVisibleImages * (_ImageWidth + 1));        JS.Append("function Start()\n");
            JS.Append("{\n");
            JS.Append("IsPaused = false;\n");
            JS.Append("}\n");        JS.Append("function Stop()\n");
            JS.Append("{\n");
            JS.Append("IsPaused = true;\n");
            JS.Append("}\n");        JS.Append("function MoveLeft()\n");
            JS.Append("{\n");
            JS.Append("if( IsPaused || pix == -(divWidth - divVirtualWidth)) return;\n");
            JS.AppendFormat("var objtbl = document.getElementById('{0}');\n", tblBase.ClientID);
            JS.Append("pix = parseInt(objtbl.style.left.replace(\"px\",\"\"));\n");
            JS.Append("pix = pix - 1;\n");
            JS.Append("objtbl.style.left=pix.toString() + \"px\";\n");
            JS.AppendFormat("setTimeout(\"MoveLeft()\",\"{0}\");\n", _SlideShowSpeed);
            JS.Append("}\n");        JS.Append("function StopMoveLeft()\n");
            JS.Append("{\n");
            JS.AppendFormat("if( !IsPaused || pix % {0} == 0) return;\n", _ImageWidth + 1);
            JS.AppendFormat("var objtbl = document.getElementById('{0}');\n", tblBase.ClientID);
            JS.Append("pix = parseInt(objtbl.style.left.replace(\"px\",\"\"));\n");
            JS.Append("pix = pix - 1;\n");
            JS.Append("objtbl.style.left=pix.toString() + \"px\";\n");
            JS.AppendFormat("setTimeout(\"StopMoveLeft()\",\"{0}\");\n", _SlideShowSpeed);
            JS.Append("}\n");        JS.Append("function MoveRight()\n");
            JS.Append("{\n");
            JS.Append("if( IsPaused || pix == 0) return;\n");
            JS.AppendFormat("var objtbl = document.getElementById('{0}');\n", tblBase.ClientID);
            JS.Append("pix = parseInt(objtbl.style.left.replace(\"px\",\"\"));\n");
            JS.Append("pix = pix + 1;\n");
            JS.Append("objtbl.style.left=pix.toString() + \"px\";\n");
            JS.AppendFormat("setTimeout(\"MoveRight()\",\"{0}\");\n", _SlideShowSpeed);
            JS.Append("}\n");        JS.Append("function StopMoveRight()\n");
            JS.Append("{\n");
            JS.AppendFormat("if(!IsPaused || pix % {0} == 0) return;\n", _ImageWidth + 1);
            JS.AppendFormat("var objtbl = document.getElementById('{0}');\n", tblBase.ClientID);
            JS.Append("pix = parseInt(objtbl.style.left.replace(\"px\",\"\"));\n");
            JS.Append("pix = pix + 1;\n");
            JS.Append("objtbl.style.left=pix.toString() + \"px\";\n");
            JS.AppendFormat("setTimeout(\"StopMoveRight()\",\"{0}\");\n", _SlideShowSpeed);
            JS.Append("}\n");        JS.Append("</script>");        return JS.ToString();
        }
      

  8.   

    NND,居然说我是恶意灌水。用这个号再发吧。
     JS.AppendFormat("var divWidth = {0};\n", _Items.Count * (_ImageWidth + 1));
            JS.AppendFormat("var divVirtualWidth = {0};\n", _NoOfVisibleImages * (_ImageWidth + 1));
    要首先获得图片宽度还有要显现的图片个数。根据这两个数据来控制
       JS.AppendFormat("if(!IsPaused || pix % {0} == 0) return;\n", _ImageWidth + 1);
    控制无缝
      

  9.   

    虽然写得可能有点繁杂有一点乱，不过BUG也解决了：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html lang=it dir=ltr xml:lang="it" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>css+js控制图片展示</title>
    <style>
    body{
      padding-right: 0px;
      padding-left: 0px;
      padding-bottom: 0px;
      margin: 0px;
      font: 70% verdana, geneva, arial, helvetica, sans-serif;
      color: #000;
      padding-top: 0px;
      text-align: center
      }
    #outer{
      padding-right: 0px;
      padding-left: 0px;
      background: url(/images/bg-outer.gif) repeat-y center top;
      padding-bottom: 0px;
      margin: 0px auto;
      width: 780px;
      padding-top: 0px;
      text-align: left
      }
    #wrapper{
      background: #fff;
      margin: 0px 4px
      }
    #content{
      padding-right: 0px;
      padding-left: 0px;
      min-height: 400px;
      padding-bottom: 20px;
      margin: 20px 30px;
      padding-top: 0px;
      position: relative
      }
    #focus{
      border-right: #ccc 2px solid;
      padding-right: 0px;
      border-top: #ccc 2px solid;
      padding-left: 0px;
      min-height: 188px;
      background: url(/images/tile.gif) #eee repeat-y left top;
      padding-bottom: 10px;
      margin: 25px 0px 30px;
      border-left: #ccc 2px solid;
      width: 100%;
      padding-top: 15px;
      border-bottom: #ccc 2px solid;
      position: relative;
      height: 188px
      }
    #beni{
      padding-right: 0px;
      padding-left: 0px;
      left: 0px;
      padding-bottom: 0px;
      margin: 0px;
      width: 250px;
      padding-top: 0px;
      list-style-type: none;
      position: absolute;
      top: 15px
      }
    #beni li{
      border-top: #fff 1px solid;
      font-size: 12px;
      float: left;
      width: 250px;
      text-indent: 24px;
      line-height: 26px
      }
    #beni li.first{
      border-top: 0px
      }
    #beni li a{
      border-right: 0px;
      padding-right: 0px;
      border-top: 0px;
      display: block;
      padding-left: 0px;
      font-weight: bold;
      background: #eee;
      padding-bottom: 0px;
      margin: 0px;
      border-left: 0px;
      padding-top: 0px;
      border-bottom: 0px;
      text-decoration: none
      }
    #beni li a:hover{
      background: #f9f9f9
      }
    #description{
      width:420px;
      height:188px;
      overflow:hidden;
      float:right;
      margin-right:15px;
      }
    </STYLE></head>
    <body id=home>
    <div id=outer>
      <div id=wrapper>
        <div id=content>
          <div id=focus>
            <ul id=beni>
              <li id=first onClick="doSlide(1)"><</li>
              <li id=first1 onClick="doSlide(2)">></li>
            </ul>
            <div id=description>
              <img src="http://bbs.blueidea.com/attachments/2007/6/20/20070620_1a29ea694d0607dfd111izjllnr3ddlf.jpg" />
            </div>
          </div>
        </div>
      </div>
    </div><script>
    //window.onload=function(){
      var ele=document.getElementById("description");
      var w=ele.clientWidth;
      var n=20,t=20;
      var z=0;
      var timers=new Array(n);
      //var c=document.getElementById("beni").getElementsByTagName("li");
      //for(var i=0;i<c.length;i++){
        //c[i].index=i;
        //c[i].onclick=doSlide;
    //document.getElementById("first").onclick=doSlide(1);
        //document.getElementById("first1").onclick=doSlide(2);
      //}
      //c=null;
      function doSlide(value){
        var x=ele.scrollLeft;
    var c;
    if(value==2){
    z=z+1;
    document.getElementById("first").index=z-1;
    document.getElementById("first1").index=z;
    c=z;
    }
    if(value==1){
    z=document.getElementById("first").index;
    document.getElementById("first").index=z-1;
    document.getElementById("first1").index=z;
    c=z;
    }
        //var d=this.index*w-x;
    var d=c*w-x;
        if(c>6){
    z=c-1
    document.getElementById("first").index=z-1;
    document.getElementById("first1").index=z;
    return false;
    }else if(c<0){
    z=c+1
    document.getElementById("first").index=z;
    document.getElementById("first1").index=z+1;
    return false;
    }
        for(var i=0;i<n;i++)(function(){
          if(timers[i])
            clearTimeout(timers[i]);
          var j=i;
          timers[i]=setTimeout(function(){
            ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));
          },(i+1)*t);
        })();
      }
    //}
    </script>
    </body>
    </html>