热搜： Python PHP vue dedecms MySQL

纯CSS如何实现的无侵入的卡盘（幻灯片）

发布时间：2023-03-15 21:57:49 来源：网络

.

时间，渐渐带走了年少轻狂，也慢慢沉淀了冷暖自知。成功的道路上，肯定会有失败；对于失败，我们要正确地看待和对待，不怕失败者，则必成功；怕失败者，则一无是处，会更失败。

卡盘，也就是幻灯片，它应该是自动播放，但目前css是无法做到自动播放（可能会让你失望），所以它不应该叫幻灯片，但我扔这么称呼它为幻灯片。如果你认为可以用脚本来实现，嗯，地球人都知道，显然违背了我们的主题，纯css的，无侵入的。似乎我标题党了，但请你耐下性子来听我说。
今天无意在经典论坛看到一个帖子，纯CSS的图片展示效果，它是利用锚点来实现，创意非常好，但马上令我兴奋，因为该效果有缺点。
Opera无效
无法记录状态
没有hover效果
这些正是我想说的，我想补充的。
首先，我们让它来兼容所有A级浏览器。其实原理很简单，既然使用锚点，我们应该记得css3有个伪类:target（非IE内核浏览器都支持），让它来控制，不就更好？
<style>
.macji ul{
width:250px;
height:260px;
overflow:hidden;
}
#b:target{
margin:-260px 0 0;
}
#c:target{
margin:-520px 0 0;
}
</style>
<div class="macji">
<ul>
<li id="a">
<img src="http://pics.taobaocdn.com/bao/album/chl/digital/3Cpj_250X260_080904_fox.jpg" />
</li>
<li id="b">
<img src="http://pics.taobaocdn.com/bao/album/chl/smbzb_250x260_080818_ng.jpg" />
</li>
<li id="c">
<img src="http://pics.taobaocdn.com/bao/album/b2cdigital/guoqin_080919_250x260_xy.jpg" />
</li>
</ul>
<ol>
<li><a rel="nofollow noopener noreferrer" href="#a">a</a></li>
<li><a rel="nofollow noopener noreferrer" href="#b">b</a></li>
<li><a rel="nofollow noopener noreferrer" href="#c">c</a></li>
</ol>
</div>
测试地址
问题2，实现记录状态，那我们同样可以用伪类:target来实现，IE系列浏览器不支持。
<style>
/* 省略一些css，下面这行是最关键的 */
a.item:hover, :target a.item{
background:#f60;
}
</style>
<div class="macji">
<ul>
<li id="a">
<a rel="nofollow noopener noreferrer" href="#a" class="item">1</a>
<a rel="nofollow noopener noreferrer" href="#"><img src="http://pics.taobaocdn.com/bao/album/chl/digital/3Cpj_250X260_080904_fox.jpg" /></a>
</li>
<li id="b">
<a rel="nofollow noopener noreferrer" href="#b" class="item">2</a>
<a rel="nofollow noopener noreferrer" href="#"><img src="http://pics.taobaocdn.com/bao/album/chl/smbzb_250x260_080818_ng.jpg" />
</li>
<li id="c">
<a rel="nofollow noopener noreferrer" href="#c" class="item">3</a>
<a rel="nofollow noopener noreferrer" href="#"><img src="http://pics.taobaocdn.com/bao/album/b2cdigital/guoqin_080919_250x260_xy.jpg" /></a>
</li>
</ul>
</div>
测试地址
最后一个问题，hover效果，这可不是简单的:hover就可以实现，我们不能在li上给hover（这样当鼠标经过li就hover了），我们只能在数字上hover（<a rel="nofollow noopener noreferrer" href=”#a” class=”item”>1</a>）然后来影响它对于的图片，貌似不可能纯CSS实现，但确实可以实现，用“ + ”来实现。由于用到:target和“+”，所以只有Firefox、Opera支持。-__-
<style>
.macji{
position:relative;
}
.macji ul{
width:250px;
height:260px;
overflow:hidden;
}
ul li{
height:260px;
}
.macji a{
position:absolute;
left:0;
top:0;
z-index:2;
}
a.item{
z-index:10!important;
left:10px;
top:230px;
display:block;
width:20px;
height:20px;
border:solid 1px #777;
line-height:20px;
text-align:center;
color:#fff;
background:#aaa;
}
#b a.item{
left:31px;
}
#c a.item{
left:51px;
}
a.item:hover,:target a.item{
background:#f60;
}
#a:target a.pic,#b:target a.pic,#c:target a.pic{
z-index:3;
}
/* 原理是用绝对定位z-index来显示，另 “ + ” 只对节点的下一个兄弟节点有效 */
a.item:hover + a.pic{
z-index:9!important;
}
/* for ie */
a.pic{
* position:static;
}
</style>
<div class="macji">
<ul>
<li id="a">
<a rel="nofollow noopener noreferrer" href="#a" class="item">1</a>
<a rel="nofollow noopener noreferrer" href="#" class="pic"><img src="http://pics.taobaocdn.com/bao/album/chl/digital/3Cpj_250X260_080904_fox.jpg" />
</li>
<li id="b">
<a rel="nofollow noopener noreferrer" href="#b" class="item">2</a>
<a rel="nofollow noopener noreferrer" href="#" class="pic"><img src="http://pics.taobaocdn.com/bao/album/chl/smbzb_250x260_080818_ng.jpg" /></a>
</li>
<li id="c">
<a rel="nofollow noopener noreferrer" href="#c" class="item">3</a>
<a rel="nofollow noopener noreferrer" href="#" class="pic"><img src="http://pics.taobaocdn.com/bao/album/b2cdigital/guoqin_080919_250x260_xy.jpg" /></a>
</li>
</ul>
</div>
最终演示，代码实现是很简单，关键是是否联想到原理。举一反三，将会得到更多你想要的结果。不知不觉已是国庆节了，祝大家节日快乐！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xml:lang="zh-cn" lang="zh-cn" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> 
<head profile="http://gmpg.org/xfn/11"> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta content="麦鸡(MacJi)的博客，关注Web内容、结构与表现。" name="description" /> 
<meta content="Copyright (c) 2008 MacJi" name="copyright" /> 
<meta content="麦鸡,MacJi" name="author" /> 
<meta content="web前端开发,麦鸡" name="keywords" /> 
<title>纯css实现的Tab_</title> 
<style> 
body{ 
font-size:85%; 
} 
ul{ 
margin:0; 
padding:0; 
list-style:none; 
} 
img{ 
border-width:0; 
} 
.macji{ 
position:relative; 
} 
.macji ul{ 
width:250px; 
height:260px; 
overflow:hidden; 
} 
ul li{ 
height:260px; 
} 
.macji a{ 
position:absolute; 
left:0; 
top:0; 
z-index:2; 
} 
a.item{ 
z-index:10!important; 
left:10px; 
top:230px; 
display:block; 
width:20px; 
height:20px; 
border:solid 1px #777; 
line-height:20px; 
text-align:center; 
color:#fff; 
background:#aaa; 
} 
#b a.item{ 
left:31px; 
} 
#c a.item{ 
left:51px; 
} 
a.item:hover,:target a.item{ 
background:#f60; 
} 
#a:target a.pic,#b:target a.pic,#c:target a.pic{ 
z-index:3; 
} 
a.item:hover + a.pic{ 
z-index:9!important; 
} 
a.pic{ 
* position:static; 
} 
</style> 
</head> 
<body id="macji-com"> 
<h1>打造纯CSS的无侵入的卡盘（幻灯片），最终效果</h1> 
<ol> 
<li>无记录状态，无hover状态，所有浏览器支持</li> 
<li>无hover状态，所有非IE浏览器支持</li> 
<li>最终效果，Firefox、Opera支持</li> 
</ol> 
<hr /> 
<div class="macji"> 
<ul> 
<li id="a"> 
<a rel="nofollow noopener noreferrer" href="#a" class="item">1</a> 
<a rel="nofollow noopener noreferrer" href="https://www.haodaima.com" class="pic"><img 
src="http://pics.taobaocdn.com/bao/album/chl/digital/3Cpj_250X260_080904_fox.jpg" /></a> 
</li> 
<li id="b"> 
<a rel="nofollow noopener noreferrer" href="#b" class="item">2</a> 
<a rel="nofollow noopener noreferrer" href="http://www.kanshule.com" class="pic"><img 
src="http://pics.taobaocdn.com/bao/album/chl/smbzb_250x260_080818_ng.jpg" /></a> 
</li> 
<li id="c"> 
<a rel="nofollow noopener noreferrer" href="#c" class="item">3</a> 
<a rel="nofollow noopener noreferrer" href="http://www.kanshule.com"class="pic"><img 
src="http://pics.taobaocdn.com/bao/album/b2cdigital/guoqin_080919_250x260_xy.jpg" /></a> 
</li> 
</ul> 
</div> 
<hr /> 
<p>author: <a rel="nofollow noopener noreferrer" href="https://www.haodaima.com"></a></p> 
</body> 
</html>

到此这篇关于纯CSS如何实现的无侵入的卡盘（幻灯片）就介绍到这了。学习是我生活的主旋律，大学校园生活节奏轻快平稳，让我觉得充实快乐。伴着晨曦时那温暖的阳光，听着校园播音室的广播，捧着书本，静静地坐在校园的一个角落，边看书边感受着早晨新鲜空气中的清新。更多相关纯CSS如何实现的无侵入的卡盘（幻灯片）内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:

标签： CSS