首页 > 代码库 > CSS3实现轮播切换效果
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 }
点击查看演示效果
CSS3实现轮播切换效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。