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

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

    博客分类：
  • .net
.netXHTMLHTMLCC++ 
阅读更多
图片横向滚动（轮播） 
<%@ 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
踩
分享到：
| My97 DatePicker 4.2 正式版 js日历
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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实现的无限循环滚动轮播图组件。这个组件的主要特点是它的灵活性和易用性，能够支持横向和竖向滚动，并且可以添加图片和文字介绍，适用于各种界面展示需求。 首先...

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

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

    vue实现轮播图（滚动切换，无缝切换，自动切换，循环无回滚等）

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

    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实现一个具有无缝隙滚动和翻页加速功能的图片滚动效果。 首先，我们需要理解“无缝隙...

Magicbox
Global site tag (gtag.js) - Google Analytics