<!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>无标题页</title>
        <link href="http://www.milanzx.com/Templets/Content/css/index.css" type="text/css" rel="stylesheet" />
<script src="http://www.milanzx.com/configuration/js/jquery.js" type="text/javascript"></script>
</head>
<body>
        <div class="p_pho">
        <div class="p_pho_l"><a id="imgSlideBibImage" href="#"><img height="440" alt="" width="850" src="http://www.milanzx.com/editor/editor/" /></a> </div>
        <div class="p_pho_r">
        <div class="p_pho_r_b">
        <ul id="pnlSlideSmalls"><li title="美丽达人专题HD" href="http://www.milanzx.com/10zt/ht/"><img src="http://www.milanzx.com/files/meilidrzk.jpg" width="111" height="71" /></li><li title="米兰蝶变7周年" href="http://milanzx.com/10zt/7db/"><img src="http://www.milanzx.com/files/41-124559-9yfxzk.jpg" width="111" height="71" /></li><li title="蝶变新生选手实录" href="http://www.milanzx.com/10zt/dbflash/"><img src="http://www.milanzx.com/files/dbshilu.jpg" width="111" height="71" /></li><li title="米兰名医汇" href="http://www.milanzx.com/10zt/mingyihui/"><img src="http://www.milanzx.com/files/myhzk.jpg" width="111" height="71" /></li>
 </ul>
            </div>
            </div>
            <script type="text/javascript">
(function ($) {
var smallpnl = $('#pnlSlideSmalls');
smallpnl.data('index', 0);
var smallItems = smallpnl.children('li');
SwitchSlide.call(smallItems[0]);
smallItems.each(function (index, item) {
$(item).mouseover(function () {
window.clearInterval(smallpnl.data('slide'));
smallpnl.data('index', $.inArray(this, smallItems));
SwitchSlide.call(this);
}).mouseout(StartSlide);
});
function SwitchSlide() {
var _self = $(this);
var bigImage = $('#imgSlideBibImage');
var bigTitle = $('#hlSlideTitle');
bigImage.find('img').attr('src', _self.find('img').attr('src'));
bigImage.attr('href', _self.attr('href')); bigTitle.attr('href', _self.attr('href'));
bigTitle.html(_self.attr('title')); smallItems.each(function (index, item) {
$(item).removeClass('over');
});
_self.addClass('over');
}
function IntervalSlide() {
smallpnl.data('index', smallpnl.data('index') + 1);
if (smallpnl.data('index') > 3) {
smallpnl.data('index', 0);
}
SwitchSlide.call(smallItems[smallpnl.data('index')]);
}
function StartSlide() {
smallpnl.data('slide', window.setInterval(IntervalSlide, 5000));
}
StartSlide();
})(jQuery);
</script>
            <div class="clear"></div>
            </div>
            </body>
</html>现在这个效果鼠标移动到小图片的时候 大图片显示的时候感觉太生硬了 想改下 让人感觉友好点 也就是有点特效 请大家给力哈。