87,912
社区成员
发帖
与我相关
我的任务
分享在现有的jq代码基础上修改代码 让图片显示的时候有点特效
<!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>
现在这个效果鼠标移动到小图片的时候 大图片显示的时候感觉太生硬了 想改下 让人感觉友好点 也就是有点特效 请大家给力哈。
<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>
现在这个效果鼠标移动到小图片的时候 大图片显示的时候感觉太生硬了 想改下 让人感觉友好点 也就是有点特效 请大家给力哈。
...全文
请发表友善的回复…
发表回复
ylwqhr 2011-12-27
- 打赏
- 举报
我错了 这个本身就是自动轮播的
p2227 2011-12-27
- 打赏
- 举报
本来就是自动轮播的啊
ylwqhr 2011-12-27
- 打赏
- 举报
这个比开始的好多了，怎么加上自动轮播呢
ylwqhr 2011-12-27
- 打赏
- 举报
嗯这个效果比开始的好多了 怎么加上自动轮播呢？
p2227 2011-12-27
- 打赏
- 举报
代码很拼凑的样子，API参考 http://www.w3school.com.cn/jquery/jquery_ref_effects.asp
bigImage.find('img').attr('src', _self.find('img').attr('src')).css('display','none').fadeIn();
p2227 2011-12-27
- 打赏
- 举报
bigImage.find('img').attr('src', _self.find('img').attr('src')).css('display','none').fadeIn();
