网页设计怎么做滚动图片（DW设计网页中，像这种让图片在一个方框内自己滚动的效果怎么做）

本文目录

• DW设计网页中，像这种让图片在一个方框内自己滚动的效果怎么做
• 网页制作怎么让图片左右滚动拜托各位了 3Q
• 网页设计 图片滚动代码
• 网页设计HTML怎么设置所有图片一排横着滚动
• 如何制作滚动图片
• 网页设计中如何让图片轮播
• 网页制作中图片滚动及可编辑区域怎么做

DW设计网页中，像这种让图片在一个方框内自己滚动的效果怎么做

图片轮播。
需要用到js，大致就是设置定时器，然后把图片横向拼接在一起，只显示方框内的，方框外的用hidden隐藏，然后每过一段时间进行向左平移一个图片的距离，走完全部之后在进行无限循环

网页制作怎么让图片左右滚动拜托各位了 3Q

《marquee scrolldelay="50" scrollamount="2" onMouseOver="stop()" onMouseOut="start()"》 《img src=图片名1.jpg width=100 height=80》 《img src=图片名2.jpg width=100 height=80》 《/marquee》 注释：（// 后的是注释内容） 《marquee //marquee标记的开始标志； scrolldelay="50" // scrolldelay 滚动的延迟时间，值越大越滚动越慢； scrollamount="2" //表示滚动速度，值越大速度越快； onMuoseOver="stop()" //表示当鼠标移到图片时，图片停止滚动； onMuoseOut="start()" //表示录鼠标移开时，图片重新滚动； img src="XX.jpg" //src后跟的是要插入图片名及其扩展名； direction="left" //滚动方向，可选参数：up向上滚 down向下滚 left 向左滚 right向右滚 默认向左滚。

网页设计 图片滚动代码

素材的准备。为了更好的表现网站的风格和特色，具备一些更富表现力和吸引力的图片是必不可少的。同理，准备了一些与网页主题密切相关的图片，用于做为实现图片滚动效果的素材。

打开Dreamweaver8，新建一网页文件，并保存为名为“index.html"文件。

切换至代码界面，输入如下代码：

《body》《div id="photo-list"》  《ul id="scroll"》  
《li》《a href="#"》《img src="images/1.jpg" width="100px" height="100px" alt=""/》《/a》《/li》  
《li》《a href="#"》《img src="images/2.jpg" width="100px" height="100px" alt=""/》《/a》《/li》  
《li》《a href="#"》《img src="images/3.jpg" width="100px" height="100px" alt=""/》《/a》《/li》  
《li》《a href="#"》《img src="images/4.jpg" width="100px" height="100px" alt=""/》《/a》《/li》  
《li》《a href="#"》《img src="images/5.jpg" width="100px" height="100px" alt=""/》《/a》《/li》  
《li》《a href="#"》《img src="images/6.jpg" width="100px" height="100px" alt=""/》《/a》《/li》    《/ul》 《/div》《/body》

对应效果如图所示：

新建一CSS样式表文件，并将该文件保存到与“index.html”相同的目录下，文件名称为“MyStyle.css"。

在新建的样式表文件"MyStyle.css”文件中输入如下代码：
* { padding:0; margin:0;}       /*设置所有对像的内边距为0*/
body { text-align:center;}      /*设置页面居中对齐*/
#photo-list {
/* 6张图片的宽度（包含宽度、padding、border、图片间的留白）
计算：6*(100+2*2+1*2+9) - 9 
之所以减去9是第6张图片的右边留白 */
   width:681px;  

/* 图片的宽度（包含高度、padding、border）
   计算：100+2*2+1*2  */ 
    height:106px;  
    margin:50px auto; 
 overflow:hidden;     /*溢出部份将被隐藏*/ 
    border:1px dashed #ccc;  
}  
#photo-list ul { list-style:none;}  
#photo-list li { float:left; padding-right:9px;}  

#photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}

对应文件内容如图所示：

在网页文件"index.html"中添加对该样式表的引用：

《link rel="stylesheet" type="text/css" href="MyStyle.css"》

此时网页效果如图所示：

新建一个JS文件，并将该文件另存为“MoveEffect.js"。

在”MoveEffect.js“文件中输入如下所示代码：
   var id = function(el) {          return document.getElementById(el);        },
       c = id(’photo-list’);
   if(c) {
       var ul = id(’scroll’),
           lis = ul.getElementsByTagName(’li’),
           itemCount = lis.length,
           width = lis.offsetWidth, //获得每个img容器的宽度
           marquee = function() {
               c.scrollLeft += 2;
               if(c.scrollLeft % width 《= 1){  //当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面
                   ul.appendChild(ul.getElementsByTagName(’li’));
                   c.scrollLeft = 0;
               };
           },
           speed = 50; //数值越大越慢
       ul.style.width = width*itemCount + ’px’; //加载完后设置容器长度        
       var timer = setInterval(marquee, speed);
       c.onmouseover = function() {
           clearInterval(timer);
       };
       c.onmouseout = function() {
           timer = setInterval(marquee, speed);
       };
   };

然后在主页文件"index.html”中添加对该“MoveEffect.js”文件的引用。

《script type="text/javascript" src="MoveEffect.js"》《/script》

代码如图所示：

打开“index.html”网页文件，最终效果如果所示：

网页设计HTML怎么设置所有图片一排横着滚动

HTML页面图片横向滚播效果：
《html》
《head》
《style》
body{margin:0px;}
ul{list-style:none; border:0; padding:0px; margin:0px;}
li{list-style:none; float:left; border:0; padding:0px; margin:0px;}
img{border:0px; padding:0px; margin:0px;}
《/style》
《/head》
《body》
《center》《div id="div1" style="overflow:hidden; cursor:hand; margin-top:50px;" onmouseover="stop()" onmouseout="ss()"》
《ul id="img" style="clear:both;"》《!--放图片的容器，此容器在div1里滚动--》
《!--以下是要滚动的内容--》
《li》《img id="img0" src="http://www.alixixi.com/images/index180.gif" width="100" height="100" style="display:block;" /》《/li》
《li》《img id="img1" src="http://www.alixixi.com/images/index180.gif" width="100" height="100" style="display:block;" /》《/li》
《li》《img id="img2" src="http://www.alixixi.com/images/index180.gif" width="100" height="100" style="display:block;" /》《/li》
《li》《img id="img3" src="http://www.alixixi.com/images/index180.gif" width="100" height="100" style="display:block;" /》《/li》
《/ul》
《/div》
《/center》
《script language="javascript"》
var w,h,id,speed,Html
w=400;//-------滚动容器的宽度--------//
h=100;//-------滚动容器的高度--------//
id="div1";//-------滚动容器的id--------//
direction="left";//-------滚动方向有四个值

如何制作滚动图片

1、电脑打开美图秀秀，然后点击左上角的打开。

2、点击打开之后，选择一张图片，然后点击打开。

3、打开图片后，点击顶部的更多功能。

4、点击更多功能后，点击闪图。

5、点击闪图后，点击左侧的添加图片。

6、点击添加图片后，选择另一张图片，然后点击打开。

7、连续打开几张图片后，可以点击顶部的预览动画效果。

8、预览没问题后，点击底部的保存。

9、点击保存后，选择GIF格式保存就可以了。

网页设计中如何让图片轮播

这样的，在Dreamweaver 8中你做的网页上，比如你要给下载地址，代码是下载地址，就是说你把那几个文字加上链接，链接是你的软件的地址，我说明白了把1、首先在网上找个免费的网络硬盘。我网站上有网络硬盘链接地址；2、免费申请成为用户3、把文件上传到网络硬盘上，每次上传他都会给你个下载地址。要复制下来。4、然后打开自己的站，如果有图片的可以捕捉，然后上传，捕捉图片工具我站上可以下载，还有简单使用说明，做好链接就可以下载了，做链接不用我说了吧，做下载其实就是一个超级链接。原理是这样的，只要是ie不能直接在网上打开的，就会提示下载。所以你把你要上传的文件做成压缩文件，然后在网页上做一个超级链接，链接目标就是这个压缩文件，对方在点这个链接的时候，就会提示他下载了。

网页制作中图片滚动及可编辑区域怎么做

编写的文件，上面有贴图，有音乐，有、、、、

2主页（HomePage）

主页（HomePage)它是一个网页，是进入一个网站的开始画面，就同“瘟酒吧”的蓝天白云一样。也就是说，主页是一个网站的门面，要想设计出一个优秀的网站，就必须有一个“要让浏览者想不看都难”的主页，它必须引人入胜，能吸引每一个来访者的注意力，引发人们的好奇心，能让人产生一种深入探索你的网站的冲动。优秀的主页是一个好的网站必须具备的第一要素。

3超级链接（Hyperlink)

超级链接是scape的全部网页标签，极好的兼容性；提供多种设计样板，表单向导等傻瓜功能；强大的管理工能可以检查网页链接、查看组织结构、上网传送甚至检查你的拼写错误；“所见就所得”，普通视图、HTML、预览自由切换。当然你也可以按自己的爱好选择：Hotdog;Pagemill;Homesite......随便你。有了编程工具就该准备你的网页素材了！文本、图片、动画、midi和mp3音乐等等准备搬上网的东东。制作这些东西你也许要用到做图片的Photoshop、做gif动画的GALE、制作imagemap的工具MapThis、中文字库也应该拿出来。

3、制作网页

当然要制作网页了！......于是你把网页制作好了！（以后再讲）

4、测试网站

网页做好了，链接做好了，测试工作必不可少。用Frontpage98的FrontPagewebServer（WEB服务器）可以对你的网页进行测试，看看链接是否正确发现问题及时改正。

5、上传你的网页

不对不对，你还得先申请一个放网页的空间。现在网上提供免费主页空间的网站很多，回到我的主页或者default.htm；default.html，按申请地方的要求来，还有就是文件名的大小写，unix主机可区分严格哟。上传后你就可以欣赏你的作品了，怎么样？兴奋吧！

6、宣传你的网页

网页做好了，也上传了。但现在没人知道，怎样宣传你的主页呢？当然是上聊天室，到处贴帖子，发E-MAIL通知好友，登录搜索引擎，用免费广告，同别人互相交换连接......

7、网站维护和更新

要想访问量大，你得经常更新你的网页，增加网页内容，并弥补网站存在的缺陷。