JS图片切换特效
像这个http://www.nexcom.cn/网站首页的那个大的图片切换特效,谁能把他扒下来,高分酬谢...
像这个http://www.nexcom.cn/ 网站首页的那个大的图片切换特效,谁能把他扒下来,高分酬谢
展开
3个回答
2012-03-26
展开全部
试试这个图片切换
有12345数字一起切换
鼠标点一下数字会变换到另一张图片,不点就会自动换
里面有教程和源码
有12345数字一起切换
鼠标点一下数字会变换到另一张图片,不点就会自动换
里面有教程和源码
参考资料: http://www.blueidea.com/common/shoutbox/redir.asp?4=p&id=10895
展开全部
主要代码,利用jquery写的
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.preload.js" type="text/javascript"></script>
<script type="text/javascript">
var bigBannerImgs = new Array(3);
var baseUrl = '/FilData/getimg/fakeGuid';
bigBannerImgs[0] = {'id':'7612ddb8-cfa4-44e4-be44-5586c3f7c753','link':'/Products/industrial-computing-solutions/video-intelligent-surveillance/video-intelligent-surveillance/mobile-nvr-nvis-3542','openNew':'_self'};
bigBannerImgs[1] = {'id':'b8631966-efba-4cc3-9c9e-bd94c971ceff','link':'/Products/multi-media-solutions/digital-signage-player/cost-effective-player/atom-player-ndis-126','openNew':'_self'};
bigBannerImgs[2] = {'id':'051a6dbf-4c4f-4e48-866c-aeaa9adf0f68','link':'/Products/mobile-computing-solutions/train-pc/train-pc/transportation-computer-train-pc-nrok3000','openNew':'_self'};
jQuery("#sliderBanner").show();
jQuery.preload([bigBannerImgs[0].id, bigBannerImgs[1].id, bigBannerImgs[2].id], {
base: '/FilData/getimg/'
});
jQuery(document).ready(function ($) {
var random = 2;
var url=baseUrl.replace("fakeGuid",bigBannerImgs[random].id);
$('.sliderBan img').attr('src', url);
$('.sliderBan a').attr('href',bigBannerImgs[random].link).attr('target',bigBannerImgs[random].openNew);
$('#ContentTablePic img').each(function (idx) {
$(this).bind('mouseover', function () {
url = baseUrl.replace("fakeGuid", bigBannerImgs[idx].id);
$('.sliderBan img').attr('src', url);
$('.sliderBan a').attr('href',bigBannerImgs[idx].link).attr('target',bigBannerImgs[idx].openNew);
$('#ContentTablePic .PicImage').removeClass('PicImageHover');
$(this).parent().addClass('PicImageHover');
});
});
if (navigator.userAgent.search("MSIE 9") > -1)
{
$('#LabelPanel').attr('style','margin-top:-62px');
}
});
</script>
<div class="sliderBan"></div>
<div id="ContentTablePic">
<table id="TablePic">
<tbody><tr>
<td class="image"><div class="PicImage"><img alt="" src="/FilData/getimg/4e382d8f-2fd9-4022-972c-a3f962a39924"></div></td>
<td class="text">Excel at Mobile NVR</td>
<td class="image"><div class="PicImage"><img alt="" src="/FilData/getimg/a5f1467c-19bb-4cb2-a42b-fd1a9029c6b1"></div></td>
<td class="text">1080P Media Player Driven by<br>Intel® Atom™ Processor D2700</td>
<td class="image"><div class="PicImage PicImageHover"><img alt="" src="/FilData/getimg/eb3c07bf-3fe4-454e-9ebc-693b97d0930a"></div></td>
<td class="text">EN50155 Transportation Computer Keeps Trains under Control</td>
</tr>
</tbody></table>
</div>
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.preload.js" type="text/javascript"></script>
<script type="text/javascript">
var bigBannerImgs = new Array(3);
var baseUrl = '/FilData/getimg/fakeGuid';
bigBannerImgs[0] = {'id':'7612ddb8-cfa4-44e4-be44-5586c3f7c753','link':'/Products/industrial-computing-solutions/video-intelligent-surveillance/video-intelligent-surveillance/mobile-nvr-nvis-3542','openNew':'_self'};
bigBannerImgs[1] = {'id':'b8631966-efba-4cc3-9c9e-bd94c971ceff','link':'/Products/multi-media-solutions/digital-signage-player/cost-effective-player/atom-player-ndis-126','openNew':'_self'};
bigBannerImgs[2] = {'id':'051a6dbf-4c4f-4e48-866c-aeaa9adf0f68','link':'/Products/mobile-computing-solutions/train-pc/train-pc/transportation-computer-train-pc-nrok3000','openNew':'_self'};
jQuery("#sliderBanner").show();
jQuery.preload([bigBannerImgs[0].id, bigBannerImgs[1].id, bigBannerImgs[2].id], {
base: '/FilData/getimg/'
});
jQuery(document).ready(function ($) {
var random = 2;
var url=baseUrl.replace("fakeGuid",bigBannerImgs[random].id);
$('.sliderBan img').attr('src', url);
$('.sliderBan a').attr('href',bigBannerImgs[random].link).attr('target',bigBannerImgs[random].openNew);
$('#ContentTablePic img').each(function (idx) {
$(this).bind('mouseover', function () {
url = baseUrl.replace("fakeGuid", bigBannerImgs[idx].id);
$('.sliderBan img').attr('src', url);
$('.sliderBan a').attr('href',bigBannerImgs[idx].link).attr('target',bigBannerImgs[idx].openNew);
$('#ContentTablePic .PicImage').removeClass('PicImageHover');
$(this).parent().addClass('PicImageHover');
});
});
if (navigator.userAgent.search("MSIE 9") > -1)
{
$('#LabelPanel').attr('style','margin-top:-62px');
}
});
</script>
<div class="sliderBan"></div>
<div id="ContentTablePic">
<table id="TablePic">
<tbody><tr>
<td class="image"><div class="PicImage"><img alt="" src="/FilData/getimg/4e382d8f-2fd9-4022-972c-a3f962a39924"></div></td>
<td class="text">Excel at Mobile NVR</td>
<td class="image"><div class="PicImage"><img alt="" src="/FilData/getimg/a5f1467c-19bb-4cb2-a42b-fd1a9029c6b1"></div></td>
<td class="text">1080P Media Player Driven by<br>Intel® Atom™ Processor D2700</td>
<td class="image"><div class="PicImage PicImageHover"><img alt="" src="/FilData/getimg/eb3c07bf-3fe4-454e-9ebc-693b97d0930a"></div></td>
<td class="text">EN50155 Transportation Computer Keeps Trains under Control</td>
</tr>
</tbody></table>
</div>
追问
var baseUrl = '/FilData/getimg/fakeGuid';
base: '/FilData/getimg/'
这3种,我该如何修改成自己的?
追答
对的
这里是图片地址
切换用的那三张图片
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询