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

效果图如下：

源代码如下：

 <!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. C++ 可配置的类工厂

    项目中常用到工厂模式,工厂模式可以把创建对象的具体细节封装到Create函数中,减少重复代码,增强可读和可维护性.传统的工厂实现如下: class Widget { public: virtual i ...

  2. 2015 西雅图微软总部MVP峰会记录

    2015 西雅图微软总部MVP峰会记录 今年决定参加微软MVP全球峰会,在出发之前本人就已经写这篇博客,希望将本次会议原汁原味奉献给大家 因为这次是本人第一次写会议记录,写得不好的地方希望各位园友见谅 ...

  3. 猖獗的假新闻：2017年1月1日起iOS的APP必须使用HTTPS

    一.假新闻如此猖獗 刚才一位老同事 打电话问:我们公司还是用的HTTP,马上就到2017年了,提交AppStore会被拒绝,怎么办? 公司里已经有很多人问过这个问题,回答一下: HTTP还是可以正常提 ...

  4. java使用websocket，并且获取HttpSession，源码分析

    转载请在页首注明作者与出处 http://www.cnblogs.com/zhuxiaojie/p/6238826.html 一:本文使用范围 此文不仅仅局限于spring boot,普通的sprin ...

  5. redis成长之路——（二）

    redis操作封装 针对这些常用结构,StackExchange.Redis已经做了一些封装,不过在实际应用场景中还必须添加一些功能,例如重试等 所以对一些常功能做了一些自行封装SERedisOper ...

  6. 【开源】专业K线绘制[K线主副图、趋势图、成交量、滚动、放大缩小、MACD、KDJ等）

    这是一个iOS项目雅黑深邃的K线的绘制. 实现功能包括K线主副图.趋势图.成交量.滚动.放大缩小.MACD.KDJ,长按显示辅助线等功能 预览图 最后的最后,这是项目的开源地址:https://git ...

  7. centos安装nodejs

    1.下载安装nodejs wget http://nodejs.org/dist/v0.10.25/node-v0.10.25.tar.gz compat--c++ tar -xf node-v0.1 ...

  8. vim+vundle配置

    Linux环境下写代码虽然没有IDE,但通过给vim配置几个插件也足够好用.一般常用的插件主要包括几类,查找文件,查找符号的定义或者声明(函数,变量等)以及自动补全功能.一般流程都是下载需要的工具,然 ...

  9. Centos 6.6 下搭建php5.2.17+Zend Optimizer3.3.9+Jexus环境

    (为何安装php5.2.17这个版本 因为phpweb这个程序用到了Zend Optimizer3.3.9 这个东东已经停止更新了 最高支持5.2版本的php 所以就有了一晚上填坑的自己和总结了这篇文 ...

  10. embedding mono实战笔录（一）

    最近在给自己的服务器节点添加脚本功能,考虑到 执行性能.开发效率.调试效率.可维护性.严谨性 五大要素,最终选用C#作为脚本语言,并使用mono作为中间层,使其具备跨平台特性,以备具有在Windows ...