纳金网

标题: 带缩略小图、简单的、竖长jQuery焦点图代码 [打印本页]

作者: 奇 时间: 2011-12-30 19:13
标题: 带缩略小图、简单的、竖长jQuery焦点图代码
带缩略小图、简单的、竖长jQuery焦点图代码，看标题已经描述的很明白了吧，如果您不喜欢这样的效果，可以使用烈火的站内搜索查找一下，不要以为是标题党哦。
　　另外，如果您打算美化一下，这需要您有一定的HTML+CSS知识，否则就不行了，练练手也不错的。
　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。
　　点击查看：网页特效
　　运行演示：
<!DOCTYPE html>

<html>

<head>

<title>简单的竖直图片切换代码，基于jQuery插件 - 烈火教程Veryhuo.COM</title>

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<style type="text/css">



</style>

<script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function()

{

$("#img_list img").mouseover(function(){

var url=$(this).attr('src');

$("#big_img img").attr('src',url);

});

});

</script>

</head>

<body>

<div id="big_img"><img src="/uploads/common/images/wall1.jpg" alt="" /></div>

<div id="img_list"><img src="/uploads/common/images/wall2.jpg" alt="" /><img src="/uploads/common/images/wall3.jpg" alt="" /><img src="/uploads/common/images/wall4.jpg" alt="" /></div>

</body>

</html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>

文章源自：烈火网，原文：http://www.veryhuo.com/a/view/43716.html

作者: 奇 时间: 2012-1-6 20:26

作者: 晃晃 时间: 2012-2-9 23:30
加精、加亮滴铁子，尤其要多丁页丁页

作者: C.R.CAN 时间: 2012-2-14 23:24
我也来支持下

作者: 菜刀吻电线 时间: 2012-4-1 23:34
我看看就走，你们聊！

作者: 菜刀吻电线 时间: 2012-5-23 23:19
凡系斑竹滴话要听；凡系朋友滴帖要顶!

作者: 菜刀吻电线 时间: 2012-6-8 23:18
好`我顶``顶顶

作者: tc 时间: 2012-6-10 23:26
发了那么多，我都不知道该用哪个给你回帖了，呵呵

作者: 菜刀吻电线 时间: 2012-6-15 23:21
凡系斑竹滴话要听；凡系朋友滴帖要顶

作者: 奇 时间: 2012-11-4 23:28
路过、路过、快到鸟，列位请继续...ing

作者: 奇 时间: 2013-2-16 23:37
发了那么多，我都不知道该用哪个给你回帖了，呵呵

欢迎光临纳金网 (http://wwww.narkii.com/club/)