- 浏览: 207062 次
- 性别:
- 来自: 云南
文章分类
最新评论
-
naily:
不错 很稳定
jquery下拉菜单 -
hautbbs:
有没有在浏览器中查看的快捷键啊?每次感觉到这里的操作很繁琐啊! ...
VS2010版快捷键(转载) -
a535114641:
挺好用的 谢谢LZ
JQuery实现文本框自动补全(修改版) -
wgbbiao:
不支持firefox
JQuery实现文本框自动补全(修改版) -
bengxia:
Ctrl+F6: 生成当前项目 ==> Shift+F6 ...
VS2010版快捷键(转载)
图片横向滚动(轮播)
图片的竖直滚动(轮播)
<%@ 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>
- 图片轮播.rar (75.5 KB)
- 下载次数: 54
发表评论
-
telerik 2011 q2全系列, 开发版+源代码,无需序列号
2012-03-29 09:25 1841telerik 2011 q2全系列, 开发版+源代码,无需序 ... -
正则表达式的学习与小结
2011-12-15 11:47 1152收藏自:http://blog.csdn.net/sunboy ... -
.NET DataTable
2011-05-19 10:14 1313/// <summary> ... -
常见的数字验证正则表达式整理(转载)
2010-12-03 17:37 923转自:http://kingoa.net/WEBPROGRAM ... -
C#winform程序,代码修改app.config的结果保存(转载)
2010-11-19 11:18 3818通过Properties.Settings用代码形式读写app ... -
C#正则表达式判断输入日期格式是否正确(转载)
2010-11-18 11:36 1920/// <summary> ... -
如何在HTML代码中去掉文本框出现的历史纪录
2010-09-09 17:13 1637在HTML代码INPUT文本框里加一个属性: < ... -
.Net控件Telerik全套下载:Telerik Controls 2010 Q2 (附加DLL文件+源码)
2010-07-22 14:25 5870Telerik专注于微软.Net平台的表示层与内容管理控件。 ... -
彻底解决刷新重复提交问题,你还在用Response.Redirect吗?
2010-07-20 14:04 1007以前也研究过,始终没找到好的办法,看了微软Msdn上的解决方案 ... -
.NET中操作Excel
2010-07-20 13:56 1000GridView导出Excel研究 http://www.cn ... -
让C#写的WINFORM程序脱离框架运行
2010-04-06 09:39 1906利用飞信的框架 1、把飞信安装目录下的VMDotNet文件夹 ... -
ASP.NET中CKEditor3.2和CKFinder1.43的配置和使用!
2010-03-17 11:08 3092通过在网上搜寻资料终于把CKEditor3.2和 CKFind ... -
ASP.NET中FCKEDITOR在线编辑器的用法
2010-03-03 11:29 1584你可以将FCKEDITOR放置到任何文件夹,默认情况下,将其放 ... -
ASP.NET生成高质量缩略图通用函数(VB.NET、c#代码)
2010-03-03 11:22 1667public static void MakeTh ... -
ASP.NET中获取客户端的IP地址
2010-02-05 10:31 1908ASP.NET中获取客户端的IP地址的方法: 方法一: Req ... -
.NET中关于显示星期几的问题
2009-12-31 20:02 1798今天做项目是用到显示当前日期是星期几,上网找了一下,找到如下几 ... -
新闻发布系统(三层架构,工厂模式)
2009-11-11 23:30 1529看了牛腩的新闻发布系统视频后,自己学着做了一个,并在此基础上加 ... -
KindEditor HTML在线编辑器
2009-11-11 23:05 1049一款比较好用的在线编辑器,经常会用到,特此记录一下。 http ... -
ASP.Net中防止页面刷新重复提交的几种方法
2009-09-15 22:31 33991、也是最简单和最常用的办法,就是使用转向页面语句,分两种: ... -
.NET设计模式系列文章
2009-09-15 13:22 862最近正在学习设计模式,看到此文章写的挺好,特此记录下来 呵呵 ...
相关推荐
总结来说,实现"jQuery商品图片横向自动滚动轮播代码"涉及到前端开发的核心技术,包括jQuery的使用、DOM操作、CSS样式设计、JavaScript事件处理和动画效果。这些知识点对于创建动态、交互性强的网页至关重要,也是...
本教程将深入探讨如何使用jQuery实现一款带标题和进度条的图片横向滚动轮播效果,以及涉及到的相关技术。 首先,`index.html`是网页的主体文件,它包含了HTML结构,包括轮播容器、图片元素、控制按钮(左右箭头)...
2. **宽度与溢出**:容器的宽度应该小于所有图片总宽度,以便图片可以超出容器并实现滚动。同时,设置`overflow-x`为`hidden`,隐藏超出容器的部分。 3. **动画**:使用`@keyframes`定义一个从右向左的动画,改变...
【标题】:“网站\腾讯网横向滚动轮播鼠标经过图片显示标题特效”指的是在网站设计中,采用的一种常见用户体验优化技术。这种技术通常应用于新闻、产品展示或广告区域,通过横向滚动的方式展示多张图片,并在鼠标...
在“jQuery图片横向滚动轮播代码”中,核心是利用jQuery的动画功能和定时器来实现图片的自动切换。以下是一些关键知识点: 1. **HTML结构**:轮播的基础是HTML页面中的图片容器,通常使用`<ul>`和`<li>`元素来存放...
本项目“jquery层叠图片横向平滑移动轮播切换效果”是利用jQuery实现的一种动态图片展示方式,通常被用于网站的首页或产品展示区域,以吸引用户的注意力并提供丰富的视觉体验。 一、jQuery轮播原理 轮播切换效果的...
4. **transform**:使用`translateX()`函数平移图片,实现滚动效果。 5. **transition**:定义元素从一种样式变换到另一种样式的速度,用于创建平滑的滚动动画。 接下来,我们可能还需要一个JavaScript(或jQuery)...
在很多场景下,我们可能需要实现RecyclerView的横向滑动,比如创建一个图片轮播器或横向滚动的菜单。这个“Android RecyclerView横向滑动+自动轮播”的Demo就是针对这种需求的一个优秀示例。 首先,我们要理解...
横向滚动轮播是一种常见的网页设计元素,用于展示一系列图片或内容,用户可以通过左右滑动来浏览。这种设计在产品展示、新闻更新、图片画廊等领域非常常见,它为用户提供了一种直观且互动的方式来查看信息。 在实现...
在iOS开发中,轮播图(也称为无限滚动视图)是一种常见的用户界面元素,用于展示多张图片或内容,并自动进行循环滚动,通常用于广告、推荐内容或展示多个选项。`ios-BHInfiniteScrollView` 是一个专为iOS设计的高效...
Swift中的LPBannerView是一个基于UICollectionView实现的无限循环滚动轮播图组件。这个组件的主要特点是它的灵活性和易用性,能够支持横向和竖向滚动,并且可以添加图片和文字介绍,适用于各种界面展示需求。 首先...
在本篇文章中,我们将深入探讨如何在ASP.NET中实现图片横行滚动的简单方法。这种方法主要依靠DATALIST控件从数据库中获取最新图片链接地址,并通过MARQUEE控件来实现图片的滚动效果。 ### 一、DATALIST控件的妙用 ...
在Vue.js框架中实现轮播图功能,是一个常见的前端任务,尤其对于网页设计和用户体验至关重要。Vue轮播图可以提供动态、吸引人的展示方式,包括滚动切换、无缝切换、自动切换、循环无回滚以及暂停滚动等效果。下面将...
【JS实现5张图片轮播效果】是一种常见的网页动态效果,用于展示一组图片并自动进行切换,提升用户体验。在这个项目中,我们有以下几个关键知识点: 1. **JavaScript基础**:JavaScript是网页动态效果的主要实现语言...
在本文中,我们将深入探讨如何实现一个支持移动端的jQuery滑动条拖动横向图片滚动特效。这个功能是通过使用jQuery插件mCustomScrollbar来完成的,它为网站提供了丰富的自定义滚动条效果,并且能够适应各种设备,包括...
这是网站里常用的技术,可以作为模板使用,使本人自己设计,页面部分完全采用div块实现,可以作为标准模板,后面附有注释,结合了专业的css技术与javascript技术
在移动设备上,为了优化用户体验,常常需要实现图片的横向滚动效果。这通常是通过JavaScript库,尤其是jQuery来实现的,因为它提供了丰富的API和强大的DOM操作功能。本教程将深入探讨如何利用jQuery创建手机移动端的...
国外的绿色软件,打开直接用,点击x或者y后,方向马上改变,随机自启动后,对于自制的轨迹球键鼠来说,是个福音,用大品牌优质算法的键鼠,改装成轨迹球键鼠后,能达到生产力级别的键鼠。
在网页设计中,动态效果是吸引用户注意力的重要手段之一,其中横向滚动图片是常见的展示方式。本主题将探讨如何利用JavaScript实现一个具有无缝隙滚动和翻页加速功能的图片滚动效果。 首先,我们需要理解“无缝隙...