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

效果图如下：

源代码如下：

 <!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. 笔记：Binder通信机制

    TODO: 待修正 Binder简介 Binder是android系统中实现的一种高效的IPC机制,平常接触到的各种XxxManager,以及绑定Service时都在使用它进行跨进程操作. 它的实现基 ...

  2. ABP框架 - Swagger UI 集成

    文档目录 本节内容: 简介 Asp.net Core 安装 安装Nuget包 配置 测试 Asp.net 5.x 安装 安装Nuget包 配置 测试 简介 来自它的网页:“...使用一个Swagger ...

  3. tomcat开发远程调试端口以及利用eclipse进行远程调试

    一.tomcat开发远程调试端口 方法1 WIN系统 在catalina.bat里:  SET CATALINA_OPTS=-server -Xdebug -Xnoagent -Djava.compi ...

  4. MVC如何使用开源分页插件shenniu.pager.js

    最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只 ...

  5. Visual Studio 2012远程调试中遇到的问题

    有的时候开发环境没问题的代码在生产环境中会某些开发环境无法重现的问题,或者需要对生产环境代码进行远程调试该怎么办? Vs已经提供给开发者远程调试的工具 下面简单讲讲该怎么用,前期准备:1.本地登录账户 ...

  6. [译]处理文本数据(scikit-learn 教程3)

    原文网址:http://scikit-learn.org/stable/tutorial/text_analytics/working_with_text_data.html 翻译:Tacey Won ...

  7. Windows API 设置窗口下控件Enable属性

    参考页面: http://www.yuanjiaocheng.net/webapi/create-crud-api-1-put.html http://www.yuanjiaocheng.net/we ...

  8. python之最强王者（9）——函数

    1.Python 函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但 ...

  9. 满堂红CIO邓劲翔：房屋中介突围

    人脸识别.客户关系管理进度监控.业务流程实时监控.网站访问人数及流量实时监控等实际企业应用场景淋漓尽致.羽羽如生的以大屏幕上图表形式展现在人们面前,如果你不去继续询问,你不会知道这是一家才刚刚在房地产 ...

  10. ASP.NET Aries JSAPI 文档说明：AR.DataGrid

    AR.DataGrid 文档 用法: <body> <table id="dg"></table> </body> </htm ...