| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 831 人关注过本帖
标题:求助让首页的图片无缝向向左滚动
只看楼主 加入收藏
ytmdjtqv
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2011-11-20
结帖率:0
收藏
已结贴  问题点数:20 回复次数:7 
求助让首页的图片无缝向向左滚动
在线等怎么让首页的图片无缝向向左滚动

我在首页显示的代码如下,怎么可以改成图片无缝向向左滚动
<div class="clear"></div>
        <div class="product">
            <div class="abouttitle"><a href="productlist.asp"><img alt="更多" height="13" src="img/more_02.jpg" width="43" /></a><strong>最新产品</strong></div>
     <ul class="sycp">
                    <%
set rs=conn.execute("select top 5 pic1,title,id from product order by xh desc,id desc")
do while not rs.eof
title=gotTopic(rs("TITLE"),27)
response.write"<li><a title='"&rs("title")&"' href='product.asp?id="&rs("id")&"'><img alt='' src='"&rs("pic1")&"' /><p>"&title&"</p></a></li>"& vbCrLf
 rs.movenext
loop
rs.close:set rs=nothing                                            
%>
</ul>
<div class='clear'></div>   
        </div>
    </div>
    <div class="clear"></div>
</div>
搜索更多相关主题的帖子: 图片 产品 product title 在线 
2011-11-20 08:07
ytmdjtqv
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2011-11-20
收藏
得分:0 
大家帮帮忙呀 。我急用
2011-11-20 08:21
xmlz
Rank: 9Rank: 9Rank: 9
等 级:蜘蛛侠
威 望:5
帖 子:294
专家分:1392
注 册:2010-8-29
收藏
得分:7 
<marquee direction="left">img alt="更多" height="13" src="img/more_02.jpg" width="43" />marquee>
某些浏览器可能不兼容
2011-11-21 14:37
weiboooo
Rank: 1
等 级:新手上路
帖 子:6
专家分:7
注 册:2011-11-21
收藏
得分:7 
可以用TABLE方式。
2011-11-21 15:17
towering
Rank: 7Rank: 7Rank: 7
等 级:黑侠
威 望:1
帖 子:261
专家分:507
注 册:2007-10-9
收藏
得分:7 
程序代码:
<div id=demod style="overflow:hidden;height:345px;width:650px"> 
          <table align=left cellpadding=0 cellspace=0 border=0>
            <tr> 
              <td id=demo7 valign=top> 
              <table width='100%' cellpadding='0' cellspacing='5' border='0' align='center'>
                  <tr valign='top'> 
                    <td align='left'><a href="http://www. target="_blank" title="金山 WPS 2012 个人版下载"><img src="http://www. alt="金山 WPS 2012 个人版下载" title="金山 WPS 2012 个人版下载" /></a></td>
                  </tr>
                </table></td>
              <td id=demo8 valign=top></td>
            </tr>
          </table>
        </div>
   <script> 
  var speed=15 
  demo8.innerHTML=demo7.innerHTML 
  function Marquee(){ 
  if(demo8.offsetWidth-demod.scrollLeft<=0) 
  demod.scrollLeft-=demo7.offsetWidth 
  else{ 
  demod.scrollLeft++ 
  } 
  } 
  var MyMar=setInterval(Marquee,speed) 
  demod.onmouseover=function() {clearInterval(MyMar)} 
  demod.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
  </script> 


这种东西网上太多了,论坛里也可以搜索到。请善用论坛的搜索功能。其它不解释~

这个貌似只能转两圈,用下面这个吧!

[ 本帖最后由 towering 于 2011-11-21 16:20 编辑 ]

我的ASP小站:http://www./
2011-11-21 16:07
towering
Rank: 7Rank: 7Rank: 7
等 级:黑侠
威 望:1
帖 子:261
专家分:507
注 册:2007-10-9
收藏
得分:0 
程序代码:
<style>
a {font-size:12px;} 
.dhMarquee {
width:510px;
height:340px;
line-height:110px;
text-align:center;
margin:0px;
padding-top:8px;
*_padding-top:4px;/*IE*/
border:1px solid #000;
overflow:hidden;
white-space:nowrap;} 
.mqdemo {margin:0px;padding:0px;border:0px;}
.dhScrollA img{border:0px;}
</style> 
<div id="mq" class="dhMarquee" onmouseover="iScrollAmount=0" onmouseout="iScrollAmount=1"> 
<span id="mqdemo" class="mqdemo"> 
<a class="dhScrollA" href="http://www."><img src='http://www.' width='510px' height='340px'/></a>
</span> 
</div> 
<script language="javascript"> 
var speed = 90; 
//判断浏览器类型
var isMSIE = (navigator.appName == "Microsoft Internet Explorer");
//滚动对象 
var oMarquee = document.getElementById("mq");
//内容对象 
var omqdemo = document.getElementById("mqdemo");
var w = oMarquee.offsetWidth;
var odl = omqdemo.offsetWidth;
var x = parseInt(w/odl)+1;
for(var i=0;i<x;i++){
var o = omqdemo.cloneNode(true);
oMarquee.appendChild(o);
}
var iScrollAmount = 1
function scroll(){
oMarquee.scrollLeft += iScrollAmount;
var ol = oMarquee.scrollLeft;
//IE和FF的位置有不同
if(isMSIE){
  if(odl-ol<=0){
   oMarquee.scrollLeft = 0;
  }
}
else{
  if(odl-ol<=-10){
   oMarquee.scrollLeft = 2;
  }
}
}
var MyMar = window.setInterval(scroll,speed); 
</script>


上面那个貌似转两个图片就不转了,这个可以一直转。呵呵~

我的ASP小站:http://www./
2011-11-21 16:19
huayi85
Rank: 1
等 级:新手上路
帖 子:8
专家分:0
注 册:2011-12-3
收藏
得分:0 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>图片无缝移动+点击图片放大显示</title>
<script src="js/FancyZoom.js" language="JavaScript" type="text/javascript"></script>
<script src="js/FancyZoomHTML.js" language="JavaScript" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/cabel-v1.css">
</head>
<body onLoad="setupZoom();">

<!-- 此段js用于设置加载出来的图片的宽度与高度-->
<SCRIPT language=JavaScript>
<!--
var flag=false;
function DrawImage(ImgD){ //此处图片的 宽高 定为 100

    var image=new Image();                    //临时图片变量
    image.src=ImgD.src;                        //将加载的图片对象设置给 临时图片变量
    if(image.width>0 && image.height>0){
        flag=true;
        if(image.width/image.height>= 100/100){                    //如果图片的宽度比高度要大,那么就判断宽度
            if(image.width>100){                                //宽度大于100
                ImgD.width=100;                                    //将100赋值给 加载出来的图片宽度
                ImgD.height=(image.height*100)/image.width;        //将图片的 ( 高度*100 / 宽度) 赋值给加载出来的图片
            }else{                                                //图片的宽度与高度保持不变
                ImgD.width=image.width;
                ImgD.height=image.height;
            }
            ImgD.alt="点击查看详细信息...";                        
        }else{                                                    //如果图片的宽度比高度要小,那么就判断高度
            if(image.height>100){
                ImgD.height=100;
                ImgD.width=(image.width*100)/image.height;
            }else{
                ImgD.width=image.width;
                ImgD.height=image.height;
            }
            ImgD.alt="点击查看详细信息...";
        }
    }
}
//-->
</SCRIPT>
<!-- #include file="Head1.asp" -->

<!-- 下面的几个 width,值都必须保持一致,否则,显示的图片滚动一轮之后将停止 -->
<div id="demo" style="overflow:hidden; width:720px;border:1px solid red"> <!-- demo 为一个 div,里面包含一个name='demo_table'的 table -->
    <table border="1" name="demo_table"cellpadding="0" cellspacing="0" style="border:1px solid #c0de98">
        <tr>
            <td id="demo1" td style="color:#0000CC " align="center">   <!-- demo1 为table demo_table 的一个td,它里面包含一个 table -->
                <table width="100%" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
              <%
set rs_Product=server.createobject("adodb.recordset")
sqltext="select top 9 * from Product where Passed=True and Elite=true  order by UpdateTime desc"
rs_Product.open sqltext,conn,1,1
%>
              <tr align="center">
                <%
           If rs_Product.eof and rs_Product.bof then
           response.write "<td><p align='center'><font color='#ff0000'>还没任何产品</font></p></td>"
           else
              Do While Not rs_Product.EOF%>
                <td>
                    <img src=<%=rs_Product("DefaultPicUrl")%> onload=javascript:DrawImage(this);></td>
                   </td>
                <% if row_count mod 9 =0 then%>
              </tr>
              <tr>
                <%end if%>
                <%
rs_Product.MoveNext
Loop
end if
rs_Product.close
%>
              </tr>
            </table>
               
                1111111111111111111<table width="720" >
                    <tr>
                     <td style="color:#0000CC " align="center">
                        
                      </td>
                     </tr>
                </table>1111111111111111111
            </td>
            <td id="demo2">ddddddddddddd</td>
        </tr>
    </table></div>

<!-- 此段js用于滚动内容-->
<script>
    var speed=5;
    var demo=document.getElementById("demo");
    var demo1=document.getElementById("demo1");
    var demo2=document.getElementById("demo2");
    demo2.innerHTML=demo1.innerHTML
    function Marquee(){
        if(demo2.offsetWidth-demo.scrollLeft<=0)
            demo.scrollLeft-=demo1.offsetWidth
        else{
            demo.scrollLeft++
        }
    }
    var MyMar=setInterval(Marquee,speed)
    demo.onmouseover=function() {
        clearInterval(MyMar)
    }
    demo.onmouseout=function() {
        MyMar=setInterval(Marquee,speed)
    }
</script>

</body>
</html>
2011-12-03 19:18
huayi85
Rank: 1
等 级:新手上路
帖 子:8
专家分:0
注 册:2011-12-3
收藏
得分:0 
这是最完整的效果,分享给你了。


2011-12-03 19:18
快速回复:求助让首页的图片无缝向向左滚动
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.063405 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved