CSS3实现轮播切换效果

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

看一个实例:

HTML代码:

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

CSS代码:

 1 .trans_box {
 2     width:300px;
 3     overflow:hidden;
 4 }
 5 .trans_image_box {
 6     width:20000px;
 7     height:200px;
 8     -webkit-transition: all 1s ease-in-out;
 9        -moz-transition: all 1s ease-in-out;
10          -o-transition: all 1s ease-in-out;
11             transition: all 1s ease-in-out;
12 }
13 .trans_image_box .trans_image {
14     float:left;
15     width:200px;
16 }
17 .trans_image_trigger {
18     padding-top: 10px;
19     text-align: center;
20 }

JS代码:

 1 var $ = function(id) {
 2     return document.getElementById(id);
 3 };
 4 var $box = $("transImageBox"),
 5      $oTrigger = $("transImageTrigger").getElementsByTagName("a"),
 6      $len = $oTrigger.length;
 7 for(var i = 0; i < $len; i++) {
 8       $oTrigger[i].onclick = function(){
 9             var index = Number(this.href.replace(/.*#/g,‘‘)) || 1;
10             $box.style.marginLeft = (1 - index) * 300 + "px";
11             return false;
12       };
13 }

点击查看演示效果

时间: 2024-10-11 10:03:26

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

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

一.概述 如果大家关注了我的微信公众号的话,一定知道我在5月6号的时候推送了一篇文章,文章名为Android超高仿QQ附近的人搜索展示(一),通过该文可以利用ViewPager实现单页显示多个Item且能够添加一些炫酷的动画效果.我当时阅读这篇文章的时候,简单做了下记录,然后想了想,可以按照该思路做一个比较特殊轮播效果,如图: 其实看到这个大家肯定不陌生,对于ViewPager切换有个很出名的库叫JazzViewPager,没错,我又跑了下JazzyViewPager的例子,看看有什么动画效果可

CSS3实现轮播图效果2

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

Github学习之MagicViewPager实现特色轮播切换效果

本片文章学习自翔哥的库: https://github.com/hongyangAndroid/MagicViewPager 实现效果: Rotate Y Rotate Down Rotate Up Alpha ScaleIn ScaleIn + Alpha + Rotate Down 效果贴了这么多,看看如何实现的吧. 添加依赖: compile 'com.zhy:magic-viewpager:1.0.1' 布局: <?xml version="1.0" encoding=&

css3百叶窗轮播图效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>    <head>        <!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8 国际编码-->        &

基于css3的轮播效果

花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framework动画效果实现轮播效果以及之前提到的input:checked伪类来实现轮播的控制.在轮播的控制上不可避免的使用了js,一直想写出优雅的js代码,在看了自己写的代码之后发现自己还有很大的提升空间,也许该找个机会去阅读优秀框架的源代码了. 当然也借鉴了网上很多资料,有问题的是在ie下完全没有效果,对

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

原生JS实现 ‘Tab栏切换’,‘手风琴’,‘轮播图’效果

1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib

js实现轮播图效果(附源码)--原生js的应用

1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content="奇客艺术"> <meta name="keyword" content="关键字"> <meta name=

花瓣网轮播图效果

没有加上定时器效果,仅仅能手动进行图片的切换 效果图: index.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>index</title> &