ASP.NET 控件开发系列之图片切换web控件_实用技巧

开发系列之图片切换web控件_实用技巧-">
贴出来控件页面的代码.
PicList.ascx

复制代码 代码如下:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PicList.ascx.cs" Inherits="WebParts_PicList" %>
<style type="text/css">
/* Reset style */
*
{
margin: 0;
padding: 0;
word-break: break-all;
}
body
{
background: #fff;
color: #000000;
font: 12px/1.6em Helvetica, Arial, sans-serif;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
h1, h2, h3, h4, h5, h6
{
font-size: 1em;
}
a
{
color: #0287CA;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
ul, li
{
list-style: none;
}
fieldset, img
{
border: none;
}
legend
{
display: none;
}
em, strong, cite, th
{
font-style: normal;
font-weight: normal;
}
input, textarea, select, button
{
font: 12px Helvetica, Arial, sans-serif;
}
table
{
border-collapse: collapse;
}
html
{
overflow: -moz-scrollbars-vertical;
}
/*Always show Firefox scrollbar*/
/* iFocus style */
#ifocus
{
width: 650px;
height: 245px;
margin: 0px;
border: 1px solid #DEDEDE;
background: #F8F8F8;
}
#ifocus_pic
{
display: inline;
position: relative;
float: left;
width: 540px;
height: 225px;
overflow: hidden;
margin: 10px 0 0 10px;
}
#ifocus_piclist
{
position: absolute;
}
#ifocus_piclist li
{
width: 550px;
height: 225px;
overflow: hidden;
}
#ifocus_piclist img
{
width: 550px;
height: 225px;
}
#ifocus_btn
{
display: inline;
float: right;
width: 91px;
margin: 9px 9px 0 0;
}
#ifocus_btn li
{
width: 91px;
height: 57px;
cursor: pointer;
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
}
#ifocus_btn img
{
width: 75px;
height: 45px;
margin: 7px 0 0 11px;
}
#ifocus_btn .current
{
background: url(img/ifocus_btn_bg.gif) no-repeat;
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}
#ifocus_opdiv
{
position: absolute;
left: 0;
bottom: 0;
width: 545px;
height: 35px;
background: #000;
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
}
#ifocus_tx
{
position: absolute;
left: 8px;
bottom: 8px;
color: #FFF;
}
#ifocus_tx .normal
{
display: none;
}
</style>
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}
function moveElement(elementID,final_x,final_y,interval) {
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
if (elem.movement) {
clearTimeout(elem.movement);
}
if (!elem.style.left) {
elem.style.left = "0px";
}
if (!elem.style.top) {
elem.style.top = "0px";
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if (xpos == final_x && ypos == final_y) {
return true;
}
if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if (ypos < final_y) {
var dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if (ypos > final_y) {
var dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}
function classNormal(iFocusBtnID,iFocusTxID){
var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
for(var i=0; i<iFocusBtns.length; i++) {
iFocusBtns[i].className='normal';
iFocusTxs[i].className='normal';
}
}
function classCurrent(iFocusBtnID,iFocusTxID,n){
var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
iFocusBtns[n].className='current';
iFocusTxs[n].className='current';
}
function iFocusChange() {
if(!$('ifocus')) return false;
$('ifocus').onmouseover = function(){atuokey = true};
$('ifocus').onmouseout = function(){atuokey = false};
var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');
var listLength = iFocusBtns.length;
iFocusBtns[0].onmouseover = function() {
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
if (listLength>=2) {
iFocusBtns[1].onmouseover = function() {
moveElement('ifocus_piclist',0,-225,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',1);
}
}
if (listLength>=3) {
iFocusBtns[2].onmouseover = function() {
moveElement('ifocus_piclist',0,-450,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',2);
}
}
if (listLength>=4) {
iFocusBtns[3].onmouseover = function() {
moveElement('ifocus_piclist',0,-675,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',3);
}
}
}
setInterval('autoiFocus()',3500);
var atuokey = false;
function autoiFocus() {
if(!$('ifocus')) return false;
if(atuokey) return false;
var focusBtnList = $('ifocus_btn').getElementsByTagName('li');
var listLength = focusBtnList.length;
for(var i=0; i<listLength; i++) {
if (focusBtnList[i].className == 'current') var currentNum = i;
}
if (currentNum==0&&listLength!=1 ){
moveElement('ifocus_piclist',0,-225,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',1);
}
if (currentNum==1&&listLength!=2 ){
moveElement('ifocus_piclist',0,-450,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',2);
}
if (currentNum==2&&listLength!=3 ){
moveElement('ifocus_piclist',0,-675,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',3);
}
if (currentNum==3 ){
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
if (currentNum==1&&listLength==2 ){
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
if (currentNum==2&&listLength==3 ){
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
}
addLoadEvent(iFocusChange);
</script>
<div align="center">
<div id="ifocus">
<div id="ifocus_pic">
<div id="ifocus_piclist" style="left: 0; top: 0;">
<ul runat="server" id="ulImgBig">
</ul>
</div>
<div id="ifocus_opdiv">
</div>
<div id="ifocus_tx">
<ul runat="server" id="urImgTitle">
</ul>
</div>
</div>
<div id="ifocus_btn">
<ul runat="server" id="ulImgSmall">
</ul>
</div>
</div>
</div>

下面是控件后台和一个图片类的代码:

复制代码 代码如下:

public partial class WebParts_PicList : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
ShowImages();
}
public void ShowImages()
{
for (int i = 0; i < ListImages.Count; i++)
{
//标题和小图
if (i == 0)
{
urImgTitle.InnerHtml += "<li class='current'>" + listImages[i].ImageTitle1 + "</li>";
ulImgSmall.InnerHtml += "<li class='current'><img src='" + listImages[i].ImageSrc1 + "' alt='" + listImages[i].ImageAlt1 + "' /></li>";
}
else
{
urImgTitle.InnerHtml += "<li class='normal'>" + listImages[i].ImageTitle1 + "</li>";
ulImgSmall.InnerHtml += "<li class='normal'><img src='" + listImages[i].ImageSrc1 + "' alt='" + listImages[i].ImageAlt1 + "' /></li>";
}
//大图
ulImgBig.InnerHtml += " <li><a href=" + listImages[i].ImageHref1 + " target='_blank'><img src=" + listImages[i].ImageSrc1 + " alt=" + listImages[i].ImageAlt1 + " border='0' /></a></li>";
}
}
private List<ShowImages> listImages;
public List<ShowImages> ListImages
{
get { return listImages; }
set { listImages = value; }
}
}
//图片的属性
public class ShowImages
{
string ImageSrc;
string ImageHref;
string ImageTitle;
string ImageAlt;
public string ImageAlt1
{
get { return ImageAlt; }
set { ImageAlt = value; }
}
public string ImageSrc1
{
get { return ImageSrc; }
set { ImageSrc = value; }
}
public string ImageHref1
{
get { return ImageHref; }
set { ImageHref = value; }
}
public string ImageTitle1
{
get { return ImageTitle; }
set { ImageTitle = value; }
}
}

实现思路是 ShowImages的集合当作控件的一个属性.然后便利集合循环赋值.
下面是页面调用的代码:

复制代码 代码如下:

List<ShowImages> listImages = new List<ShowImages>();
ShowImages image1 = new ShowImages();
image1.ImageAlt1 = "喵喵";
image1.ImageHref1 = "http://www.jb51.net";
image1.ImageSrc1 = "http://b23.photo.store.qq.com/http_imgload.cgi?/rurl4_b=e52b4cc5fe67c1a2dc328adb766f1633bfc02bb27fe17aa21ca1264a0dac599fc425faf65d1daac8ab7cb5923a15443882d9d0586694a0e5eb0671af60a2f6e739d3c15b1e52f2c518a00344fa791dbaee88cc43&a=25&b=23";
image1.ImageTitle1 = "这是我的自画像";
listImages.Add(image1);
listImages.Add(image2);
listImages.Add(image3);
listImages.Add(image4);
PicList1.ListImages = listImages;

ok 一个简单的控件就实现了
作者：cnblogs 喵喵

时间： 2024-10-21 15:26:50

ASP.NET 控件开发系列之图片切换web控件_实用技巧的相关文章

ASP.NET MVC5网站开发修改及删除文章（十）_实用技巧

上次做了显示文章列表,再实现修改和删除文章这部分内容就结束了,这次内容比较简单,由于做过了添加文章,修改文章非常类似,就是多了一个TryUpdateModel部分更新模型数据.一.删除文章 由于公共模型跟,文章,附件有关联,所以这里的删除次序很重要,如果先删除模型,那么文章ModelID和附件的ModelID多会变成null,所以要先先删除文章和附件再删除公共模型. 由于公共模型和附件是一对多的关系,我们把删除公共模型和删除附件写在一起. 在BLL的BaseRepository类中有默认的Del

asp.net 点缩略图弹出随图片大小自动调整的页面_实用技巧

而且要有图片的说明信息,还可以点上一幅和下一幅等进行翻页. 实现过程如下: pic_small.Aspx页面缩略图处的代码为: 复制代码 代码如下: <IMGid="imgPic"style="CURSOR:hand"border=0height="95"onclick="ShowWindow(<%#DataBinder.Eval(Container.DataItem,"ID")%>)"s

ASP.NET MVC5网站开发之展示层架构（五）_实用技巧

展示层由Ninesky.Web项目实现,负责网站内容的显示,项目包含Member和Control两个区域. Member区域实现网站内容的管理,Control区域实现网站系统管理.结构.功能图如下:  一.Member区域 1.添加Member区域 Ninesky.Web[右键]-> 添加->区域 . 在弹出的添加区域对话框输入区域名称:Member,完成区域添加. 2.添加Home控制器 Ninesky.Web->Areas->Member->Controllers[右键]

asp.net中上传图片文件实现防伪图片水印并写入数据库_实用技巧

复制代码 代码如下: // 涉及命名空间 using System; using System.Collections; using System.ComponentModel; using System.Data; using System.Data.SqlClient; using System.Drawing; using System.Drawing.Drawing2D; using System.Drawing.Imaging; using System.Web; using Syst

Silverlightbutton图片切换样式实例代码_实用技巧

之前一直做WPF现在开始接触Slilverlight感触很多. 今天做一个Button要求 有两个图片,button默认有一个图片,鼠标over时用另一个图片, 用wpf做的时候写一个template很简单,但silverlight和wpf写起来不一样 记录一下.大概思路是两个image鼠标MouseOver的时候一个Visible一个Collapsed 写的是一个自定义控件,代码和皮肤分离,很简单的一个demo 代码下载:ImageButtonTest.rar 先写一个继承自button的im

asp.net开发中怎样去突破文件依赖缓存_实用技巧

在Web项目中可以使用Session,Application等来缓存数据,也可以使用Cache来缓存. 今天我们特别关注的是Cache缓存.Cache位于命名空间System.Web.Caching命名空间下,看到这里我们想到的是它在Web项目中使用. 说明:Cache 类不能在 ASP.NET 应用程序外使用.它是为在 ASP.NET 中用于为 Web 应用程序提供缓存而设计和测试的.在其他类型的应用程序(如控制台应用程序或 Windows 窗体应用程序)中,ASP.NET 缓存可能无法正常工

asp.net动态加载用户控件，关于后台添加、修改的思考_实用技巧

看下下面这个典型的后台(比较粗糙):说实在,我很厌倦全部用.aspx文件去做,比如"友情连接"这个模块,就有"添加友情连接""修改友情连接""友情连接列表",简单的话,可以把"添加""修改"合成一个文件.每次都去建立一个.aspx文件.我现在的想法是用"用户控件+配置文件"去实现,虽然文件数目可能不会少很多.但在编程到一定地步,我想大家会有跟我一样的想法. 首先需要涉

蛇年多屏图片切换(可添加图片链接以及编辑标题)_实用技巧

朋友要求,做一个多屏图片切换效果,以作为网站广告宣传,刚开始听到此要求时,心想一定很简单照抄就行了.但是朋友还有进一步要求,是要在网站管理后统一管理,添加图片,链接以及标题.还能编辑这些信息.前台不必在每次更新时,去修改前台代码. 即然朋友有此要求,Insus.NET照做就是了.首先看看效果(今年是蛇年,刚好Windows 8 Themes也有几张蛇图片,因此拿它来做例子了.)  在数据库创建一个表,来存储相关信息,如图片名称,链接以及标题等: 复制代码 代码如下: [dbo].[SwitchF

让Asp.NET的DataGrid可排序、可选择、可分页_实用技巧

DataGrid是Asp.NET中的一个重要的控件,经常我们都将DataGrid做成可分页的和可排序的,有时还需要加上选择功能.这些都是经常需要用到的方法,其实是比较简单的.  设计思路:     为了方便起见,我们连接SQL Server 2000的NorthWind数据库的Orders表,从数据库里得到此表的数据视图.利用DataGrid的SortCommand事件实现排序.用一个模板列加上CheckBox控件实现选择.可用DataGrid的属性生成器的"分页"选项或者自己修改HT