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

纯css图切换 练习 教程来自snwebsite

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;
}

123


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

赞 (0)

相关推荐

  • 用html+css+js实现的一个简单的图片切换特效

    用html+css+js实现的一个简单的图片切换特效

    如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下 复制代码 代码如下: <div class="wrapper"> <div id="focus"> <ul> <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" a

  • 简单的实现点击箭头图片切换的js代码

    简单的实现点击箭头图片切换的js代码

    步骤如下: (1) 准备图片(左右箭头,以及一些示例图片) (2) JS(jquery)的代码如下: 复制代码 代码如下: <script type="text/javascript" src="JS/jquery-1.4.4.js"></script> <script type="text/javascript"> var picPath = new Array(); picPath.push("I

  • js实现单张图片平移切换效果

    本文参考了JQuery实现图片切换(自动切换+手动切换) 由于个人不需要手动切换功能,因此把那部分的内容删了,主要是增加了无缝切换的效果. 原理也很简单,大概是一张图移动到左边以后,从底部移回最右,等待下一次循环. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-1.10.1.min.js"></s

  • js鼠标点击图片切换效果代码分享

    js鼠标点击图片切换效果代码分享

    本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不断切换效果. 运行效果图:                                      -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js鼠标点击图片切换效果代码如下 <hea

  • JavaScript 图片切换展示效果alibaba拓展版第1/3页

    首先需要一个容器,设置它的overflow为hidden,position为relative: 容器里面还要一个滑动对象,设置它的position为absolute: 在initialize()函数里初始化一些属性. 在切换之前先执行Start()函数,进行相关设置, 主要是设置Index属性(索引)和_target属性(目标值): 复制代码 代码如下: if(this.Index < 0){ this.Index = this._count - 1; } else if (this.Index

  • javascript实现图片切换的幻灯片效果源代码

    网页上有许多图片切换的幻灯片效果,它们大多用flash实现,那javascript能不能实现他们呢,当然可以,我自己写了一个,和大家一同分享 废话少说,看代码 复制代码 代码如下: sx.activex.imagefade={ init:function(imga,fadeint,fadeoutt){ var ti=new Array(); for(var i=0;i<imga.length;i++){ ti[i]=new Image(); ti[i].src=imga[i] } var div

  • 纯js实现背景图片切换效果代码

    html代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>背景切

  • jQuery图片切换插件jquery.cycle.js使用示例

    jQuery图片切换插件jquery.cycle.js使用示例

    Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. 复制代码 代码如下: <head> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascri

  • 纯js无flash仿搜狐女人频道FLASH图片切换效果代码

    纯js无flash仿搜狐女人频道FLASH图片切换效果代码

    前2个星期看到一位朋友说如何用JS实现http://women.sohu.com/这个页中FLASH图片切换效果,这两天有空,做了一个,大家评评: [加载图片慢点请等会] www.jb51.net 我们 JS图片切换 :: * { margin:0; padding:0; } body { margin:0; color:#88c; background:#333; } img { margin:0; padding:0; border:0; } #js_F { position:relativ

  • 最简单的js图片切换效果实现代码

    无意中在网上发现的,代码非常的简单,一看就明白! 复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=5000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]

随机推荐