Jquery插件使用 焦点图插件 MyFocus ,另外记录一款插件 KinMaxShow大背景图插件。

以前用flash做首页图片轮播。最近的网站里用到一个插件MyFocus插件焦点图插件

用法如下:

          
<script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script>
      
              <script type="text/javascript">
                            //设置
                            myFocus.set({
                                id: ‘myFocus‘, //ID
                                pattern: ‘mF_taobao2010‘//风格
                            });
                        </script>
                        <div id="myFocus">
                            <div class="loading">
                                <img src="images/loading.gif" alt="请稍候..." /></div>
                            <div class="pic">
                                <ul>
                                    <asp:Repeater ID="List_pic" runat="server">
                                        <ItemTemplate>
                                            <li><a href="/Detail.aspx?id=<%#Encrypt.MD5Encrypt(Eval("NewsNo").ToString()) %>">
                                                <img src="<%# Eval("PicURL") %>" thumb="" alt="<%# Encrypt.subContent(Eval("NewsTitle").ToString(), 24)%>" /></a></li>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                    <li><a href="#" title="" target="_blank">
                                        <img src="images/img01.jpg" thumb="" alt="区愿服务活动" /></a></li>
                                    <li><a href="#" title="" target="_blank">
                                        <img src="images/img01.jpg" thumb="" alt="区人大常委会机关动区愿服务活动" /></a></li>
                                    <li><a href="#" title="" target="_blank">
                                        <img src="images/img01.jpg" thumb="" alt="区人大常委会机关妇女小分队开展志愿服务活动区人大常委会机关妇女小分队开展志愿服务活动" /></a></li>
                                </ul>
                            </div>
                        </div>

使用起来很方便,使用上完全用ullist可以呈现,很方便。

时间: 2024-11-10 16:42:13

Jquery插件使用 焦点图插件 MyFocus ,另外记录一款插件 KinMaxShow大背景图插件。的相关文章

基于jQuery全屏焦点图切换插件responsiveslides

基于jQuery全屏焦点图切换插件responsiveslides是一款带左右箭头,索引按钮的自动轮播切换特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <script type="text/javascript"> $(function () { // Slideshow $("#slider").responsiveSlides({ auto: true, pager: false, nav: true, speed:

如何使用myFocus插件制作焦点图效果

焦点图分有:flash焦点图  js焦点图  css焦点图  jQ焦点图(其中jQ焦点图以代码量少,实现功能成为首选): myFocus是一款专注于焦点图制作的js插件: 使用步骤:点击下载——Demo显示打包下载——点击 下载的链接——下载 注:在引用myFocus插件时只需要把下载后myFocus的整个js文件复制到自己的站点的js里即可: js部分: <script type="js/myfocus-2.0.1.min.js" type="text/javascr

17种常用的jQuery全屏焦点图代码

jQuery全屏焦点图特效制作带标题的焦点图切换代码 jQuery背景和banner图片一起切换全屏焦点图切换代码 jQuery仿音悦台网站全屏带标题的焦点图轮播代码 jQuery响应式焦点图插件制作响应式全屏焦点图切换代码 jquery html5响应式幻灯片插件网站响应式全屏幻灯片轮播代码 jquery html5步步高vivo官网全屏焦点图片动画效果代码 jquery带左右按钮的全屏焦点图片切换代码 jQuery.skipper全屏响应式图片幻灯片轮播切换代码 modernizr html

分享10款非常有用的 Ajax 插件

这篇文章与大家分享的是10款非常有用的 Ajax 插件,有用于图片的,用于分页的,还有用于导航的.这些作者的想法特别新颖,希望你能从中找到自己需要的插件. 1. AJAX-ZOOM 非常强大的一款插件,可用鼠标滚轮进行缩放,360° 旋转,全屏浏览等很多功能,在线演示 2. VerticalSlider 用于显示长列表的很好的方式,以Ajax方式加载,在线演示 3. More plugin 一款实现更多功能的插件,可用于显示更多评论,也可用于显示后面多少篇博文等,在线演示 4. HTML5 dr

推荐几款实用的Android Studio 插件

推荐几款实用的Android Studio 插件 泡在网上的日子 发表于 2015-10-09 10:47 第 17453 次阅读 插件,Android Studio 10 编辑推荐:稀土掘金,这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技术干货,不仅仅是Android知识.前端.后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过! 原文出处:http://www.jianshu.com/p/6f5f818afe4b 1.android-butterknife-ze

[原创]zepto打造一款移动端划屏插件

最近忙着将项目内的jquery 2换成zepto 因为不想引用过多的zepto包,所以花了点时间 zepto真的精简了许多,源代码看着真舒服 正好项目内需要一个划屏插件,就用zepto写了一个 逻辑其实很简单,但没想到测试时,在老版本android设备浏览器上的touchmove有许多bug 做兼容倒是搞了一阵 效果图 样式1 样式2 调用 正常情况下应该是后台生成的html代码,但还是写了一套操作tab页的方法 调用简便如下: <link rel="stylesheet" hr

基于jQuery8款超赞的评分插件

基于jquery8款超赞的评分插件.这是一款基于jquery.barrating插件实现的,该评级小部件可灵活设置CSS样式.具体效果请查看演示.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section class="section section-examples"> <div class="examples"> <div class="row"> <div class=&q

Kalendae——一款功能强大的日历插件

url:http://zjingwen.github.io/SetTimeOutGoBlog/kalendae/index.html (如果打开过慢,或者打不开,原因你懂得.) 一.Kalendae--一款功能强大的日历插件,英文版的,我英文太渣,有没有找到,中文文档.只能自己慢慢翻译,鼓捣了. 二.基本信息 Kalendae支持多种日历样式,可双联.单联.多联,支持单选日期,多选日期.联排选择.跨月选择.而且依赖图片极少,对于使用css来重构UI界面,非常有利. 依赖于了kaledae.js.

推荐一款Java代码Bug分析插件 FindBugs

findBugs是一个能静态分析源代码中可能会出现Bug的Eclipse插件工具. 下载之后,把解冻后的文件拷贝到 $ECLIPSE_HOME/plugins/目录下,重新启动eclipse即完成安装. FindBugs的设置: 安装好之后,可以通过 Projects > Property > FindBugs标签对其进行设置.设置方法可以根据自己的需要进行调整. 另外在 问题(Proplems)列表窗口(Windows > 视图 > 问题)的Filter设置里,把FindBugs