JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块,点击弹出图片,并左右滚动幻灯片

1, 点击弹出图片

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现的很炫很酷的弹出层效果</title>
<style type="text/css">
.zxx_list_title{background:#eeeeee; border:1px solid #cccccc; padding:1em;}
.zxx_list_content{padding:1em;}
#tinybox{position:absolute; display:none; background:#ffffff url(../image/preload.gif) no-repeat 50% 50%; border:10px solid #e3e3e3; z-index:2000;}  --------------//注,不要框框将下划线选中的去掉即可!
#tinymask{position:absolute; display:none; top:0; left:0; height:100%; 100%; background:#000000; z-index:1500;}
#tinycontent{background:#ffffff; font-size:1.1em;}
</style>
<script type="text/javascript" src="../js/tinybox.js"></script>
</head>

<body>

<div class="zxx_list_title"><b>图片</b><a class="ml20" href="#zhangxinxu" id="click_test2">效果预览</a></div>

<script type="text/javascript">
var content2 = "<img width='640' height='466' src='http://image.zhangxinxu.com/image/study/s/mm10.jpg' />";
T$('click_test2').onclick = function(){
TINY.box.show(content2,0,0,0,1
)};
</script>
</body>
</html>

点击弹出图片  插件

插件下载:

http://files.cnblogs.com/xiexy/blowUpPicture.rar

2,仿QQ商城点击左右滚动幻灯片

下面是效果图:

仿QQ商城点击左右滚动幻灯片

插件下载:

http://files.cnblogs.com/xiexy/fangqqhuandengpian.rar

3, 相册模块,点击弹出图片,并左右滚动幻灯片

下面是效果图:

相册模块,点击弹出图片,并左右滚动幻灯片

插件下载:

http://files.cnblogs.com/xiexy/danchuhuangdengpian.rar

到此为止,主要为自己做备忘,同时方便有需要的人。呵呵!

原文地址:https://www.cnblogs.com/xiexy/p/4019009.html