JS案例之2——cycle元素轮播
元素轮播效果是页面中经常会使用的一种效果。这个例子实现了通过元素的隐藏和显示来表现轮播效果。效果比较简单。
效果图如下：
源代码如下：
<!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元素轮播的更多相关文章
- JS图片自动和可控的轮播切换特效
点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...
- vue.js学习之better-scroll封装的轮播图初始化失败
vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
- Js封装的动画函数实现轮播图
---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画 function ...
- js和jquery实现图片无缝轮播的不同写法
多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...
- 原生JavaScript（js）手把手教你写轮播图插件（banner）
---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...
- 告别组件之教你使用原生js和css写移动端轮播图
在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...
- 原生js用div实现简单的轮播图
文章地址 https://www.cnblogs.com/sandraryan/ 原生js实现轮播图. 打开页面图片自动轮播,点击prev next按钮切换到上/下一张图片,点击1-5切换到对应图片. ...
随机推荐
- servlet文件下载
创建web工程servlet,新建DownloadServlet.java package com.xmyself.servlet; import java.io.File; import java. ...
- AutoMapper
什么是AutoMapper? AutoMapper是一个对象和对象间的映射器.对象与对象的映射是通过转变一种类型的输入对象为一种不同类型的输出对象工作的.让AutoMapper有意思的地方在于它提供了 ...
- ubuntu系统下如何修改host
Ubuntu系统的Hosts只需修改/etc/hosts文件,在目录中还有一个hosts.conf文件,刚开始还以为只需要修改这个就可以了,结果发现是需要修改hosts.修改完之后要重启网络.具体过程 ...
- 玩转spring boot——结合AngularJs和JDBC
参考官方例子:http://spring.io/guides/gs/relational-data-access/ 一.项目准备 在建立mysql数据库后新建表“t_order” ; -- ----- ...
- Solr 排除查询
前言 solr排除查询也就是我们在数据库和程序中经常处理的不等于,solr的语法是在定语前加[-].. StringBuilder sbHtml=new StringBuilder(); shBhtm ...
- web 前端（轮番插件）
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- xss和sql注入原理学习
8.4 Web跨站脚本攻击 8.4.1 跨站脚本攻击的原理(1) 跨站脚本在英文中称为Cross-Site Scripting,缩写为CSS.但是,由于层叠样式表 (Cascading Style ...
- swift开发新项目总结
新项目用swift3.0开发,现在基本一个月,来总结一下遇到的问题及解决方案 1,在确定新项目用swift后,第一个考虑的问题是用纯swift呢?还是用swift跟OC混编 考虑到新项目 ...
- TCP通信
//网络套接字编程实例,服务器端,TCP通信. #include <WinSock2.h> #pragma comment(lib,"ws2_32.lib") #inc ...
- 初探java中this的用法
一般this在各类语言中都表示“调用当前函数的对象”,java中也存在这种用法: public class Leaf { int i = 0; Leaf increment(){ i++; retur ...