学习笔记:SildeShow 相册无刷新翻页或幻灯片方式浏览..

本文介绍了一个使用AjaxControlToolkit实现的幻灯片展示组件的基本配置与使用方法,包括WebService的设置及图片滑动效果的实现。

基本实现
<ajaxToolkit:SlideShowExtender ID="SlideShowExtender1" runat="server"
    TargetControlID="Image1"
    SlideShowServiceMethod="GetSlides"
    AutoPlay="true"
    ImageDescriptionLabelID="imageLabel1"
    NextButtonID="nextButton"
    PlayButtonText="Play"
    StopButtonText="Stop"
    PreviousButtonID="prevButton"
    PlayButtonID="playButton"
    Loop="true" />

在WebService里必须在属性里添加
[System.Web.Script.Services.ScriptMethod]
WebService方法返回AjaxControlToolkit.Slide[]

 public AjaxControlToolkit.Slide[] Silddeshow()
    {
 //Slide构造函数参数:new AjaxControlTookKit.Slide(string path,string name,string description) path:图片路径,name:图片名(自定义),description:图片的描述信息;在描述标签里文本显示格式为: name:description

        AjaxControlToolkit.Slide s1 = new AjaxControlToolkit.Slide(@"images/Blue hills.jpg", "Blue hill", "Blue hill");
        AjaxControlToolkit.Slide s2 = new AjaxControlToolkit.Slide(@"images/Sunset.jpg", "Sunset", "Sunset");
        AjaxControlToolkit.Slide s3 = new AjaxControlToolkit.Slide(@"images/Water lilies.jpg", "Water lilies", "Water lilies");
        AjaxControlToolkit.Slide s4 = new AjaxControlToolkit.Slide(@"images/Winter.jpg", "Winter", "Winter");
        AjaxControlToolkit.Slide[] s = new AjaxControlToolkit.Slide[] { s1,s2,s3,s4};
        return s;
    }



属性
说明
SlideShowServicePath请求获得图片的WebService路径
SlideShowServiceMethod请求获得图片的WebSerive里的方法...
NextButtonID 翻页下一张的按钮ID
PlayButtonID幻灯片控制暂停/播放的按钮ID
PreviousButtonID翻页上一张的按钮ID
PlayButtonText幻灯片暂停播放时控制按钮的文本显示
StopButtonText幻灯片正在播放时控制按钮的文本显示
PlayInterval幻灯片播放间隔的毫秒数
ImageDescriptionLabelID描述当前图片的文本标签的ID
Loop设置是否循环播放(幻灯片模式)
AutoPlay设置是否允许幻灯片模式播放

转载于:https://www.cnblogs.com/jaychaoqun/archive/2008/05/10/1191080.html

修改这段代码,实现图片点击切换效果@charset "utf-8";* { margin: 0; padding: 0; list-style: none; }html { height: 100%;}body { width: 100%; height: 100%; margin: 0; display: flex; flex-direction: column;}.class1 { height: 70px; width: 100%; background: #ccc; }.class2 { height: 50px; width: 100%; background: #ffaa00;}.class3 { width: 100%; }header{ background-color: #00ffff; height: 70px; width: 1200px; margin: 0 auto; }.logo{ width: 200px; height: 65px; background-color: #16A1E7; float: left; padding-top: 5px; } .logo.p{ line-height: 10px; } .search{ width: 800px; height: 70px; float: left; } /* 搜索框在导航中居中 */ header .search form{ margin-left: 150px; margin-top: 20px; } /* 输入框样式 */ header .search input{ height:36px; border:none; float:left; } header .search input[type=text]{ width:300px; border:0.5px solid #999; padding:0px 5px; } /* 输入框 */ header .search input[type=submit]{ background-color:#16A1E7; color:#fff; width:100px; font-size:14px; font-family:"微软雅黑";} .reg{ width: 200px; height: 70px; background-color: #ffaa7f; float: left; } .reg a{ text-decoration: none; } .delu{ margin: 25px 0px 0px 120px; } .nav{ width: 100%; height: 50px; border-bottom: 2px solid #0099CC; display: flex; } ul{ background-color: #ffffff; list-style-type: none; overflow: hidden; width: 1200px; margin: 0 auto; } li{ /*display与float两种方式使列表转为横向*/ /* display: inline; */ float: left; } li a{ display:block ; color: #000000; text-decoration: none; text-align: center; padding: 14px 46px; font-size: 16px; } li a:hover{ background-color:#000000 ; color: #ffffff; } .active{ background-color: #00aaff; } .sildeshow > *{ position: absolute; } .href{ z-index: 100; margin-top: 470px; } .href a{ display: block; width: 80px; height: 30px; background-color: #333; float: left; margin-left: 25px; } .images > li img{ width: 500px; height: 500px; }
06-08
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值