网页设计照片滚动(网页设计照片滚动怎么弄)

网页设计已经成为衡量一个网站品质的重要标准。在众多设计元素中，照片滚动以其独特的视觉冲击力和互动性，成为了网页设计中的亮点。本文将从照片滚动的魅力、策略以及实际应用等方面进行探讨，以期为广大网页设计师提供有益的参考。

一、照片滚动的魅力

1. 突出主题，增强视觉效果

照片滚动能够将多个主题元素有机地整合在一起，使页面更具层次感和视觉效果。例如，在展示公司产品时，通过照片滚动的方式，可以直观地展示产品特点，吸引访客关注。

2. 提高用户体验，增加互动性

照片滚动可以引导访客浏览页面内容，提高用户体验。通过设置滚动按钮、自动播放等功能，增加页面与用户的互动性。

3. 节省空间，优化页面布局

照片滚动可以有效地节省页面空间，使页面布局更加紧凑。对于内容较多的网站，照片滚动可以有效地将信息进行分类，提高页面整体美观度。

二、照片滚动的策略

1. 合理规划照片尺寸和数量

照片滚动中的照片尺寸和数量应与页面布局相协调。一般来说，照片尺寸不宜过大，以免影响页面加载速度；照片数量不宜过多，以免造成视觉疲劳。

2. 注重照片质量，确保视觉效果

照片滚动中的照片质量至关重要，应选择清晰、美观的图片。根据图片内容进行适当的裁剪和调整，以突出主题。

3. 优化滚动效果，提高用户体验

照片滚动效果应与整体页面风格相一致。例如，可以采用淡入淡出、滑动切换等效果，使页面更具动感。合理设置滚动速度和方向，以提高用户体验。

4. 增加交互性，提升页面趣味性

在照片滚动中，可以设置点击切换、鼠标悬停等交互效果，使页面更具趣味性。结合动画、音效等元素，增强用户沉浸感。

三、实际应用案例

1. 企业官网

在企业官网中，通过照片滚动展示公司风采、团队介绍、产品展示等内容，使访客对公司有更全面的了解。

2. 新闻网站

在新闻网站中，照片滚动可以展示最新热点、热门话题，吸引用户关注。结合文字说明，提高信息传递效率。

3. 电商网站

在电商网站中，照片滚动可以展示热门商品、优惠活动，吸引用户购买。结合购物车、收藏夹等功能，提高用户体验。

照片滚动作为一种常见的网页设计元素，具有诸多优势。在网页设计中，合理运用照片滚动，可以提高页面视觉效果，增强用户体验。设计师应根据实际需求，制定合适的照片滚动策略，为用户提供优质的服务。

网页设计-图片滚动问题

你的代码本身就有错误！

一、向左滚动

1、调用“图片”栏目图片的向左滚动代码

以下是首页模板最新图片部分代码：

-----------------------------------

〈tr〉

〈td class=main_title_575〉〈B〉最新图片〈/B〉〈/td〉

〈/tr〉

〈tr〉

〈td class=main_tdbg_575 vAlign=center align=middle height=131〉

〈!--{$GetPicPhoto(3,0,True,0,4,False,False,0,1,1,130,90,20,0,True,4)}--〉 〈/td〉

〈/tr〉

------------------------------------

用以下是滚动代码代替上面红色的标签部分，注意红色部分的变化。

------------------------------------

〈!--滚动代码开始--〉

〈div id=demo style="OVERFLOW: hidden; WIDTH: 560px; HEIGHT: 120px"〉

〈table cellPadding=0 align=left border=0 cellspace="0"〉

〈tr〉

〈td id=demo11 vAlign=top〉

〈!--{$GetPicPhoto(3,0,True,0,12,False,False,0,1,1,130,90,20,0,True,12)}--〉〈/td〉

〈td id=demo12 vAlign=top〉〈/td〉

〈/tr〉

〈/table〉

〈/div〉

〈SCRIPT〉

var speed=15

demo12.innerHTML=demo11.innerHTML

function Marquee11(){

if(demo12.offsetWidth-demo.scrollLeft〈=0)

demo.scrollLeft-=demo11.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar1=setInterval(Marquee11,speed)

demo.onmouseover=function() {clearInterval(MyMar1)}

demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)}

〈/SCRIPT〉

〈!--滚动代码结束--〉

-----------------------------------

2、文章频道图片向左滚动代码 （效果演示）

以下是文章频道模板最新图片部分代码

-----------------------------------

〈tr〉

〈td Class="main_title_575"〉〈b〉最新图片{$ChannelShortName}〈/b〉〈/td〉

〈/tr〉

〈tr〉

〈td Class="main_tdbg_575"〉 {$GetPicArticle(ChannelID,0,True,0,4,false,false,0,3,2,130,90,20,0,True,4)} 〈/td〉

〈/tr〉

〈tr〉

〈td Class="main_shadow"〉〈/td〉

〈/tr〉

------------------------------------

用以下是滚动代码代替上面红色的标签，注意红色部分的变化。红色数字代表了滚动图片的总数（这里为8张）。

----------------------------------

〈!--滚动代码开始--〉

〈div id=demo style="OVERFLOW: hidden; WIDTH: 560px; HEIGHT: 120px"〉

〈table cellPadding=0 align=left border=0 cellspace="0"〉

〈tr〉

〈td id=demo11 vAlign=top〉

〈!--{$GetPicArticle(ChannelID,0,True,0,8,false,false,0,3,2,130,90,20,0,True,8)}--〉〈/td〉

〈td id=demo12 vAlign=top〉〈/td〉

〈/tr〉

〈/table〉

〈/div〉

〈SCRIPT〉

var speed=15

demo12.innerHTML=demo11.innerHTML

function Marquee11(){

if(demo12.offsetWidth-demo.scrollLeft〈=0)

demo.scrollLeft-=demo11.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar1=setInterval(Marquee11,speed)

demo.onmouseover=function() {clearInterval(MyMar1)}

demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)}

〈/SCRIPT〉

〈!--滚动代码结束--〉

-----------------------------------

3、下载频道图片向左滚动代码 （效果演示）

以下是下载频道模板推荐下载图片部分代码

-----------------------------------

〈tr〉

〈td Class="main_title_575"〉〈table width="100%" border="0" cellspacing="0" cellpadding="0"〉

〈tr〉

〈td〉〈b〉〈a class=’Class’ href="{$InstallDir}{$ChannelDir}/ShowElite.asp"〉推荐下载(图)〈/a〉〈/b〉〈/td〉

〈td align="right"〉{$RssElite}〈/td〉

〈/tr〉

〈/table〉〈/td〉

〈/tr〉

〈tr〉

〈td align="center" Class="main_tdbg_575"〉 {$GetPicSoft(ChannelID,0,True,0,4,false,True,0,3,2,130,90,20,0,True,4)} 〈/td〉

〈/tr〉

------------------------------------

用以下是滚动代码代替上面红色的标签，注意红色部分的变化。红色数字代表了滚动图片的总数（这里为12张）。

------------------------------------

〈!--滚动代码开始--〉

〈div id=demo style="OVERFLOW: hidden; WIDTH: 560px; HEIGHT: 120px"〉

〈table cellPadding=0 align=left border=0 cellspace="0"〉

〈tr〉

〈td id=demo11 vAlign=top〉

〈!--{$GetPicSoft(ChannelID,0,True,0,12,false,True,0,3,2,130,90,20,0,True,12)}--〉〈/td〉

〈td id=demo12 vAlign=top〉〈/td〉

〈/tr〉

〈/table〉

〈/div〉

〈SCRIPT〉

var speed=15

demo12.innerHTML=demo11.innerHTML

function Marquee11(){

if(demo12.offsetWidth-demo.scrollLeft〈=0)

demo.scrollLeft-=demo11.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar1=setInterval(Marquee11,speed)

demo.onmouseover=function() {clearInterval(MyMar1)}

demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)}

〈/SCRIPT〉

〈!--滚动代码结束--〉

------------------------------

从以上可以看出，滚动图片代码基本上是相同的，不同的是调用图片的标签变了。

------------------------------

二、向上滚动

向上滚动代码使用方法同上左滚动代码，这里只给出代码，不再说明。

以下是文章频道图片调用的滚动代码。

-----------------------------------------------------------

〈!--向上滚动代码开始--〉

〈DIV id=rolllink style="OVERFLOW: hidden; WIDTH: 160px; HEIGHT: 360px"〉

〈DIV id=rolllink1〉

〈TABLE cellSpacing=5 width="100%"〉

〈tr〉

〈td id=demo11 vAlign=top〉

〈!--{$GetPicArticle(0,0,True,0,6,false,false,0,3,2,160,100,20,0,True,1)}--〉 〈/td〉

〈td id=demo12 vAlign=top〉〈/td〉

〈/tr〉

〈/TABLE〉

〈/DIV〉

〈DIV id=rolllink2〉〈/DIV〉

〈/DIV〉

〈SCRIPT〉

var rollspeed=40

rolllink2.innerHTML=rolllink1.innerHTML

function Marquee(){

if(rolllink2.offsetTop-rolllink.scrollTop〈=0)

rolllink.scrollTop-=rolllink1.offsetHeight

else{

rolllink.scrollTop++

}

}

var MyMar=setInterval(Marquee,rollspeed)

rolllink.onmouseover=function() {clearInterval(MyMar)}

rolllink.onmouseout=function() {MyMar=setInterval(Marquee,rollspeed)}

〈/SCRIPT〉

〈!--向上滚动代码结束--〉

-----------------------------------------------------------

以下是图片频道的3行4列向上滚动代码摘录： （效果演示）

………………………

〈tr〉

〈td colspan="3" Class="main_title_575"〉〈a class="Class" href="{$InstallDir}{$ChannelDir}/ShowNew.asp"〉〈b〉最新{$ChannelShortName}〈/b〉〈/a〉〈/td〉

〈/tr〉

〈tr valign="top"〉

〈td colspan="3"〉〈table width="100%" border="0" cellspacing="0" cellpadding="0" Class="main_tdbg_575"〉

〈tr〉

〈td height="200" valign="top"〉

〈!--向上滚动代码开始--〉

〈DIV id=rolllink style="OVERFLOW: hidden; WIDTH: 575px; HEIGHT: 365px"〉

〈DIV id=rolllink1〉

〈TABLE cellSpacing=5 width="100%"〉

〈tr〉

〈td id=demo11 vAlign=top〉

〈!--{$GetPicPhoto(ChannelID,0,True,0,24,False,False,0,1,1,130,90,20,0,True, 4)}--〉〈/td〉

〈td id=demo12 vAlign=top〉〈/td〉

〈/tr〉

〈/TABLE〉

〈/DIV〉

〈DIV id=rolllink2〉〈/DIV〉

〈/DIV〉

〈SCRIPT〉

var rollspeed=40

rolllink2.innerHTML=rolllink1.innerHTML

function Marquee(){

if(rolllink2.offsetTop-rolllink.scrollTop〈=0)

rolllink.scrollTop-=rolllink1.offsetHeight

else{

rolllink.scrollTop++

}

}

var MyMar=setInterval(Marquee,rollspeed)

rolllink.onmouseover=function() {clearInterval(MyMar)}

rolllink.onmouseout=function() {MyMar=setInterval(Marquee,rollspeed)}

〈/SCRIPT〉

〈!--向上滚动代码结束--〉

〈/td〉

〈/tr〉

〈/table〉

〈/td〉

〈/tr〉

〈tr〉

〈td colspan="3" Class="main_shadow"〉〈/td〉

〈/tr〉

…………………………

三、向右滚动

--------------------------------------

〈!--向右滚动代码开始--〉

〈div id=demo style=overflow:hidden;height:120;width:560;〉

〈table align=left cellpadding=0 cellspace=0 border=0〉

〈tr〉

〈td id=demo1 valign=top〉〈!--{$GetPicPhoto(3,0,True,0,12,False,False,0,1,1,130,90,20,0,True,12)}--〉〈/td〉

〈td id=demo2 valign=top〉〈/td〉

〈/tr〉

〈/table〉

〈/div〉

〈script〉

var speed=30

demo2.innerHTML=demo1.innerHTML

demo.scrollLeft=demo.scrollWidth

function Marquee(){

if(demo.scrollLeft〈=0)

demo.scrollLeft+=demo2.offsetWidth

else{

demo.scrollLeft--

}

}

var MyMar=setInterval(Marquee, speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee, speed)}

〈/script〉

〈!--向右滚动代码结束--〉

注意滚动图片数不要太大，这会影响页面****。

你可以参照！

网站的！

网页设计 图片滚动代码

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

打开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.getElement**yTagName('li'),

itemCount = lis.length,

width = lis[0].offsetWidth, //获得每个img容器的宽度

marquee = function() {

c.scrollLeft += 2;

if(c.scrollLeft % width <= 1){ //当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面

ul.appendChild(ul.getElement**yTagName('li')[0]);

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”网页文件，最终效果如果所示：

网页设计---分辨率是多少

960px 基本上是目前比较主流的页面宽度——它可以让1024x768分辨率在最大化浏览器窗口的时候尽可能地使用宽度而不出现横向滚动条。而且在桌面分辨率逐步从1024x768过渡至更高分辨率的时候 iPad2 的正好接了上来——虽然不能获得最佳交互体验但是 960px 页面刚刚好可以获得在平板电脑上的的视觉兼容。当然 960px 对于三栏式及以上布局支持不好，因此许多重内容网站开始使用大于1000px的宽度。比如淘宝（1000px），京东（1210px），花瓣（1407px）等……PS：960px 刚好是 Full HD 尺寸宽度的一半，因此如果使用 1920x1200 或 1920x1080 的用户会习惯性使用 Win+← 和 Win+→ 快捷键同时把2个页面固定在桌面上（虽然会遮蔽一点点内容）。阅读体验非常有趣。

初学html是老师告诉我们的是一般960px，现在应该有好多这样宽度的设计，不过现在显示屏的设备一般在1024以上了，比如现在的笔记本一般是1336*768，这有那些大头的显示屏分辨率保持在1024左右，新的液晶显示屏也都已经达到了1440*900的分辨率，所以现在设计的话一般是960px,980px,1000px,1024px！