Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 javascript滚动视觉焦点图的实现代码

javascript滚动视觉焦点图的实现代码

发布时间:2014-11-17   编辑:www.jquerycn.cn
本篇文章介绍一个javascript实现的滚动视觉焦点图的代码,可以减速滚动,有需要的朋友,可以参考下。

代码如下:
 

复制代码 代码示例:

<!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.jquerycn.cn</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.jquerycn.cn/images/demo/f84e8eb672704622b9287f5be8702daa.jpg' );
focusRender.addItem( 'http://www.jquerycn.cn/images/demo/7dde2627e5924dd69d093a49b68ad363.jpg' );
focusRender.addItem( 'http://www.jquerycn.cn/images/demo/f84e8eb672704622b9287f5be8702daa.jpg' );
focusRender.addItem( 'http://www.jquerycn.cn/images/demo/00f9cffe42e042d68b70428a22bd289f.jpg' );
focusRender.render( 'focus_list' );
scrollFocus( 'focus_list', 'focus_btns', focusRender.getItemWidth(), focusRender.getItemCount() );
</script>
</body>
</html>

您可能感兴趣的文章:
javascript滚动视觉焦点图的实现代码
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Js 图片滚动的实现方法
Javascript实现图片上下左右滚动的代码
js实现页面加载时获取input文本框焦点
ScrollViewer支持鼠标拖拽及触摸touch拖拽
如何使用html5的Page Visibility API来实现获取焦点js事件
纯CSS实现滚动效果实例代码
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
jQuery操作checkbox选择(list/table)的代码分享

关键词: js焦点图   
[关闭]