纯CSS图片切换特效 20分
纯CSS图片切换特效如图所示,默认显示图片1,鼠标经过图片23456的时候,图片23456的图片在图片1的位置显示,给个DIV+CSS代码吧.默认显示图片1,鼠标经过图片...
纯CSS图片切换特效 如图所示,默认显示图片1,鼠标经过图片2 3 4 5 6的时候,图片2 3 4 5 6的图片在图片1的位置显示,给个DIV+CSS代码吧.
默认显示图片1,鼠标经过图片2 3 4 5 6的时候,图片2 3 4 5 6的图片在图片1的位置显示,鼠标移开还是显示图片1.
鼠标经过小图片的时候才在图片1的位置显示.否则显示图片1 展开
默认显示图片1,鼠标经过图片2 3 4 5 6的时候,图片2 3 4 5 6的图片在图片1的位置显示,鼠标移开还是显示图片1.
鼠标经过小图片的时候才在图片1的位置显示.否则显示图片1 展开
8个回答
展开全部
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯css实现图片相册幻灯片切换</title>
<style type="text/css">
*{ margin:0; padding:0; list-style:none;}
.lanrenzhijia{ width:180px; height:162px; margin:100px auto;}
.lanrenzhijia dl { position:relative; width:160px; height:142px; border:10px solid #EFEFDA; }
.lanrenzhijia dd { width:160px; height:120px;overflow:hidden;}
.lanrenzhijia img { border:2px solid #000; }
.lanrenzhijia dt { position:absolute; right:0px; bottom:0px;width:160px;height:22px; background:#FBFBEA; }
.lanrenzhijia a {display:block;float:right;margin:2px;width:18px; height:18px;text-align:center; color:#fff; text-decoration:none; background:#666;filter:alpha(opacity=70); opacity:.7;}
.lanrenzhijia a:hover {background:#000}
</style>
</head>
<body>
<div class="lanrenzhijia">
<dl>
<dt>
<a href="#indexa6">6</a><a href="#indexa5">5</a><a href="#indexa4">4</a><a href="#indexa3">3</a><a href="#indexa2">2</a><a href="#indexa1">1</a>
</dt>
<dd>
<img id="indexa1" name="indexa1" src="images/图片1.jpg" />
<img id="indexa2" name="indexa2" src="images/图片2.jpg" />
<img id="indexa3" name="indexa3" src="images/图片3.jpg" />
<img id="indexa4" name="indexa4" src="images/图片4.jpg" />
<img id="indexa5" name="indexa5" src="images/图片5.jpg" />
<img id="indexa6" name="indexa6" src="images/图片6.jpg" />
</dd>
</dl>
</div>
</body>
</html>
参考资料：懒人之家
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具，它提供了4种AI制作PPT的方式，包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼文档生成PPT，一站式集成多种AI生成PPT的方式，可满足办公用户的不同需求和使用场景。ai生...
点击进入详情页
本回答由博思aippt提供
展开全部
这个纯css不能实现 可以实现切换 但是不可以停留 显示的时候鼠标必须在这个框架的范围呢 否则就会回到原图
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
纯css只能单纯的实现隐藏，显示，无法对图片的src属性进行控制．并且也存在IE兼容问题．
你可以参考一下这篇文章，希望对你有帮助．
Google一下这个:
实现选项卡轮转切换效果
你可以参考一下这篇文章，希望对你有帮助．
Google一下这个:
实现选项卡轮转切换效果
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
没必要纯css实现，js+html很容易的，你要做技术就不要钻牛角尖。。。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
试试这个图片切换
有12345数字一起切换
有小图大图一起切换
里面有教程和源码
有12345数字一起切换
有小图大图一起切换
里面有教程和源码
参考资料： http://www.blueidea.com/common/shoutbox/redir.asp?8=r&id=11341
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（6）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
