元素轮播效果是页面中经常会使用的一种效果。这个例子实现了通过元素的隐藏和显示来表现轮播效果。效果比较简单。

效果图如下：

源代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">

 <title> cycle demo </title>

 <meta name="author" content="rainna" />

 <meta name="keywords" content="rainna's js lib" />

 <meta name="description" content="cycle demo" />

 </head>

 <style>

 *{margin:0;padding:0;}

 li{list-style:none;}

 .cycleBox{position:relative;width:600px;height:450px;margin:100px auto;}

 .cycleBox .elemsWrap li,.cycleBox .elemsWrap img{position:absolute;left:0;top:0;width:100%;height:100%;}

 .cycleBox .iconsWrap{position:absolute;right:15px;bottom:15px;}

 .cycleBox .iconsWrap li{display:inline-block;margin:0 0 0 10px;cursor:pointer;color:#fff;}

 .cycleBox .elemsWrap li{display:none;}

 </style>

 <body>

 <div class="cycleBox" id="cycleWrap">

     <ul class="elemsWrap" id="elemsWrap">

         <li>

             <div class="pic"><img src="http://img.itc.cn/focushome/73/16/73165df750e44c8943d40d2ebe67965d.jpg"></div>

             <div class="txt">小两口的95平米简约婚房</div>

         </li>

         <li>

             <div class="pic"><img src="http://img.itc.cn/focushome/b5/0a/b50abd5a46cedbf4dd8525fd9e0fcb69.jpg"></div>

             <div class="txt">本案是一套建筑面积95平米的两室小户型。</div>

         </li>

         <li>

             <div class="pic"><img src="http://img.itc.cn/focushome/e4/48/e4484905e23b45df40acddaa13b68d44.jpg"></div>

             <div class="txt">在色彩的搭配上以低饱和度的浅咖色为主搭配少量的黑色与白色来增加层次，最后配以高饱和度的装饰画作为跳色。</div>

         </li>

         <li>

             <div class="pic"><img src="http://img.itc.cn/focushome/1e/de/1edea51b5420795665ab3e8bffb9ed25.jpg"></div>

             <div class="txt">加强空间的储纳功能以及生活功能分区鬼鬼在靠近客厅窗口的地方设计了一个储纳地台以及整体衣柜。</div>

         </li>

         <li>

             <div class="pic"><img src="http://img.itc.cn/focushome/3b/2f/3b2f3bd3d320f27b0007aa9379ced6cc.jpg"></div>

             <div class="txt">小两口的95平米简约婚房</div>

         </li>

     </ul>

     <ul class="iconsWrap" id="iconsWrap"></ul>

 </div>

 <script>

 var cycle = function(){

     //公共函数

     function T$(id){

         return document.getElementById(id);

     }

     function T$$(root,tag){

         return (root||document).getElementsByTagName(tag);

     }

     function $extend(object1,object2){

         for(var p in object2){

             object1[p] = object2[p];

         }

         return object1;

     }

     //默认参数

     var defaultOptions = {

         index:0,           //第一个显示元素的索引，默认为0，显示第一个元素

         time: 1000      //切换时间

     };

     //主类函数   cid为轮播总容器ID,eid为元素容器ID,iid为icons容器ID,options为重写的默认参数对象

     var cycleShow = function(cid,eid,iid,options){

         var self = this;

         if(!(self instanceof cycleShow)){

             return new cycleShow(eid,iid,options);

         }

         self.container = T$(cid);

         self.elemsContainer = T$(eid);

         self.iconsContainer = T$(iid);

         self.options = $extend(defaultOptions,options||{});

         self.elems = T$$(self.elemsContainer,'li');

     };

     cycleShow.prototype = {

         constructor: cycleShow,

         moveTo: function(currIndex){

             var self = this;

             currIndex = currIndex%self.elems.length;

             if(!self.currIndex) self.currIndex = 0;

             self.elems[self.currIndex].style.display = 'none';

             self.icons[self.currIndex].style.color = '#fff';

             self.elems[currIndex].style.display = 'block';

             self.icons[currIndex].style.color = '#f00';

             self.currIndex = currIndex;

         },

         run: function(currIndex){

             var self = this;

             if(!!self.timer) clearTimeout(self.timer);

             self.timer = setTimeout(function(){

                 self.run(currIndex);

             },self.options.time);

             self.moveTo(currIndex++);

         },

         stop:function(){

             var self = this;

             if(!!self.timer) clearTimeout(self.timer);

         },

         init:function(){

             var self = this,

                 frag = document.createDocumentFragment();

             for(var i=0,l=self.elems.length;i<l;i++){

                 var node = document.createElement('li');

                 node.innerHTML = i+1;

                 frag.appendChild(node);

             }

             self.iconsContainer.appendChild(frag);

             self.icons = T$$(self.iconsContainer,'li');

             for(var i=0,l=self.icons.length;i<l;i++){

                 (function(i){

                     self.icons[i].onclick = function(){

                         self.stop();

                         self.moveTo(i);

                     };

                 }(i));

             }

             self.container.onmouseover = function(){

                 self.stop();

             }

             self.container.onmouseout = function(){

                 self.run(self.currIndex);

             }

             self.run(self.options.index);

         }

     };

     return {

         onShowCycle:function(cid,eid,iid,options){

             var st = new cycleShow(cid,eid,iid,options);

             st.init();

         }

     }

 }();

 cycle.onShowCycle('cycleWrap','elemsWrap','iconsWrap');

 </script>

 </body>

 </html>

JS案例之2——cycle元素轮播的更多相关文章

  1. JS图片自动和可控的轮播切换特效

    点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...

  2. vue.js学习之better-scroll封装的轮播图初始化失败

    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...

  3. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  4. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  5. Js封装的动画函数实现轮播图

    ---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画         function ...

  6. js和jquery实现图片无缝轮播的不同写法

    多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...

  7. 原生JavaScript（js）手把手教你写轮播图插件（banner）

    ---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...

  8. 告别组件之教你使用原生js和css写移动端轮播图

    在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...

  9. 原生js用div实现简单的轮播图

    文章地址 https://www.cnblogs.com/sandraryan/ 原生js实现轮播图. 打开页面图片自动轮播,点击prev next按钮切换到上/下一张图片,点击1-5切换到对应图片. ...

随机推荐

  1. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  2. Laravel Composer and ServiceProvider

    Composer and: 创建自定义类库时,按命名空间把文件夹结构组织好 composer.json>autoload>classmap>psr-4 composer dump-a ...

  3. video.js

    1.github地址 2.常用API: class : video-js: video-js应用视频所需的风格.js功能,比如全屏和字幕. vjs-default-skin: vjs-default- ...

  4. Mysql事务探索及其在Django中的实践（二）

    继上一篇<Mysql事务探索及其在Django中的实践(一)>交代完问题的背景和Mysql事务基础后,这一篇主要想介绍一下事务在Django中的使用以及实际应用给我们带来的效率提升. 首先 ...

  5. 用javascript 写个函数返回一个页面里共使用了多少种HTML 标签

    今天我无意间看到一个面试题: 如何用javascript 写个函数返回一个页面里共使用了多少种HTML 标签? 不知你看到 是否蒙B了,如果是我 面试,肯定脑子嗡嗡的响.... 网上搜了搜也没有找到答 ...

  6. Oracle 数据库知识汇总篇

    Oracle 数据库知识汇总篇(更新中..) 1.安装部署篇 2.管理维护篇 3.数据迁移篇 4.故障处理篇 5.性能调优篇 6.SQL PL/SQL篇 7.考试认证篇 8.原理体系篇 9.架构设计篇 ...

  7. ASP.Net MVC4+Memcached+CodeFirst实现分布式缓存

    ASP.Net MVC4+Memcached+CodeFirst实现分布式缓存 part 1:给我点时间,允许我感慨一下2016年 正好有时间,总结一下最近使用的一些技术,也算是为2016年画上一个完 ...

  8. RabbitMQ + PHP （二）AMQP拓展安装

    上篇说到了 RabbitMQ 的安装. 这次要在讲案例之前,需要安装PHP的AMQP扩展.不然可能会报以下两个错误. 1.Fatal error: Class 'AMQPConnection' not ...

  9. Quartz2D总结

    天了噜,脑子完全懵了,最起码说出来个上下文啊,连这个都给忘了,特此总结一下,并以此缅怀这次面试 Quartz2D的API来自于Core Graphics(这就是为什么CGContextRef是以CG开 ...

  10. TCP/IP之TCP_NODELAY与TCP_CORK

    TCP/IP之Nagle算法与40ms延迟提到了Nagle 算法.这样虽然提高了网络吞吐量,但是实时性却降低了,在一些交互性很强的应用程序来说是不允许的,使用TCP_NODELAY选项可以禁止Nagl ...