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

效果图如下：

源代码如下：

 <!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. npm 私有模块的管理使用

    你可以使用 NPM 命令行工具来管理你在 NPM 仓库的私有模块代码,这使得在项目中使用公共模块变的更加方便. 开始前的工作 你需要一个 2.7.0 以上版本的 npm ,并且需要有一个可以登陆 np ...

  2. JS核心系列：浅谈 call apply 与 bind

    在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这 ...

  3. 微软发布正式版SQL Server 2016

    微软于今天在SQL 官方博客上宣布 SQL Server 数据库软件的正式发布版本(GA),历时一年多,微软为该软件发布了多个公共预览版和候选版本,而今天最终版本终于上线了.在博客中,微软数据集团的企 ...

  4. .NET基础拾遗（5）多线程开发基础

    Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理基础 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开 ...

  5. 一百元的智能家居——Asp.Net Mvc Api+讯飞语音+Android+Arduino

    大半夜的,先说些废话提提神 如今智能家居已经不再停留在概念阶段,高大上的科技公司都已经推出了自己的部分或全套的智能家居解决方案,不过就目前的现状而言,大多还停留在展厅阶段,还没有广泛的推广起来,有人说 ...

  6. .Net多线程编程—任务Task

    1 System.Threading.Tasks.Task简介 一个Task表示一个异步操作,Task的创建和执行是独立的. 只读属性: 返回值 名称 说明 object AsyncState 表示在 ...

  7. [C#] 简单的 Helper 封装 -- SecurityHelper 安全助手：封装加密算法（MD5、SHA、HMAC、DES、RSA）

    using System; using System.IO; using System.Security.Cryptography; using System.Text; namespace Wen. ...

  8. System.Guid ToString五中格式

    参考:https://msdn.microsoft.com/en-us/library/97af8hh4.aspx 测试代码: using System; using System.Collectio ...

  9. 手把手教你写一个RN小程序!

    时间过得真快,眨眼已经快3年了! 1.我的第一个App 还记得我14年初写的第一个iOS小程序,当时是给别人写的一个单机的相册,也是我开发的第一个完整的app,虽然功能挺少,但是耐不住心中的激动啊,现 ...

  10. Register-SPWorkflowService 404

    最近需要做一个SharePoint 2013工作流演示环境. 于是在自己的本子上安装了一个虚拟机. 虚拟机操作系统是Windows Server 2012 R2,计划把AD.SQL Server 20 ...