css图片切换效果代码[不用js] - 快车库

css图片切换效果代码[不用js]

450 查看

<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> 
        <title>纯css图切换 练习 教程来自snwebsite</title> 
        <style type="text/css"> 
            a{ 
                display:block; 
                border:1px solid #cccccc; 
                width:20px; 
                height:20px; 
                margin:1px; 
            } 
            dl{ 
                position:absolute; 
                width:240px; 
                height:170px; 
            } 
            dt{ 
                position:absolute; 
                right:1px; 
                top:25px; 
            } 
            dd{ 
                width:240px; 
                height:170px; 
                overflow:hidden; 
            } 
        </style> 
        <script language="JavaScript" type="text/javascript">

</script>

<dl> 
            <dt><a href="#">1</a><a href="#">2</a><a href="#">3</a></dt> 
            <dd> 
                <img id="a" src="http://file.zhishichong.com/images/article/20160920/20080926074249449.jpg"/> 
                <img id="b" src="http://file.zhishichong.com/images/article/20160920/20080926074251309.jpg"/> 
                <img id="c" src="http://file.zhishichong.com/images/article/20160920/20080926074251902.jpg"/> 
            </dd> 
        </dl>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

最近更新的内容

CSS Gradient详解
JS核心系列：浅谈 call apply 与 bind
JS核心系列：浅谈原型对象和原型链
利用bootstrap的modal组件自定义alert，confirm和modal对话框
前端工程师是怎样一种职业
详解Javascript中的Object对象
JavaScript 开发最佳实践
谈笑风生组件化
彻底理解js中this的指向
javascript 作用域和 this 关键字

你可能感兴趣的文章

6本值得一读的JavaScript英文电子书
在JavaScript中一切都是对象吗？
使用 SVG 输出 Octicon
如何压缩 HTTP 请求正文
谈谈 HTTP/2 的协议协商机制
console对象–详解
HTTP 412 错误 – 先决条件失败 (Precondition failed)
调试时屏蔽JavaScript库代码 –Chrome DevTools Blackbox功能介绍
CSS vs JS动画：谁更快？
Web开发者色彩搭配快速指南

2025 - 快车库 - 我的知识库重庆启连科技有限公司渝ICP备16002641号-10
企客连连表单助手企服开发榜单123

渝公网安备 50010702501581号