效果图:

实现代码:

hotmarquee

*

{

margin: 0;

padding: 0;

}

body

{

font: 12px;

padding-top: 50px;

padding-right: 200px;

padding-bottom: 100px;

padding-left: 200px;

}

ul

{

list-style: none;

}

img

{

padding: 2px;

border: 1px solid #eee;

}

a

{

outline: none;

}

#imgs

{

width: 410px;

margin-right: auto;

margin-left: auto;

}

.top, .btm

{

background: url(../images/sprite.gif) no-repeat;

overflow: hidden;

}

.top

{

background-position: 0 0;

height: 5px;

}

.btm

{

height: 7px;

}

.mid

{

width: 400px;

padding: 5px 7px 0;

border: 1px solid #999;

}

.mid ul

{

width: 400px;

height: 600px;

background: #fff;

position: relative;

overflow: hidden;

}

.mid ul li

{

width: 400px;

height: 600px;

position: absolute;

left: 490px;

top: 0;

}

.mid ul li.first

{

left: 0;

}

#img_list

{

width: 486px;

height: 20px;

padding-top: 5px;

overflow: hidden;

height: 1%;

}

#img_list a

{

display: block;

width: 14px;

height: 14px;

text-indent: -9999px;

float: left;

margin-right: 5px;

background: url(../images/sprite.gif) no-repeat 0 -13px;

}

#img_list a:hover, #img_list a.active

{

background-position: -14px -13px;

}

var curr = 0, next = 0, count = 0;

$(document).ready(function () {

// 记录图片的数量

count = $('#img_list a').size();

t = setInterval('imgPlay()', 3000);

// 鼠标移动到图片或导航上停止播放，移开后恢复播放

$('#imgs li, #img_list a').hover(function () {

clearInterval(t);

}, function () {

t = setInterval('imgPlay()', 3000);

});

//点击导航播放到相应的图片

$('#img_list a').click(function () {

// index()函数返回当前导航的下标

var index = $('#img_list a').index(this);

if (curr != index) {

play(index);

curr = index;

};

return false;

});

});

// 播放图片的函数

var imgPlay = function () {

next = curr + 1;

// 若当前图片播放到最后一张，这设置下一张要播放的图片为第一张图片的下标

if (curr == count - 1) next = 0;

play(next);

curr++;

// 在当前图片的下标加1后，若值大于最后一张图片的下标，则设置下一轮其实播放的图片下标为第一张图片的下标，而next永远比curr大1

if (curr > count - 1) { curr = 0; next = curr + 1; }

};

// 控制播放效果的函数

var play = function (next) {

// 当前的图片滑到左边-500px，完成后返回到右边490px

// 下一张图片滑到0px处，完成后导航的焦点切换到下一个点上

$('#imgs li').eq(curr).css({ 'opacity': '0.5' }).animate({ 'left': '-500px', 'opacity': '1' }, 'slow', function () {

$(this).css({ 'left': '490px' });

}).end()

.eq(next).animate({ 'left': '0px', 'opacity': '1' }, 'slow', function () {

$('#img_list a').siblings('a').removeClass('active').end().eq(next).addClass('active');

});

};