效果图:实现代码: 复制代码 代码如下: hotmarquee <BR>* <BR>{ <BR>margin: 0; <BR>padding: 0; <BR>} <BR>body <BR>{ <BR>font: 12px; <BR>padding-top: 50px; <BR>padding-right: 200px; <BR>padding-bottom: 100px; <BR>padding-left: 200px; <BR>} <BR>ul <BR>{ <BR>list-style: none; <BR>} <BR>img <BR>{ <BR>padding: 2px; <BR>border: 1px solid #eee; <BR>} <BR>a <BR>{ <BR>outline: none; <BR>} <BR>#imgs <BR>{ <BR>width: 410px; <BR>margin-right: auto; <BR>margin-left: auto; <BR>} <BR>.top, .btm <BR>{ <BR>background: url(../images/sprite.gif) no-repeat; <BR>overflow: hidden; <BR>} <BR>.top <BR>{ <BR>background-position: 0 0; <BR>height: 5px; <BR>} <BR>.btm <BR>{ <BR>height: 7px; <BR>} <BR>.mid <BR>{ <BR>width: 400px; <BR>padding: 5px 7px 0; <BR>border: 1px solid #999; <BR>} <BR>.mid ul <BR>{ <BR>width: 400px; <BR>height: 600px; <BR>background: #fff; <BR>position: relative; <BR>overflow: hidden; <BR>} <BR>.mid ul li <BR>{ <BR>width: 400px; <BR>height: 600px; <BR>position: absolute; <BR>left: 490px; <BR>top: 0; <BR>} <BR>.mid ul li.first <BR>{ <BR>left: 0; <BR>} <BR>#img_list <BR>{ <BR>width: 486px; <BR>height: 20px; <BR>padding-top: 5px; <BR>overflow: hidden; <BR>height: 1%; <BR>} <BR>#img_list a <BR>{ <BR>display: block; <BR>width: 14px; <BR>height: 14px; <BR>text-indent: -9999px; <BR>float: left; <BR>margin-right: 5px; <BR>background: url(../images/sprite.gif) no-repeat 0 -13px; <BR>} <BR>#img_list a:hover, #img_list a.active <BR>{ <BR>background-position: -14px -13px; <BR>} <BR> <BR>var curr = 0, next = 0, count = 0; <BR>$(document).ready(function () { <BR>// 记录图片的数量 <BR>count = $('#img_list a').size(); <BR>t = setInterval('imgPlay()', 3000); <BR>// 鼠标移动到图片或导航上停止播放，移开后恢复播放 <BR>$('#imgs li, #img_list a').hover(function () { <BR>clearInterval(t); <BR>}, function () { <BR>t = setInterval('imgPlay()', 3000); <BR>}); <BR>//点击导航播放到相应的图片 <BR>$('#img_list a').click(function () { <BR>// index()函数返回当前导航的下标 <BR>var index = $('#img_list a').index(this); <BR>if (curr != index) { <BR>play(index); <BR>curr = index; <BR>}; <BR>return false; <BR>}); <BR>}); <BR>// 播放图片的函数 <BR>var imgPlay = function () { <BR>next = curr + 1; <BR>// 若当前图片播放到最后一张，这设置下一张要播放的图片为第一张图片的下标 <BR>if (curr == count - 1) next = 0; <BR>play(next); <BR>curr++; <BR>// 在当前图片的下标加1后，若值大于最后一张图片的下标，则设置下一轮其实播放的图片下标为第一张图片的下标，而next永远比curr大1 <BR>if (curr > count - 1) { curr = 0; next = curr + 1; } <BR>}; <BR>// 控制播放效果的函数 <BR>var play = function (next) { <BR>// 当前的图片滑到左边-500px，完成后返回到右边490px <BR>// 下一张图片滑到0px处，完成后导航的焦点切换到下一个点上 <BR>$('#imgs li').eq(curr).css({ 'opacity': '0.5' }).animate({ 'left': '-500px', 'opacity': '1' }, 'slow', function () { <BR>$(this).css({ 'left': '490px' }); <BR>}).end() <BR>.eq(next).animate({ 'left': '0px', 'opacity': '1' }, 'slow', function () { <BR>$('#img_list a').siblings('a').removeClass('active').end().eq(next).addClass('active'); <BR>}); <BR>}; <BR> target="_blank"> alt="1" /> alt="2" /> alt="3" /> alt="4" /> 1 2 3 4
alt="1" />
alt="2" />
alt="3" />
alt="4" />