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

效果图如下：

源代码如下：

 <!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. Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  2. 使用struct处理二进制

    有的时候需要用python处理二进制数据,比如,存取文件.socket操作时.这时候,可以使用python的struct模块来完成. struct模块中最重要的三个函数是pack(), unpack( ...

  3. mysql 7下载安装及问题解决

    mysql 7安装及问题解决 一.mysql下载 下载地址:https://www.mysql.com/downloads/ Community (GPL) Downloads MySQL Commu ...

  4. spring注解源码分析--how does autowired works？

    1. 背景 注解可以减少代码的开发量,spring提供了丰富的注解功能.我们可能会被问到,spring的注解到底是什么触发的呢?今天以spring最常使用的一个注解autowired来跟踪代码,进行d ...

  5. 前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...

  6. 记录一则Linux SSH的互信配置过程

    需求:四台Linux主机,IP地址为192.168.10.10/11/12/13,配置登录用户的互信 1.各节点ssh-keygen生成RSA密钥和公钥 ssh-keygen -q -t rsa -N ...

  7. wordpress优化之结合prism.js为编辑器自定义按钮转化代码

    原文链接 http://ymblog.net/2016/07/24/wordpress-prism/ 继昨天花了一天一夜的时间匆匆写了主题Jiameil3.0之后,心中一直在想着优化加速,体验更好,插 ...

  8. Linux主机上使用交叉编译移植u-boot到树莓派

    0环境 Linux主机OS:Ubuntu14.04 64位,运行在wmware workstation 10虚拟机 树莓派版本:raspberry pi 2 B型. 树莓派OS: Debian Jes ...

  9. Tomcat常见问题及常用命令

    很长时间不用tomcat好多命令都忘记了,所以准备自己记录下来,以便参考.刚好也希望可以开始养成记博客的好习惯. 1.查看java的版本号 进入java的安装目录后,使用命令:java -versio ...

  10. Eclipse出现"Running Android Lint has encountered a problem"解决方案

    安装eclipse for android 时候的错误记录,转载自:http://blog.csdn.net/chenyufeng1991/article/details/47442555 (1)打开 ...