图片渐变轮换效果

最新推荐文章于 2025-04-28 16:38:57 发布
最新推荐文章于 2025-04-28 16:38:57 发布
阅读量922 收藏 2
点赞数
分类专栏： ASP.NET 文章标签： generator string dataset image html null

 一.静态的

<HTML>
    <HEAD>
        <title>图片渐变轮换效果</title>
        <meta name="generator" content="editplus">
        <meta name="author" content="neng">
    </HEAD>
    <body>
        <p>图片渐变轮换效果(IE),请等几秒钟看效果</p>
        <a href="#" id="javascript.a"><img src="TN_01015_119.JPG" id="javascript.img"
                border="0" style="FILTER:blendTrans(duration=2)" width="240" height="180"></a>
        <script>
            <!--
            var ImgSrc = new Array();//图片地址
            ImgSrc[0] = "TN_01087_0122.JPG"
            ImgSrc[1] = "TN_01384_582.JPG"
            ImgSrc[2] = "TN_01015_119.JPG"
            ImgSrc[3] = "TN_05132_31.JPG"
            ImgSrc[4] = "TN_05809_1005.JPG"
            ImgSrc[5] = "TN_06257_84.JPG"
            ImgSrc[6] = "TN_06316_153.JPG"
            ImgSrc[7] = "TN_BK-Lewis&Clarkp6-7.JPG"


            for (var i=0;i<ImgSrc.length;i++){(new Image()).src = ImgSrc[i];}//预加载图片

            var ImgAlt = new Array();//鼠标放上去显示的文字
            ImgAlt[0] = "博客园小山1"
            ImgAlt[1] = "博客园小山2"
            ImgAlt[2] = "博客园小山3"
            ImgAlt[3] = "博客园小山4"
            ImgAlt[4] = "博客园小山5"
            ImgAlt[5] = "博客园小山6"
            ImgAlt[6] = "博客园小山7"
            ImgAlt[7] = "博客园小山8"

            var ImgHerf =  new Array();//链接
            ImgHerf[0] = "page_01.htm"
            ImgHerf[1] = "page_02.htm"
            ImgHerf[2] = "page_03.htm"
            ImgHerf[3] = "page_04.htm"
            ImgHerf[4] = "page_05.htm"
            ImgHerf[5] = "page_06.htm"
            ImgHerf[6] = "page_07.htm"
            ImgHerf[7] = "page_08.htm"

            var step=0;
            function slideit(){
                var oImg = document.getElementById("javascript.img");
                if (document.all){oImg.filters.blendTrans.apply();}
                oImg.src=ImgSrc[step];
                document.getElementById("javascript.a").href=ImgHerf[step];
                oImg.title=ImgAlt[step];
                if (document.all){oImg.filters.blendTrans.play();}
                step = (step<(ImgSrc.length-1))?(step+1):0;
                (new Image()).src = ImgSrc[step];//加载下一个图片
            }
            setInterval("slideit()",5000);
            //-->
        </script>
    </body>
</HTML>
二.动态的
1..html代码
<HTML>
    <HEAD>
        <title>图片渐变轮换效果</title>
        <meta name="generator" content="editplus">
        <meta name="author" content="neng">
    </HEAD>
    <body>
        <p>图片渐变轮换效果(IE),请等几秒钟看效果</p>
        <a href="#" id="javascript.a"><img src="TN_01015_119.JPG" id="javascript.img"
                border="0" style="FILTER:blendTrans(duration=2)" width="240" height="180"></a>
        <script>
            <!--
            <%=LoadImage()%>//从数据库加载
            
            var step=0;
            function slideit(){
                var oImg = document.getElementById("javascript.img");
                if (document.all){oImg.filters.blendTrans.apply();}
                oImg.src=ImgSrc[step];
                document.getElementById("javascript.a").href=ImgHerf[step];
                oImg.title=ImgAlt[step];
                if (document.all){oImg.filters.blendTrans.play();}
                step = (step<(ImgSrc.length-1))?(step+1):0;
                (new Image()).src = ImgSrc[step];//加载下一个图片
            }
            setInterval("slideit()",5000);
            //-->
        </script>
    </body>
</HTML>
2.cs代码
public class ImageChangeFromDB : System.Web.UI.Page
    {
        private void Page_Load(object sender, System.EventArgs e)
        {
            // Put user code to initialize the page here
        }

        Web Form Designer generated code

        public static string ConnectionString=System.Configuration .ConfigurationSettings .AppSettings["ConnectionString"];
    
        GetDataSet

        protected string LoadImage()
        {
            string sql="select * from ImageChange";
            DataSet ds=GetDataSet(sql);
            string img="";
            for(int m=0;m<ds.Tables[0].Rows.Count;m++)
            {                
                img+="var ImgSrc = new Array();";//图片地址
                img+="ImgSrc["+m+"] = "+"/""+ds.Tables[0].Rows[m]["DisplayImage"].ToString()+"/";";
                
                img+="for (var i=0;i<ImgSrc.length;i++){(new Image()).src = ImgSrc[i];}";//预加载图片
                
                img+="var ImgAlt = new Array();";//鼠标放上去显示的文字    
                img+="ImgAlt["+m+"] = "+"/""+ds.Tables[0].Rows[m]["Description"].ToString()+"/";";

                img+="var ImgHerf =  new Array();";//链接
                img+="ImgHerf["+m+"] = "+"/""+ds.Tables[0].Rows[m]["URL"].ToString()+"/";";            
            }
            return img;
        }
    }
3.数据库脚本
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[ImageChange]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[ImageChange]
GO

CREATE TABLE [dbo].[ImageChange] (
[ImageChangeID] [int] NOT NULL ,
[URL] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[Description] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[DisplayImage] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL 
) ON [PRIMARY]
GO
 
渐变轮播图
pumpkin_truck的博客
12-28 281
渐变轮播图 要求： 1）完成轮播图结构及样式的搭建； 2）根据图片的数量动态创建序号； 3）点击next按钮实现图片的轮播并有过渡效果; 4）点击prev按钮实现图片的轮播并有过渡效果； 5）给序号注册点击事件让图片轮播； 6）图片自动轮播，鼠标进入盒子让两个箭头显示并停止定时器； 7）鼠标离开盒子箭头消失并重新开启定时器 所以接下来我们就按照这个步骤一步一步来实现它吧 首先我们先完成html的结构搭建 <body> <!-- 创建一个大容器 --> <div
[html] 图片切换 —— 以幻灯片形式渐变切换
weixin_43520070的博客
03-09 1077
感谢https://blog.youkuaiyun.com/u013247277/article/details/70810124提供的思路，在原博代码的基础上实现了自动切换图片，并且图片大小不随网页缩放 test <style type="text/css"> *{margin:0;padding:0;} .d1 { position: absolute; width: 100vw; height: 100vh; overflow: hidd
图片渐变轮播
12-17
图片渐变轮播 下载后可以直接运行看到效果。
图片渐变轮播 css+javascript
11-13
图片渐变轮播 css+javascript
html 图片轮播渐变,简单的jquery图片轮播渐变
weixin_42129970的博客
06-04 342
写的比较简单，样式没有直接封装在脚本里面，那样会显得比较累赘。简单的界面和样式 ：Document.fade_slider{width: 400px;height: 200px;position: relative;overflow: hidden;}.fade_slider .slider,.fade_slider .slider img{width: 100%;height: 100%;}.f...
渐变轮播
weixin_43219354的博客
09-17 632
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
jquery实现两个图片渐变切换效果的方法
10-24
jQuery作为一个流行的JavaScript库，它提供了一套简洁的方式来实现图片渐变切换效果。接下来，我们将探讨如何使用jQuery实现两个图片渐变切换的效果，以及它所涉及的显示与隐藏效果的实现技巧。 首先，我们需要了解...
js实现图片从左往右渐变切换效果的方法
10-24
实现图片渐变切换的效果还可能涉及到定时器的使用。JavaScript的 `setTimeout` 或 `setInterval` 函数可用于在特定的间隔时间后执行函数，这可以用来控制图片切换的时间间隔，从而实现平滑的过渡效果。 总的来说，...
图片渐变轮换焦点图效果特效代码
03-20
标题 "图片渐变轮换焦点图效果特效代码" 涉及的是网页设计中的一个常见功能，即图像轮播或焦点图组件。这种组件通常用于网站的首页或产品展示区域，通过自动或手动切换的方式展示多张图片，同时提供平滑的过渡效果，...
实现无缝轮播的jQuery图片渐变切换效果
资源摘要信息:"jQuery无缝图片渐变切换代码" 知识点: 1. jQuery库的使用和优势 2. 图片切换特效的实现方法 3. 渐变切换技术的原理 ...通过合理地应用这些鼠标事件，可以实现更加动态和吸引用户的图片切换效果。
探索TweenMax实现的不规则图片渐变切换效果
这段描述说明了 TweenMax 特效在实际应用中的表现形式，即在焦点图（轮播图）的场景下，通过渐变切换和透明度变化实现图片的不规则切换效果。焦点图是网站上常见的一种展示方式，用于突出展示一系列的图片或信息。不...
JS+html 渐变滚动切换广告图片效果
01-10
JS+html 渐变滚动切换广告图片效果
图片轮换渐变效果
web开发自学
10-30 174
&lt;styletype="text/css"&gt; .woon{border:1pxsolid#fff;} .wooff{border:1pxsolid#ffffff;filter:progid:DXImagetransform.Microsoft.Alpha(style=1,opacity=1500,finishOpacity=1);} &lt;/style&gt; &lt;scriptl...
简单的js 图片轮换相册，有过渡渐变效果。兼容IE,ff
程序人生的专栏
12-04 6828
#cnt{width:100%;height:80%;} .ctrl{text-align:center;border:1px solid gray;font-size:12px;cursor:pointer;} <!-- var curOpac = 0; var filterTimer; var isIE = /internet explorer/i.test(win
html 图片切换渐变效果,jQuery无缝图片渐变切换特效
weixin_29055699的博客
06-09 306
js代码$(document).ready(function(){var timejg=3000;//轮播间隔时间var size = $('.box_img ul li').size();for(var i=1;i<=size;i++){$('.box_tab').append(''+i+'')}$('.box_img ul li').eq(0).show();$('.box_tab a'...
html图片渐隐渐显,js实现图片切换效果渐隐渐显
weixin_39980893的博客
06-09 827
图片渐隐渐显的切换效果window.onload = function(){var testDiv = document.getElementById('test');testDiv.style.opacity = 1.0;testDiv.onmouseover = show;testDiv.onmouseout = hide;};var interval1, interval2;var show...
创建HTML图片轮播效果的完全指南
最新发布
weixin_42230607的博客
04-28 1219
图片轮播是现代网页中常见的元素，它能够以自动或手动的方式展示一组图片。本章将带你了解如何使用HTML创建一个简单的图片轮播基础结构。在本章节中，我们详细讨论了如何在图片轮播功能中实现自动播放和触摸滑动的支持，以及如何对这些功能进行优化以提升用户体验。通过添加兼容性检查、控制自动播放的暂停与恢复、处理触摸滑动事件以及同步触摸滑动与自动播放的逻辑，开发者可以构建出更加完整和用户友好的图片轮播模块。在下一章节中，我们将继续深入探讨如何进一步优化用户体验，特别是在响应式设计和用户交互方面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值