前几天开发中,客户要求在页面中展示一个类似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. ecostore搜索注意事项

    ecostore搜索时会把特殊字符转换为相应的文字 如 洋河480ml_52°天之蓝 进行html url编码时会把_(下划线)转换成%25xia%25(%25对应的ascii是%) 搜索时会把%.x ...

  2. egret dragonbones部件替换产生位移的解决方案

    原理:使用Armature.getSlot("urpart").display.texture去替换骨骼纹理即可需要:1 骨骼动画导出的时候不要裁剪部件的透明区域,在导出设置里面设 ...

  3. JQuery中的mouseover和mouseenter的区别

    mouseover和mouseout是一对:mouseenter和mouseleave是一对. 相同点:都是鼠标经过就触发事件 不同点: 给外盒子一个经过触发事件,但是mouseover会在鼠标经过外 ...

  4. spring3mvc与struts2比较

    目前企业中使用SpringMvc的比例已经远远超过Struts2,那么两者到底有什么区别,是很多初学者比较关注的问题,下面我们就来对SpringMvc和Struts2进行各方面的比较: 1. 核 心控 ...

  5. ICE第四篇-----python版本

    ice文件: module Modipplace {     interface  Ipplace{          string iptoplace(string s);      };   }; ...

  6. php学习-数组(一)

    数组函数可以对大量性质相同的数据进行存储,排序,插入及删除等操作. 学习任务: 声明数组,输出数组,遍历数组,查询数组中指定元素,获取数组中的最后一个元素. 删除数组中重复的元素.统计数组中元素的个数 ...

  7. 【亲测】Python:解决方案:Python Version 2.7 required, which was not found in the registry

    好久不更新随笔了,今天因为数据可视化作业,想抓取一些人人网好友关系数据,于是开始尝试python,用到numpy模块,安装的时候提示: 'Python Version 2.7 required, wh ...

  8. UIImageView控件

    UIImageView是用于显示图像的,在iOS开发中,我们无需专门去写什么代码,不需要检查设备的类型,只需要把1x.2x.3x的图像添加到项目中,图像视图会自动的在正确的时间加载正确的图像. (1) ...

  9. 企业证书APP发布流程 分类: ios相关 app相关 2015-06-10 11:01 212人阅读 评论(0) 收藏

    企业发布app的 过程比app store 发布的简单多了,没那么多的要求,哈 但是整个工程的要求还是一样,比如各种像素的icon啊 命名规范啊等等. 下面是具体的流程 1.修改你的 bundle i ...

  10. nodejs抓取数据一(列表抓取)

    纯属初学...有很多需要改进的地方,请多多指点... 目标是抓取58同城 这个大分类下的列表数据: http://cd.58.com/caishui/?PGTID=14397169455980.924 ...