焦点图尺寸区域为980*900PX焦点图540*260PX的像素
图片尺寸：背景图片尺寸建议为1600*900PX
扩展小资料：
焦点图,一个较大的焦点图片展示,在它的下面有四个小的图片,点击下面小的图片,上面大的图片会随之变化”
网站焦点图是一种网站内容的展现形式，可简单理解为一张图片或多张图片展现在网页上就是网站焦点图。在网站很明显的位置，用图片组合播放的形式，类似焦点新闻的意思只不过加上了图片。一般多网站首页版面或频道首页版面，因为是通过图片的形式，所以有一定的吸引性、视觉吸引性。容易引起访问者的点击，据国外的设计机构调查统计，网站焦点图的点击率明显高于纯文字，转化率高于使用在文字标题5倍。
中文名
网站焦点图
定 义
一种网站内容的展现形式
使用在
网站首页版面或频道首页版面
分 类
js焦点图
分类
焦点图必须有图片，无图不成焦，不然纯文字的形式就是焦点文字或焦点新闻啦。
js焦点图，使用原生态的js代码实现的焦点图。样式相对单一，如借助css可实现多样的风格。
flash焦点图，看名字就可以理解，使用flash设计或用flash as编程设计的焦点图。该焦点图优点是字体展现效果佳，比纯网页形式更具有美感。不利于SEO与引擎的抓取。
css焦点图，不难理解网页设计现在流程html+css设计，css焦点图就是这样而来的，很多情况下需要结合js代码实现。
jquery焦点图，现在很流行的实现方式，逐步取代js原生态的焦点图，因为jquery焦点图的代码书写简单，借助jquery的类库很容易实现常见的js焦点图效果。而且代码少。不过需要有一定的网页设计基础。
这个很简单吧.
<span id="img1"><img src='1.jpg'></span>
<span id="img2" style="display:none"><img src='2.jpg'></span>
<span id="img3" style="display:none"><img src='3.jpg'></span>
<span id="img4" style="display:none"><img src='4.jpg'></span>
<span id="img5" style="display:none"><img src='5.jpg'></span>
<span id="img6" style="display:none"><img src='6.jpg'></span>
<script>
var sign = 1
window.setTimeOut(function(){
document,getElementById('img'+sign).style.display = ''
sign = sign <6 ? sign + 1 : 1
},1000)
</script>
这种切换有N多种实现的方法，主要还是根据图片的HTML代码，来写的。
要是引入第三库，还可以有一些切换的效果。
图片画的有点儿简陋，大致呢就是讲：
1、红框为一个容器DIV，overflow:hidden
2、容器里边有三个横向排列的图片，可以用UL>LI来做。由于容器的OVERFLOW所以2和3是看不见的。
3、下图，调整容器里边元素（如UL）的左外边距为负值，达到图二的效果。
4、之后就是要把1给放到3的后边去，为什么呢？答：为了循环滚动。
5、但是，如果1放到3后边，而UL的左外边距还是负值会出现什么情况呢？答：容器里边显示的3。所以还在把1放到3后边的同时，把UL的左外边距调零。
大致就这个思路吧，做着试试呗！
