什么是焦点图

JavaScript08

什么是焦点图,第1张

网站焦点图是一种网站内容的展现形式,可简单理解为一张图片或多张图片展现在网页上就是网站焦点图。在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思只不过加上了图片。

css焦点图,不难理解网页设计现在流程html+css设计,css焦点图就是这样而来的,很多情况下需要结合js代码实现。

分类:

焦点图必须有图片,无图不成焦,不然纯文字的形式就是焦点文字或焦点新闻啦。

js焦点图,使用原生态的js代码实现的焦点图。样式相对单一,如借助css可实现多样的风格。

flash焦点图,看名字就可以理解,使用flash设计或用flash as编程设计的焦点图。该焦点图优点是字体展现效果佳,比纯网页形式更具有美感。不利于SEO与引擎的抓取。

以上内容参考:百度百科-网站焦点图

图片画的有点儿简陋,大致呢就是讲:

1、红框为一个容器DIV,overflow:hidden

2、容器里边有三个横向排列的图片,可以用UL>LI来做。由于容器的OVERFLOW所以2和3是看不见的。

3、下图,调整容器里边元素(如UL)的左外边距为负值,达到图二的效果。

4、之后就是要把1给放到3的后边去,为什么呢?答:为了循环滚动。

5、但是,如果1放到3后边,而UL的左外边距还是负值会出现什么情况呢?答:容器里边显示的3。所以还在把1放到3后边的同时,把UL的左外边距调零。

大致就这个思路吧,做着试试呗!