- 最后登录
- 2013-7-18
- 注册时间
- 2011-7-16
- 阅读权限
- 70
- 积分
- 3247
 
- 纳金币
- 324742
- 精华
- 0
|
带缩略小图、简单的、竖长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">
<!--
#big_img {
width:300px;
height:400px;
border-width::5px;
border-style:solid;
}
#big_img img {
width:300px;
height:400px;
}
#img_list img {
width:60px;
height:80px;
}
-->
</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 |
|
发表于 2011-12-30 19:13:18
QQ好友和群
腾讯微博
腾讯朋友
微信
转播
淘帖
收藏
支持
反对