百叶窗

Love The Way You Lie 2022-05-23 09:57 239阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>jQuery多种百叶窗风格切换焦点图插件DEMO演示</title>
    
    <link rel="stylesheet" href="css/shutter.css">
    
    </head>
    <body>
    
    <div class="shutter">
    <div class="shutter-img">
      <a href="#" data-shutter-title="Iron Man"><img src="images/shutter_1.jpg" alt="#"></a>
      <a href="#" data-shutter-title="Super Man"><img src="images/shutter_2.jpg" alt="#"></a>
      <a href="#" data-shutter-title="The Hulk"><img src="images/shutter_3.jpg" alt="#"></a>
       <a href="#" data-shutter-title="The your"><img src="images/shutter_4.jpg" alt="#"></a>
    </div>
    <ul class="shutter-btn">
      <li class="prev"></li>
      <li class="next"></li>
    </ul>
    <div class="shutter-desc">
      <p>Iron Man</p>
    </div>
    </div>
    
    <script src="js/jquery.min.js"></script>
    <script src="js/velocity.js"></script>
    <script src="js/shutter.js"></script>
    <script> $(function () { $('.shutter').shutter({ shutterW: 1000, // 容器宽度 shutterH: 358, // 容器高度 isAutoPlay: true, // 是否自动播放 playInterval: 3000, // 自动播放时间 curDisplay: 3, // 当前显示页 fullPage: false // 是否全屏展示 }); }); </script>
    
    <div style="text-align:center;clear:both">
    
    </div>
    </body>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 ShaderJoy —— “百叶窗” 的实现【GLSL】

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9wYW5kYTEyMzRsZWUu

古城微笑少年丶/ 2023年07月01日 12:53/ 0 赞/ 33 阅读

相关 LCD显示屏加入百叶窗特效显示BMP图片

更多资料请点击：[我的目录][Link 1] 本篇仅用于记录自己所学知识及应用，代码仍可优化，仅供参考，如果发现有错误的地方，尽管留言于我，谢谢。本篇记录LCD显示屏加

- 日理万妓/ 2023年03月04日 13:27/ 0 赞/ 23 阅读

相关百叶窗效果 html+css

![在这里插入图片描述][20201222143415410.gif] <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年12月29日 11:28/ 0 赞/ 273 阅读

相关 165.百叶窗特效

效果 (源码网盘地址在最后) ![73cc696bbf6f8ef10f2abad44c158516.gif][] 源码 index.html <!DOC

「爱情、让人受尽委屈。」/ 2022年10月08日 05:39/ 0 赞/ 228 阅读

相关卡扣服务器添加显示不出来,百叶窗卡扣安装方法图解老师傅教你怎么安装百叶窗...

现在家庭装修时很多选择百叶窗，但是如果你是第一次接触百叶窗，可能在安装百叶窗时会很麻烦，很多人不知道百叶窗卡扣怎么安装，犀牛装修网给大家介绍一下百叶窗卡扣安装方法图解，看看老师

「爱情、让人受尽委屈。」/ 2022年09月04日 06:56/ 0 赞/ 233 阅读

相关简单的百叶窗功能

一开始让图片如下显示： ![70][] 点击一个图片时，被点击的图片显示80%，其他的都显示20%，如下： ![70 1][] ![70 2][] 代码:

喜欢ヅ旅行/ 2022年05月28日 06:55/ 0 赞/ 240 阅读

相关百叶窗

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl

Love The Way You Lie/ 2022年05月23日 09:57/ 0 赞/ 240 阅读

相关百叶窗特效

开发工具与关键技术：Adobe Dreamweaver CC 2017 CSS jQuert 作者：廖亚星撰写时间：2019年2月20日下面我们来做百叶窗特效

本是古典何须时尚/ 2022年03月18日 13:24/ 0 赞/ 668 阅读

相关 css实现图片百叶窗效果

作品很翻车啊： ![20200506135237186.gif][] 用css实现了一款百叶窗效果，但是不知道图片不能完全显出来，有谁知道怎样使大的图片自适应小窗口吗，太难

我就是我/ 2021年07月26日 12:52/ 0 赞/ 563 阅读

相关百叶窗照片(偏js版、jq精简版)

问题如何计算每个图片分配的位置大小当一个图片完全展开时，如何计算其他图片分配的位置大小如何设置未点击时的黑幕效果和点击后的去除(即利

╰+哭是因爲堅強的太久メ/ 2021年07月25日 02:53/ 0 赞/ 428 阅读