`
long546324
  • 浏览: 206671 次
  • 性别: Icon_minigender_1
  • 来自: 云南
社区版块
存档分类
最新评论

.net中实现图片的横向(竖直)滚动(轮播)

    博客分类:
  • .net
阅读更多
图片横向滚动(轮播)
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>图片横向轮播</title>
    <script src="jquery.js" type="text/javascript"></script>
    <style type="text/css">
        #demo {
            background: #FFF;
            overflow:auto;
            border: 1px dashed #CCC;
            width: 650px;     
       }
        #demo img{
            width:120px;
            height:120px;
            border: 3px solid #F2F2F2;
       }
      #indemo {
            float: left;
            width: 500%;
       }
       #demo1 {
            float: left;
       }
       #demo2 {
            float: left;
        }
    </style>
    <script type="text/javascript" >
        $(function(){
	            var speed=10; //数字越大速度越慢
	            var tab=document.getElementById("demo");
	            var tab1=document.getElementById("demo1");
	            var tab2=document.getElementById("demo2");
	            tab2.innerHTML=tab1.innerHTML;
	            function Marquee(){
	                if(tab2.offsetWidth-tab.scrollLeft<=0)
	                tab.scrollLeft-=tab1.offsetWidth
	                else{
	                tab.scrollLeft++;
	                }
	            }
	            var MyMar=setInterval(Marquee,speed);
	            tab.onmouseover=function() {clearInterval(MyMar)};
	            tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
	        });
    </script>
</head>

<body>
<form id="form1" runat="server">
    <div id="demo">
        <div id="indemo">
            <div id="demo1">
            <a href="1.jpg" target="_blank"><img src="1.jpg" alt=""/></a>
            <a href="2.jpg" target="_blank"><img src="2.jpg" alt=""/></a>
            <a href="3.jpg" target="_blank"><img src="3.jpg" alt=""/></a>
            <a href="4.jpg" target="_blank"><img src="4.jpg" alt=""/></a>
            <a href="5.jpg" target="_blank"><img src="5.jpg" alt=""/></a>
            </div>
            <div id="demo2"></div>
        </div>
    </div>
</form>
</body>
</html>

图片的竖直滚动(轮播)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>图片竖直轮播</title>
    <script src="jquery.js" type="text/javascript"></script>
    <style type="text/css">
        #demo {
            background: #FFF;
            overflow:auto;
            border: 1px dashed #CCC;
            width: 150px;
            height:500px;     
       }
       #demo a{
            display:block;
       }
        #demo img{
            width:120px;
            height:120px;
            border: 3px solid #F2F2F2;
       }
     
    </style>
    <script type="text/javascript" >
        $(function(){
	            var speed=10; //数字越大速度越慢
	            var tab=document.getElementById("demo");
	            var tab1=document.getElementById("demo1");
	            var tab2=document.getElementById("demo2");
	            tab2.innerHTML=tab1.innerHTML;
	            function Marquee(){
	                if(tab2.offsetHeight-tab.scrollTop<=0)
	                tab.scrollTop-=tab1.offsetHeight
	                else{
	                tab.scrollTop++;
	                }
	            }
	            var MyMar=setInterval(Marquee,speed);
	            tab.onmouseover=function() {clearInterval(MyMar)};
	            tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
	        });
    </script>
</head>

<body>
<form id="form1" runat="server">
    <div id="demo">
            <div id="demo1">
            <a href="1.jpg" target="_blank"><img src="1.jpg" alt=""/></a>
            <a href="2.jpg" target="_blank"><img src="2.jpg" alt=""/></a>
            <a href="3.jpg" target="_blank"><img src="3.jpg" alt=""/></a>
            <a href="4.jpg" target="_blank"><img src="4.jpg" alt=""/></a>
            <a href="5.jpg" target="_blank"><img src="5.jpg" alt=""/></a>
            </div>
            <div id="demo2"></div>
    </div>
</form>
</body>
</html>
2
0
分享到:
评论

相关推荐

    jQuery商品图片横向自动滚动轮播代码

    总结来说,实现"jQuery商品图片横向自动滚动轮播代码"涉及到前端开发的核心技术,包括jQuery的使用、DOM操作、CSS样式设计、JavaScript事件处理和动画效果。这些知识点对于创建动态、交互性强的网页至关重要,也是...

    jQuery图片横向滚动轮播代码

    本教程将深入探讨如何使用jQuery实现一款带标题和进度条的图片横向滚动轮播效果,以及涉及到的相关技术。 首先,`index.html`是网页的主体文件,它包含了HTML结构,包括轮播容器、图片元素、控制按钮(左右箭头)...

    图片横向动画滚动

    2. **宽度与溢出**:容器的宽度应该小于所有图片总宽度,以便图片可以超出容器并实现滚动。同时,设置`overflow-x`为`hidden`,隐藏超出容器的部分。 3. **动画**:使用`@keyframes`定义一个从右向左的动画,改变...

    网站\腾讯网横向滚动轮播鼠标经过图片显示标题特效

    【标题】:“网站\腾讯网横向滚动轮播鼠标经过图片显示标题特效”指的是在网站设计中,采用的一种常见用户体验优化技术。这种技术通常应用于新闻、产品展示或广告区域,通过横向滚动的方式展示多张图片,并在鼠标...

    jQuery图片横向滚动轮播代码.zip

    在“jQuery图片横向滚动轮播代码”中,核心是利用jQuery的动画功能和定时器来实现图片的自动切换。以下是一些关键知识点: 1. **HTML结构**:轮播的基础是HTML页面中的图片容器,通常使用`&lt;ul&gt;`和`&lt;li&gt;`元素来存放...

    jquery层叠图片横向平滑移动轮播切换效果

    本项目“jquery层叠图片横向平滑移动轮播切换效果”是利用jQuery实现的一种动态图片展示方式,通常被用于网站的首页或产品展示区域,以吸引用户的注意力并提供丰富的视觉体验。 一、jQuery轮播原理 轮播切换效果的...

    DIV+CSS实现横向无缝图片滚动效果

    4. **transform**:使用`translateX()`函数平移图片,实现滚动效果。 5. **transition**:定义元素从一种样式变换到另一种样式的速度,用于创建平滑的滚动动画。 接下来,我们可能还需要一个JavaScript(或jQuery)...

    Android RecyclerView横向滑动+自动轮播

    在很多场景下,我们可能需要实现RecyclerView的横向滑动,比如创建一个图片轮播器或横向滚动的菜单。这个“Android RecyclerView横向滑动+自动轮播”的Demo就是针对这种需求的一个优秀示例。 首先,我们要理解...

    横向滚动轮播

    横向滚动轮播是一种常见的网页设计元素,用于展示一系列图片或内容,用户可以通过左右滑动来浏览。这种设计在产品展示、新闻更新、图片画廊等领域非常常见,它为用户提供了一种直观且互动的方式来查看信息。 在实现...

    ios-BHInfiniteScrollView 横向 垂直 滚动 轮播图.zip

    在iOS开发中,轮播图(也称为无限滚动视图)是一种常见的用户界面元素,用于展示多张图片或内容,并自动进行循环滚动,通常用于广告、推荐内容或展示多个选项。`ios-BHInfiniteScrollView` 是一个专为iOS设计的高效...

    swift-LPBannerView使用collectionView实现的无限循环滚动轮播图

    Swift中的LPBannerView是一个基于UICollectionView实现的无限循环滚动轮播图组件。这个组件的主要特点是它的灵活性和易用性,能够支持横向和竖向滚动,并且可以添加图片和文字介绍,适用于各种界面展示需求。 首先...

    vue实现轮播图(滚动切换,无缝切换,自动切换,循环无回滚等)

    在Vue.js框架中实现轮播图功能,是一个常见的前端任务,尤其对于网页设计和用户体验至关重要。Vue轮播图可以提供动态、吸引人的展示方式,包括滚动切换、无缝切换、自动切换、循环无回滚以及暂停滚动等效果。下面将...

    aso.net 下图片横行滚动的简单实现

    在本篇文章中,我们将深入探讨如何在ASP.NET中实现图片横行滚动的简单方法。这种方法主要依靠DATALIST控件从数据库中获取最新图片链接地址,并通过MARQUEE控件来实现图片的滚动效果。 ### 一、DATALIST控件的妙用 ...

    JS实现5张图片轮播效果

    【JS实现5张图片轮播效果】是一种常见的网页动态效果,用于展示一组图片并自动进行切换,提升用户体验。在这个项目中,我们有以下几个关键知识点: 1. **JavaScript基础**:JavaScript是网页动态效果的主要实现语言...

    支持移动端的jQuery滑动条拖动横向图片滚动特效

    在本文中,我们将深入探讨如何实现一个支持移动端的jQuery滑动条拖动横向图片滚动特效。这个功能是通过使用jQuery插件mCustomScrollbar来完成的,它为网站提供了丰富的自定义滚动条效果,并且能够适应各种设备,包括...

    javascript 实现图片横向滚动

    这是网站里常用的技术,可以作为模板使用,使本人自己设计,页面部分完全采用div块实现,可以作为标准模板,后面附有注释,结合了专业的css技术与javascript技术

    jQuery手机移动端图片横向滚动效果

    在移动设备上,为了优化用户体验,常常需要实现图片的横向滚动效果。这通常是通过JavaScript库,尤其是jQuery来实现的,因为它提供了丰富的API和强大的DOM操作功能。本教程将深入探讨如何利用jQuery创建手机移动端的...

    驱动网站\腾讯网横向滚动轮播鼠标经过图片显示标题特效

    国外的绿色软件,打开直接用,点击x或者y后,方向马上改变,随机自启动后,对于自制的轨迹球键鼠来说,是个福音,用大品牌优质算法的键鼠,改装成轨迹球键鼠后,能达到生产力级别的键鼠。

    js实现横向滚动图片+加速滚动功能

    在网页设计中,动态效果是吸引用户注意力的重要手段之一,其中横向滚动图片是常见的展示方式。本主题将探讨如何利用JavaScript实现一个具有无缝隙滚动和翻页加速功能的图片滚动效果。 首先,我们需要理解“无缝隙...

Global site tag (gtag.js) - Google Analytics