前几天开发中,客户要求在页面中展示一个类似ppt文档的一个东西,用轮播展示,但是有缩略图,和展示的大图,本想找些插件来做,后来想想,自己试下吧。。

有些简陋,但是能用,毕竟一行一行写的,留下来当笔记用吧。

下面是代码,有些粗糙[/害羞],但功能都有[/哈哈]

html部分

<div class="con">
  <p id="big_img">
    <img src="" />
  </p>
  <div class="wai">
    <div class="wai_left"></div>
    <div class="nei">
      <ul class="ul_img">
        <li><img src="img/4.jpg"/></li>
        <li><img src="img/1.jpg"/></li>
        <li><img src="img/2.jpg"/></li>
        <li><img src="img/3.jpg"/></li>
        <li><img src="img/4.jpg"/></li>
        <li><img src="img/1.jpg"/></li>
        <li><img src="img/2.jpg"/></li>
        <li><img src="img/3.jpg"/></li>
        <li><img src="img/4.jpg"/></li>
        <li><img src="img/1.jpg"/></li>
      </ul>
    </div>
    <div class="wai_right"></div>
  </div>
</div>

css部分

.con{
  width:80%;
  margin:0 auto;
  border:1px solid #8F8F8F;
}
#big_img img{
  width:100%;
  height:500px;
}
.wai{
  width:100%;
  text-align:center;
  height:100px;
  position: relative;
}
.wai>div{
  float:left;
}
.wai_left,.wai_right{
  width:10%;
  height:100px;
  position: relative;
}
.wai_left:before{
  content:"";
  position: absolute;
  left:20px;
  top:25px;
  width: 35px;
  height: 35px;
  border-left: 5px solid #B4B2B2;
  border-top: 5px solid #B4B2B2;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.wai_right:before{
  content:"";
  position: absolute;
  right:20px;
  top:25px;
  width: 35px;
  height: 35px;
  border-right: 5px solid #B4B2B2;
  border-bottom: 5px solid #B4B2B2;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.nei{
  float:left;
  width:80%;
  height:100px;
  overflow:hidden;
  position: relative;
}
.ul_img{
  overflow: auto;
  position: absolute;
  left:0;
  right:0;
}
.ul_img li{
  height:100px;
  float:left;
  text-align:center;
  opacity: 0.5;
}
.ul_img li img{
  width:95%;
  height:91px;
  border:2px solid transparent;
}
#back{
  opacity: 1;
}
#back img{
  border:2px solid red;
}  

js部分

var Page = {
num: 0,
outWidth: 0,//获取外层框的宽度
singleWidth: 0,
len: 0, //获取移动框的个数
init: function () {
var self = this;
//初始化
self.outWidth = $(".nei").width();
self.singleWidth = self.outWidth/6;
$(".ul_img li").width(self.singleWidth + "px");//设置单个移动框的宽度
self.len = $(".ul_img li").length;
$(".ul_img").width(self.outWidth/6*self.len); //内层框宽度设置(单个移动框*个数)

//默认状态
$("#big_img").find("img").attr("src",$(".ul_img li").eq(0).find("img").attr("src"));
$(".ul_img li").eq(0).attr("id","back");
this.bind();
},
bind: function () {
this.imageZoom();
this.moveLeft();
this.moveRight();
},
imageZoom: function () {
// 点击小图赋值给大图
$(".ul_img li").on("click",function(){
$(this).attr("id","back").siblings().attr("id","");
$("#big_img img").attr("src",$(this).find("img").attr("src"));
});
},
moveLeft: function () {
var self = this;
$(".wai_left").on("click",function(){
//限制移动到最左
if(self.num > 0){
self.num--;
$(".ul_img").animate({left:-self.singleWidth*self.num});
}
//选中框的下标--
var index = $("#back").index();
if(index > 0){
index--;
$(".ul_img li").eq(index).attr("id","back").siblings().attr("id","");
$("#big_img img").attr("src",$(".ul_img li").eq($("#back").index()).find("img").attr("src"));
}else{
//选中框移动到最左时 再点击 回到第最后一个位置
$(".ul_img li").eq(self.len-1).attr("id","back").siblings().attr("id","");
$(".ul_img").animate({left:-(self.len-6)*self.singleWidth + "px"});
self.num = self.len-6;
}
});
},
moveRight: function () {
var self = this;
$(".wai_right").on("click",function(){
//页面能够显示完整的情况下 移动
if(self.num < self.len-6){
self.num++;
$(".ul_img").animate({left:-self.singleWidth*self.num});
}
//选中框的下标++
var index = $("#back").index();
if(index < self.len){
index++;
$(".ul_img li").eq(index).attr("id","back").siblings().attr("id","");
$("#big_img img").attr("src",$(".ul_img li").eq($("#back").index()).find("img").attr("src"));
}
//选中框移动到最后时 再点击 回到第一个位置
if(index == self.len){
$(".ul_img li").eq(0).attr("id","back").siblings().attr("id","");
$(".ul_img").animate({left:0});
self.num=0;
}
});
}
};

Page.init();

有些地方有用到JQ ,不能忘记引用

js制作ppt阅读文档类型的更多相关文章

  1. DOCTYPE html PUBLIC 指定了 HTML 文档遵循的文档类型定义

    DOCTYPE html PUBLIC 指定了 HTML 文档遵循的文档类型定义 今天看到一篇CSS应用的一个友好搜索,我按网页上的代码复制.粘贴后预览时总达不到效果,而直接拷贝他的实例却能达到效果, ...

  2. doctype(文档类型)的作用是什么?转载

    <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前.此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范. Document Type ...

  3. Babylon.js官方性能优化文档中文翻译

    在这里列出Babylon.js官方性能优化文档的中英文对照,并在CardSimulate项目里对其中的一些优化方法进行实践. How To 如何 Optimize your scene 优化你的场景 ...

  4. Atitit.论垃圾文件的识别与清理 文档类型垃圾文件 与api概要设计pa6.doc

    Atitit.论垃圾文件的识别与清理 文档类型垃圾文件 与api概要设计pa6.doc 1. 俩个问题::识别垃圾文件与清理策略1 1.1. 文件类型:pic,doc,v,m cc,isho pose ...

  5. js/css在html文档中的引用外部文件方式对比

    包含css样式表和js脚本的最好方式是使用外部文件,因为css/js和html标记文档可以清晰地分离. css的外部引用写在<head></head>中: <head&g ...

  6. jQuery+turn.js翻书、文档和杂志3种特效演示

    很好用的一款插件jQuery+turn.js翻书.文档和杂志3种特效演示 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  7. Doctype文档类型、作用及触发方式

    Doctype文档类型 1)  该标签可声明三种 DTD 类型,分别表示严格版本.过渡版本以及基于框架的 HTML 文档. 2)  HTML 4.01 规定了三种文档类型:Strict.Transit ...

  8. Umbraco文档类型定义多个template

    利用这个可以同时写PC端和手机端的网站, 在Template中,建立手机端的模板: 在文档类型中,同时选择两个模板,在浏览的时候在URL后加上Template的名称 + .aspx 就可以浏览到你写的 ...

  9. 彻底解决android读取中文txt的乱码(自动判断文档类型并转码

    原文:http://blog.csdn.net/handsomedylan/article/details/6138400 public String convertCodeAndGetText(St ...

随机推荐

  1. Codeforces Round #364 (Div. 2) E. Connecting Universities (DFS)

    E. Connecting Universities time limit per test 3 seconds memory limit per test 256 megabytes input s ...

  2. mysql基础---日志文件

    一 基本日志文件 MYSQL有不同类型的日志文件(各自存储了不同类型的日志),从它们当中可以查询到MYSQL里都做了些什么,对于MYSQL的管理工作,这些日志文件是不可缺少的. 1.错误日志(The ...

  3. unittest单元测试框架总结

    unittest单元测试框架不仅可以适用于单元测试,还可以适用WEB自动化测试用例的开发与执行,该测试框架可组织执行测试用例,并且提供了丰富的断言方法,判断测试用例是否通过,最终生成测试结果.今天笔者 ...

  4. Ketama Consisent Hash

    问题描述 有一些目标节点 v1, v2...vn 需要一个算法,能够将任意key映射到目标节点中的一个vx 评价方式 1. 对于一个比较大的key集合,分布在各个目标节点的key的数量要尽可能均匀 2 ...

  5. mysql 插入数据后返回当前的自增ID方法

    存储过程的写法: mysql>create procedure test( ->in username varchar(50), ->in password varchar(50), ...

  6. 解决SSh连接过慢

    ssh 连接的时候特别慢 解决方法: 修改配置文件 /etc/ssh/sshd_config GSSAPIAuthentication yes --->no 81行左右 #UseDNS yes ...

  7. ios系统 ipa文件 打包流程详解 及 常见问题处理

    注:先反省一下,原本打算一天一篇,每天进步一点点,但是最近变懒了,居然三天没有更新,在此告诫各位道友及我自己,程序员需戒欲,搞技术需持之以恒,不能三天打鱼,两天晒外. 现在步入主题,前段时间使用xco ...

  8. Undefined symbols for architecture i386: "_crc32", referenced from:——crc链接错误

    有时候用别人的框架,你会碰到下面的错误,很是吓人,什么玩意,我怎么看不懂!!! Undefined symbols for architecture i386:  "_RELEASE&quo ...

  9. sgu176 Flow Construction【有源汇有上下界最小流】

    同样是模板题. 首先将有源汇转换为无源汇,假设原来的源汇为st,我们加入的源汇为ST,那么我们应该从t到s连一条流量为+∞的边,使原来的st满足收支平衡,退化为普通节点. 分离必要边和其他边,从S到T ...

  10. 从字符串拼接看JS优化原则

    来自知乎的问题:JavaScript 怎样高效拼接字符串? 请把以下用于连接字符串的JavaScript代码修改为更高效的方式: var htmlString ='< div class=”co ...