参照网上的资料及提供的jQuery插件实现图片幻灯效果。

1、页面前台代码：

//头部引用

<head runat="server">
<title></title>
<script type="text/javascript" src="scripts/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery/jquery.KinSlideshow-1.2.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#focusNews").KinSlideshow();
})
</script>
</head>

<div id="focusNews" class="ifocus">
<asp:Repeater ID="FocusList" runat="server">
<ItemTemplate>
<a title='<%#Eval("Title")%>' target="_blank" href='<%#Eval("Href")%>'>
<img src='<%#Eval("Src")%>' alt='<%#Eval("Title")%>' /></a>
</ItemTemplate>
</asp:Repeater>
</div>

2、后台代码，主要是实现数据绑定：

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindSlider();
}
}

private void BindSlider()
{
List<MyItem> list = new List<MyItem>();
MyItem item1 = new MyItem();
item1.Title = "item1";
item1.Src = "images/1.jpg";
item1.Href = "http://www.szit.edu.cn";
MyItem item2 = new MyItem();
item2.Title = "item2";
item2.Src = "images/2.jpg";
item2.Href = "http://www.sohu.com";
MyItem item3 = new MyItem();
item3.Title = "item3";
item3.Src = "images/3.jpg";
item3.Href = "http://www.sina.com";
list.Add(item1);
list.Add(item2);
list.Add(item3);
FocusList.DataSource = list;
FocusList.DataBind();
}
下载Demo

ASP.NET中使用jQuery插件实现图片幻灯效果的更多相关文章

  1. jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。

    公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...

  2. JQuery插件让图片旋转任意角度且代码极其简单 - 摘自网友

    JQuery插件让图片旋转任意角度且代码极其简单 2012-04-01 09:57:03     我来说两句      收藏    我要投稿 引入下方的jquery.rotate.js文件,然后通过$ ...

  3. 在 ASP.NET 中使用 jQuery.load() 方法

    今天就让我们看看在 ASP.NET 中使用 jQuery.load() 方法来调用 ASP.NET 的方法,实现无刷新的加载数据. 使用 jQuery 的朋友应该知道可以使用 jQuery.load( ...

  4. 【译】在Asp.Net中操作PDF – iTextSharp - 操作图片

    原文 [译]在Asp.Net中操作PDF – iTextSharp - 操作图片 作为我的iTextSharp系列的文章的第七篇,开始探索使用iTextSharp在PDF中操作图片,理解本篇文章需要看 ...

  5. react 或 vue 中引用 jQuery 插件

    前言 今天与遇到一个令人抓狂的事情, 因为项目中有个交互太过于复杂而且冷门, 没有人封装类似react-swiper那种的移植过来的插件 只有现成的jQuery插件. 而时间并不宽裕,自己重写成rea ...

  6. 一款基于jquery的手风琴图片展示效果

    今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  7. jQuery仿迅雷图片轮换效果

    jQuery仿迅雷图片轮换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  8. 【原创】MVC项目中使用JQuery的upladify图片上传插件相关问题的解决方案

    一. 关于Uploadify Uploadify是一个jQuery插件,你可以很容易的为你的网站添加多个文件上传功能.有两个不同的版本(HTML5和Flash)允许你灵活选择为您的网站和回退方法正确实 ...

  9. 在asp.net中使用jQuery实现类似QQ网站的图片切割效果

    今天要给大家介绍一个asp.net结合jQuery来切割图片的小程序,原理很简单,大致流程是: 加载原图 --> 用矩形框在原图上选取区域并将选取的顶点坐标和矩形尺寸发送至服务器 --> ...

随机推荐

  1. zabbix 通过自定义key完成网卡监控

    创建执行脚本: # cat /etc/zabbix/monitor_scripts/network.sh #!/bin/bash #set -x usage() { echo "Useage ...

  2. Kprobes

    https://landley.net/kdocs/ols/2007/ols2007v1-pages-215-224.pdf https://www.kernel.org/doc/Documentat ...

  3. mybatis逆向工程自动生成实体类、接口以及映射Mapper.xml配置文件

    Mybatis的逆向工程非常简单,只要一个配置文件和一个Main方法就可以实现,下面以maven工程为例: (1)在pom.xml中引入依赖包 <dependency> <group ...

  4. 7个华丽的基于Canvas的HTML5动画

    说起HTML5,可能让你印象更深的是其基于Canvas的动画特效,虽然Canvas在HTML5中的应用并不全都是动画制作,但其动画效果确实让人震惊.本文收集了7个最让人难忘的HTML5 Canvas动 ...

  5. 修改zerolog使log输出的文件名可以在goland里自动定位--技巧

    如何自动定位文件 最近发现goland会自动识别输出的文件或者url,但是有时候又识别不出来,折腾了一下,发现原来要求文件路径或url两边要有空格 改造zerolog 既然如此,那么让我们来改造一下z ...

  6. win7+python3.6+word_cloud 安装出现Microsoft Visual C++ 14.0 is required

    说明 环境: 已安装Anaconda3 (64-bit) 4.4.0(Python 3.6.1).其中,代码调试在Spyder 3.1.4中进行,安装包则直接打开Anaconda Prompt调用cm ...

  7. iis部署wcf服务

    win8的如下 . 打开iis新建一个应用程序MyWcfTest 检查iis中的处理程序映射,含有svc说明激活了. 然后把svc文件和webconfig放入到指定的目录上. 使用地址http://l ...

  8. Error: Java heap space

    在chd中 的hive中执行 (select count (*))  或者mr程序都报Error: Java heap space 4.io.sort.mb 的作用  排序所使用的内存数量.  默认值 ...

  9. WPF打包工具

    找到一款相当不错的WPF项目的打包工具:advanced installer 工具简单易用,有破/解版,还可以把项目依赖库一起打到一个包中. 用法参考: https://www.cnblogs.com ...

  10. （转载）WPF中的动画——（一）基本概念

    http://www.cnblogs.com/TianFang/p/4050845.html WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面.首先,我们来复习一下动画的基本概念.计 ...