代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript焦点图-www.jb200.com</title>
<script type="text/javascript" src="/js/jquery-1.8.0.min.js"></script>
<style type="text/css">
body, div{ margin:0; padding:0;}
li{ list-style:none;}
.events_ico{ display:block; width:100px; height:20px; position:absolute; left:500px; top:280px; z-index:1}
.events_ico a{ display:block; width:15px; height:15px; background:black; margin-left:10px; float:left;}
a.onthis{ background:red}
.focus_view{ width:650px; height:310px; overflow:hidden; position:relative;}
.focus_view ul{ position:absolute; left:0; top:0; margin:0; padding:0;}
.focus_view ul li{ width:650px; height:310px; float:left;}
</style>
<script type="text/javascript">
//首页焦点图
( function() {
//焦点图html结构生成器
var FocusHtmlRender = window[ 'FocusHtmlRender' ] = function() {
var datasource = [];
var self = this;
var placeholder;
this.addItem = function( url ) {
datasource.push( url );
}
this.render = function( placeholderid ) {
placeholder = $( document.getElementById( placeholderid ) );
placeholder.html( getHtml() );
placeholder.width( self.getItemCount() * self.getItemWidth() );
}
this.getItemWidth = function() {
var firstItem = placeholder.children( 'li:eq(0)' );
return firstItem.width();
}
this.getItemCount = function() {
return datasource.length;
}
var getHtml = function() {
var html = '';
for( var i = 0; i < datasource.length; i ++ ) {
html += '<li><img src="'+ datasource[ i ] +'"/></li>';
}
return html;
}
}
//集点图滚动
var LEFT = 0;
var RIGHT = 1;
var scrollList;
var btnsPlaceholder
var elWidth;
var elCount;
var buttons;
var prevIndex = 0;
var autoMoveTimer;
window[ 'scrollFocus' ] = function( scrollListId, btnsPlaceholderId, itemWidth, itemCount ) {
scrollList = $( document.getElementById( scrollListId ) );
btnsPlaceholder = $( document.getElementById( btnsPlaceholderId ) );
elWidth = itemWidth;
elCount = itemCount;
buttons = renderButtons();
bindButtonsEvent();
autoMove();
}
var autoMove = function() {
autoMoveTimer = window.setInterval( function() {
var nextIndex = prevIndex + 1;
nextIndex = nextIndex > elCount - 1 ? 0 : nextIndex;
gotoPage( nextIndex );
}, 3000 );
}
var stopAutoMove = function() {
window.clearInterval( autoMoveTimer );
autoMoveTimer = null;
}
var bindButtonsEvent = function() {
var timer;
buttons.bind( 'mouseover',
function() {
stopAutoMove();
var self = $( this );
var index = buttons.index( self );
gotoPage( index );
});
}
var gotoPage = function( index ) {
if( prevIndex == index ) return;
var distance = - ( ( index - prevIndex ) * elWidth );
move( distance );
prevIndex = index;
buttons.removeClass( 'onthis' );
buttons.eq( prevIndex ).addClass( 'onthis' );
}
var move = function( distance ) {
var direction = distance < 0 ? LEFT : RIGHT;
var absDistance = Math.abs( distance );
var count = 0;
var timer = setInterval( function() {
var speed = ( absDistance - count ) / 8;
speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
count += speed;
var left = scrollList.css( 'left' );
left = parseInt( left );
left = direction == LEFT ? left - speed : left + speed;
scrollList.css( { left: left } );
if( count >= absDistance ) {
clearInterval( timer );
if( !autoMoveTimer ) autoMove();
}
}, 15 )
}
var renderButtons = function() {
var btnsHtml = '';
for( var i = 0; i < elCount; i++ ) {
var className = i == 0 ? 'onthis' : '';
btnsHtml += '<a href="javascript:;" class="' + className + '"></a>';
}
btnsPlaceholder.html( btnsHtml );
return btnsPlaceholder.children( 'a' );
}
} )();
</script>
</head>
<body>
<span class="events_ico" id="focus_btns">
<a href="#">1</a>
<a href="#" class="onthis">2</a>
<a href="#">3</a>
<a href="#">4</a>
</span>
<div class="focus_view">
<ul id="focus_list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
var focusRender = new FocusHtmlRender();
//以下图片路径，请在测试时替换为实际的图片路径
focusRender.addItem( 'http://www.jb200.com/images/demo/f84e8eb672704622b9287f5be8702daa.jpg' );
focusRender.addItem( 'http://www.jb200.com/images/demo/7dde2627e5924dd69d093a49b68ad363.jpg' );
focusRender.addItem( 'http://www.jb200.com/images/demo/f84e8eb672704622b9287f5be8702daa.jpg' );
focusRender.addItem( 'http://www.jb200.com/images/demo/00f9cffe42e042d68b70428a22bd289f.jpg' );
focusRender.render( 'focus_list' );
scrollFocus( 'focus_list', 'focus_btns', focusRender.getItemWidth(), focusRender.getItemCount() );
</script>
</body>
</html>