实现轮播的一般思路为在一个大盒子中对无限个元素进行切换操作,大盒子固定大小,超出盒子范围进行隐藏,而里面无限个元素可以任何堆叠,按照一定的步骤进行位置变换,已达到在可视区域呈现我们想要的效果。

  看一个实例:

HTML代码:

 <div class="trans_box">
<div id="transImageBox" class="trans_image_box">
<div class="trans_image" style="width:300px;height:200px;background:blue;">111</div>
<div class="trans_image" style="width:300px;height:200px;background:red;">222</div>
<div class="trans_image" style="width:300px;height:200px;background:orange;">333</div>
</div>
<div id="transImageTrigger" class="trans_image_trigger">
<a href="#1">图片1</a> <a href="#2">图片2</a> <a href="#3">图片3</a>
</div>
</div>

CSS代码:

 .trans_box {
width:300px;
overflow:hidden;
}
.trans_image_box {
width:20000px;
height:200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.trans_image_box .trans_image {
float:left;
width:200px;
}
.trans_image_trigger {
padding-top: 10px;
text-align: center;
}

JS代码:

 var $ = function(id) {
return document.getElementById(id);
};
var $box = $("transImageBox"),
$oTrigger = $("transImageTrigger").getElementsByTagName("a"),
$len = $oTrigger.length;
for(var i = 0; i < $len; i++) {
$oTrigger[i].onclick = function(){
var index = Number(this.href.replace(/.*#/g,'')) || 1;
$box.style.marginLeft = (1 - index) * 300 + "px";
return false;
};
}

点击查看演示效果

CSS3实现轮播切换效果的更多相关文章

  1. 纯CSS3实现轮播切换效果

    使用纯css3实现与轮播器一样的功能. HTML代码: <div class="slide-container"> <input type="radio ...

  2. CSS3实现轮播图效果

    CSS3实现轮播图主要是由css:background-position和css3:animation实现.且实现此轮播需要一张四个图横着相连的图片. 注(Internet Explorer 10.F ...

  3. 巧用ViewPager 打造不一样的广告轮播切换效果

    一.概述 如果大家关注了我的微信公众号的话,一定知道我在5月6号的时候推送了一篇文章,文章名为Android超高仿QQ附近的人搜索展示(一),通过该文可以利用ViewPager实现单页显示多个Item ...

  4. CSS3实现轮播图效果2

    先前用CSS3做了一个一张图片实现的轮播,但是这样的图片很难找,于是又改进了一下. HTML: <div class="box"> <ul> <li& ...

  5. css3百叶窗轮播图效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 基于css3的轮播效果

    花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...

  7. CSS3图片轮播效果

    原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...

  8. 纯CSS实现轮播图效果,你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

  9. css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用

    <!DOCTYPE html> <html> <head> <title>css3动画使用技巧之—JQ配合css3实现轮播之animation-dela ...

随机推荐

  1. Python正则表达式学习摘要及资料

    摘要 在正则表达式中,如果直接给出字符,就是精确匹配. {m,n}? 对于前一个字符重复 m 到 n 次,并且取尽可能少的情况 在字符串'aaaaaa'中,a{2,4} 会匹配 4 个 a,但 a{2 ...

  2. Python3基础 sum,range 计算1到100的和

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  3. ConsensusClusterPlus根据基因表达量对样品进行分类

    #http://www.ncbi.nlm.nih.gov/pmc/articles/PMC2881355/ 一致聚类方法,采用重抽样方法来验证聚类合理性. library(ALL)data(ALL)d ...

  4. (转)C++中的static关键字的总结

    文章转自 http://www.cnblogs.com/BeyondAnyTime/archive/2012/06/08/2542315.html C++的static有两种用法:面向过程程序设计中的 ...

  5. 浅谈JavaScript中的闭包

    浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...

  6. CSS小三角制作

    以下是参考资料: 好多种图形的:http://www.jb51.net/css/41448.html -------------------------------------15.11.12---- ...

  7. go文件操作大全

    参考Go官方库的文件操作分散在多个包中,比如os.ioutil包,我本来想写一篇总结性的Go文件操作的文章,却发现已经有人2015年已经写了一篇这样的文章,写的非常好,所以我翻译成了中文,强烈推荐你阅 ...

  8. PBcR - 纠错及组装算法

    单分子测序reads(PB)的混合纠错和denovo组装 我们广泛使用的PBcR的原始文章就是这一篇 原文链接:Hybrid error correction and de novo assembly ...

  9. python3 登录接口

    登录接口 功能: 输入用户名(有一个用户名及对应的密码表) 认证成功后显示欢迎信息  输错三次后锁定(即第四次提示该账户已被锁定)用户登录锁定记录写到一个文件中. 用到:自定义函数.列表.字典 #Au ...

  10. 并发编程 04——闭锁CountDownLatch 与 栅栏CyclicBarrier

    Java并发编程实践 目录 并发编程 01—— ThreadLocal 并发编程 02—— ConcurrentHashMap 并发编程 03—— 阻塞队列和生产者-消费者模式 并发编程 04—— 闭 ...