js制作ppt阅读文档类型

前几天开发中，客户要求在页面中展示一个类似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 ，不能忘记引用