js相册小程序.....

傷城~ 2022-08-24 00:00 102阅读 0赞

<style type="text/css">  
  
</style>

<div id="top"></div>

<div id="center">  
<div id="contain">   
<div id="a">  
<img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165350203.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165350203.p.jpg]" /><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165515450.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165515450.p.jpg]" /><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165633071.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165633071.p.jpg]" /><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165809051.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165809051.p.jpg]" /><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165953937.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165953937.p.jpg]" /><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/170058856.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_170058856.p.jpg]" /><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/170157807.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_170157807.p.jpg]" /><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165350203.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165350203.p.jpg]" /><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165515450.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165515450.p.jpg]" /><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165633071.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165633071.p.jpg]" /><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165809051.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165809051.p.jpg]" /><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165953937.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165953937.p.jpg]" /><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/170058856.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_170058856.p.jpg]" /><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/170157807.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_170157807.p.jpg]" />  
</div>  
</div>  
</div>

<div id="bottom">  
<div id="bl"><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165259893.t.gif][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165259893.t.gif]" οnclick="Back()" style="cursor:hand;" /></div>  
<div id="bb">  
<div id="bcontain">  
<div id="b">  
<div class="tu" style="filter:Alpha(opacity=100)"><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165350203.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165350203.p.jpg]" height="50" width="75" οnclick="move()" /></div>  
<div class="tu"><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165515450.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165515450.p.jpg]" height="50" width="75" οnclick="move()"/></div>  
<div class="tu"><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165633071.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165633071.p.jpg]" height="50" width="75" οnclick="move()"/></div>  
<div class="tu"><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165809051.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165809051.p.jpg]" height="50" width="75" οnclick="move()"/></div>  
<div class="tu"><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165953937.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165953937.p.jpg]" height="50" width="75" οnclick="move()"/></div>  
<div class="tu"><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/170058856.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_170058856.p.jpg]" height="50" width="75" οnclick="move()"/></div>  
<div class="tu"><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/170157807.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_170157807.p.jpg]" height="50" width="75" οnclick="move()"/></div>  
<div class="tu"><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165350203.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165350203.p.jpg]" height="50" width="75" οnclick="move()"/></div>  
<div class="tu"><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165515450.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165515450.p.jpg]" height="50" width="75" οnclick="move()"/></div>  
<div class="tu"><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165633071.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165633071.p.jpg]" height="50" width="75" οnclick="move()"/></div>  
<div class="tu"><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165809051.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165809051.p.jpg]" height="50" width="75" οnclick="move()"/></div>  
<div class="tu"><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165953937.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165953937.p.jpg]" height="50" width="75" οnclick="move()"/></div>  
<div class="tu"><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/170058856.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_170058856.p.jpg]" height="50" width="75" οnclick="move()"/></div>  
<div class="tu"><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/170157807.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_170157807.p.jpg]" height="50" width="75" οnclick="move()"/></div>  
<div class="tu"><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165350203.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165350203.p.jpg]" height="50" width="75" οnclick="move()"/></div>  
<div class="tu"><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165515450.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165515450.p.jpg]" height="50" width="75" οnclick="move()"/></div>  
<div class="tu"><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165633071.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165633071.p.jpg]" height="50" width="75" οnclick="move()"/></div>  
<div class="tu"><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165809051.p.jpg][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165809051.p.jpg]" height="50" width="75" οnclick="move()"/></div>  
</div>  
</div>  
</div>  
<div id="br"><img src="[http://album.hi.csdn.net/app\_uploads/wtcsy/20081031/165005229.t.gif][http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165005229.t.gif]" οnclick="Forward()" style="cursor:hand;" ></div>  
</div>

<script>  
var contain  = document.getElementById("contain")  
var bcontain = document.getElementById("bcontain")  
var cun =0  
function Forward()\{  
if(contain.scrollLeft>7\*550)  
contain.scrollLeft=contain.scrollLeft-7\*550  
if(bcontain.scrollLeft>7\*100)  
bcontain.scrollLeft=bcontain.scrollLeft-700  
for(i=0;i<50;i++)  
\{bcontain.scrollLeft=bcontain.scrollLeft+2  
contain.scrollLeft=contain.scrollLeft+11\}  
document.getElementById("b").getElementsByTagName("div")\[cun\].style.filter="Alpha(opacity=30)"  
cun=bcontain.scrollLeft/100  
document.getElementById("b").getElementsByTagName("div")\[bcontain.scrollLeft/100\].style.filter="Alpha(opacity=100)"  
\}

function Back()\{  
if(contain.scrollLeft==0)  
contain.scrollLeft=7\*550  
if(bcontain.scrollLeft==0)  
bcontain.scrollLeft=7\*100  
for(i=0;i<50;i++)  
\{  
bcontain.scrollLeft=bcontain.scrollLeft-2  
contain.scrollLeft=contain.scrollLeft-11\}  
document.getElementById("b").getElementsByTagName("div")\[cun\].style.filter="Alpha(opacity=30)"  
cun=bcontain.scrollLeft/100  
document.getElementById("b").getElementsByTagName("div")\[bcontain.scrollLeft/100\].style.filter="Alpha(opacity=100)"  
\}

function move(e)\{  
document.getElementById("b").getElementsByTagName("div")\[cun\].style.filter="Alpha(opacity=30)"  
e =e||event  
var num=0  
var img = document.getElementById("b").getElementsByTagName("img")  
for(var i=0;i<img.length;i++)  
   \{if(img\[i\]==e.srcElement)  
       \{num=i;break\}\}

if(num<=13)  
\{  
  if(bcontain.scrollLeft==num\*100)  
  \{return\}  
  else  
  \{  
  var pan =num-bcontain.scrollLeft/100  
  for(i=0;i<50\*pan;i++)  
\{if(contain.scrollLeft==7\*550)  
contain.scrollLeft=0  
bcontain.scrollLeft=bcontain.scrollLeft+2  
contain.scrollLeft=contain.scrollLeft+11\}\}  
\}

if(num>13)  
\{  
num=num-7  
bcontain.scrollLeft=bcontain.scrollLeft-7\*100  
if(bcontain.scrollLeft==num\*100)  
  \{return\}  
  else  
  \{  
  var pan =num-bcontain.scrollLeft/100  
  for(i=0;i<50\*pan;i++)  
\{if(contain.scrollLeft==7\*550)  
contain.scrollLeft=0  
bcontain.scrollLeft=bcontain.scrollLeft+2  
contain.scrollLeft=contain.scrollLeft+11\}\}  
\}

cun=bcontain.scrollLeft/100  
document.getElementById("b").getElementsByTagName("div")\[bcontain.scrollLeft/100\].style.filter="Alpha(opacity=100)"  
\}  
</script>

[http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165350203.p.jpg]: http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165350203.p.jpg
[http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165515450.p.jpg]: http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165515450.p.jpg
[http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165633071.p.jpg]: http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165633071.p.jpg
[http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165809051.p.jpg]: http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165809051.p.jpg
[http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165953937.p.jpg]: http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165953937.p.jpg
[http_album.hi.csdn.net_app_uploads_wtcsy_20081031_170058856.p.jpg]: http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170058856.p.jpg
[http_album.hi.csdn.net_app_uploads_wtcsy_20081031_170157807.p.jpg]: http://album.hi.csdn.net/app_uploads/wtcsy/20081031/170157807.p.jpg
[http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165259893.t.gif]: http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165259893.t.gif
[http_album.hi.csdn.net_app_uploads_wtcsy_20081031_165005229.t.gif]: http://album.hi.csdn.net/app_uploads/wtcsy/20081031/165005229.t.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，102人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现旋转木马相册

鼠标拖拽效果图如下： ![在这里插入图片描述][20200402084625113.gif] 旋转效果图如下： ![在这里插入图片描述][20200402084046

太过爱你忘了你带给我的痛/ 2023年07月20日 13:45/ 0 赞/ 93 阅读

相关 three.js小程序：概述

three.js three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。`https://github.com/mrdoob/thr

我不是女神ヾ/ 2023年06月12日 16:21/ 0 赞/ 562 阅读

相关 uni-app小程序保存base64图片到相册

如果直接用wx.downloadFile方法保存base64图片会有报错提示，我们使用uni.FileSystemManager.writeFile 将 ArrayBuffer

傷城~/ 2022年11月18日 13:45/ 0 赞/ 334 阅读

相关小程序保存图片到手机相册

小程序保存图片到本地相册只支持本地路径，不支持网络路径，所以需要先将网络图片先转成本地路径，然后保存 savePhoto(e){ wx.getImag

r囧r小猫/ 2022年11月12日 14:52/ 0 赞/ 260 阅读

相关微信小程序相册图片转base64

微信小程序相册图片转base64 很多场景我们需要把微信的相册或者拍照的图片变成base64格式，使用了微信的 wx.getFileSystemManager().rea

迈不过友情╰/ 2022年10月08日 15:27/ 0 赞/ 456 阅读

相关 js相册小程序.....

<style type="text/css"> <!-- \top\{background-color:\EBEBEB;height:30px;width:560px;

傷城~/ 2022年08月24日 00:00/ 0 赞/ 103 阅读

相关微信小程序保存图片到相册

先来看小程序中的保存图片到相册的api wx.saveImageToPhotosAlbum({ filePath : "./test.png", //

- 日理万妓/ 2022年05月23日 00:14/ 0 赞/ 852 阅读

相关微信小程序之保存图片到手机相册

想要将图片保存到手机相册我将它分为以下几步： 1. 需要知道你要保存的图片地址如：image = [https://img-blog.csdnimg.cn/

￡神魔★判官ぃ/ 2022年03月15日 01:50/ 0 赞/ 719 阅读

相关微信小程序保存图片到相册

/ 保存到相册 / downShareImgFun : function () { let that = this;

一时失言乱红尘/ 2022年02月05日 07:39/ 0 赞/ 432 阅读

相关小程序-保存图片到相册拒绝授权后，重新调用授权保存图片到相册

1.开发工具上的代码（ok） wx.saveImageToPhotosAlbum({ filePath: canvasImg, s

叁歲伎倆/ 2021年10月19日 11:54/ 0 赞/ 497 阅读