精华内容
参与话题
问答
  • JS实现图片自动滚动(图片横向滚动)

    万次阅读 多人点赞 2018-11-13 15:55:57
    实现的效果就是 一排图片自动横向滚动,鼠标指向的时候,暂定滚动,鼠标离开,继续滚动 首先看下html代码:随便加入四张图片 <div id="div1"> <ul> <li><img src="img/logo-black.png" ...

    文章内容请戳,谢谢! http://zhangzeshan.top

    展开全文
  • jquery图片无缝滚动代码左右上下无缝滚动图片 *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} /* scrollleft */ .scrollleft{...
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery图片无缝滚动代码左右上下无缝滚动图片</title>
    <meta name="description" content="jquery图片无缝滚动插件制作左右无缝滚动图片和上下无缝滚动图片,一款简单的jQuery无缝滚动代码。" />
    <style type="text/css">
    *{margin:0;padding:0;list-style-type:none;}
    a,img{border:0;}
    body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
    /* scrollleft */
    .scrollleft{width:680px;padding:5px 20px 0px 20px;margin:20px auto;}
    .scrollleft li{float:left;margin-right:7px;display:inline;width:158px;text-align:center;line-height:19px}
    .scrollleft img{width:136px;height:100px;padding:10px;border:solid 1px #ddd;}
    /* scrolltop */
    .scrolltop{width:158px;height:438px;overflow:hidden;margin:20px auto;}
    .scrolltop li{height:156px;overflow:hidden;text-align:center;line-height:19px}
    .scrolltop img{width:136px;height:100px;padding:10px;border:solid 1px #ddd;}
    </style>
    </head>
    <body>
    <div class="scrollleft">
    	<ul>
    		<li>
    			<a href="#"><img width="136" height="100" alt="卷板" src="images/123a.jpg"/></a>
    		</li>
    		<li>
    			<a href="#"><img width="136" height="100" alt="钢板" src="images/2146.jpg"/></a>
    		</li>
    		<li>
    			<a href="#"><img width="136" height="100" alt="卷板" src="images/as12.jpg"/></a>
    		</li>
    	</ul>
    </div>
    
    <div class="scrolltop">
    	<ul>
    		<li>
    			<a href="#"><img width="136" height="100" alt="卷板" src="images/123a.jpg"/></a>
    			<span>卷板</span>
    		</li>
    		<li>
    			<a href="#"><img width="136" height="100" alt="钢板" src="images/2146.jpg"/></a>
    			<span>钢板</span>
    		</li>
    		<li>
    			<a href="#"><img width="136" height="100" alt="卷板" src="images/as12.jpg"/></a>
    			<span>卷板</span>
    		</li>
    	</ul>
    </div>
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    //图片滚动 调用方法 imgscroll({speed: 30,amount: 1,dir: "up"});
    $.fn.imgscroll = function(o){
        var defaults = {
            speed: 40,
            amount: 0,
            width: 1,
            dir: "left"
        };
        o = $.extend(defaults, o);
        return this.each(function(){
            var _li = $("li", this);
            _li.parent().parent().css({overflow: "hidden", position: "relative"}); //div
            _li.parent().css({margin: "0", padding: "0", overflow: "hidden", position: "relative", "list-style": "none"}); //ul
            _li.css({position: "relative", overflow: "hidden"}); //li
            if(o.dir == "left") _li.css({float: "left"});
            //初始大小
            var _li_size = 0;
            for(var i=0; i<_li.size(); i++)
                _li_size += o.dir == "left" ? _li.eq(i).outerWidth(true) : _li.eq(i).outerHeight(true);
            //循环所需要的元素
            if(o.dir == "left") _li.parent().css({width: (_li_size*3)+"px"});
            _li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone());
            _li = $("li", this);
            //滚动
            var _li_scroll = 0;
            function goto(){
                _li_scroll += o.width;
                if(_li_scroll > _li_size)
                {
                    _li_scroll = 0;
                    _li.parent().css(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll });
                    _li_scroll += o.width;
                }
                    _li.parent().animate(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }, o.amount);
            }
            //开始
            var move = setInterval(function(){ goto(); }, o.speed);
            _li.parent().hover(function(){
                clearInterval(move);
            },function(){
                clearInterval(move);
                move = setInterval(function(){ goto(); }, o.speed);
            });
        });
    };
    
    $(document).ready(function(){
    	$(".scrollleft").imgscroll({
    		speed: 40,    //图片滚动速度
    		amount: 0,    //图片滚动过渡时间
    		width: 1,     //图片滚动步数
    		dir: "left"   // "left" 或 "up" 向左或向上滚动
    	});
    
    	$(".scrolltop").imgscroll({
    		speed: 40,    //图片滚动速度
    		amount: 0,    //图片滚动过渡时间
    		width: 1,     //图片滚动步数
    		dir: "up"   // "left" 或 "up" 向左或向上滚动
    	});
    });
    </script>
    </body>
    </html>
    

    展开全文
  • dedecms横向滚动图片

    千次阅读 2011-08-09 14:37:02
    第一步:找到图文资讯代码的位置 将 代码插入{dede:arclist row=5 titlelen=20 orderby=pubdate type='image.' imgwidth='152' imgheight='98' typeid='11' } 的前面
    第一步:找到图文资讯代码的位置

    将<marquee onMouseOver="this.stop()" onMouseOut="this.start()" align=center direction=right scrollamount=1.5 scrolldelay=3 valign=middle behavior="alternate"> 代码插入{dede:arclist row=5 titlelen=20 orderby=pubdate type='image.' imgwidth='152' imgheight='98' typeid='11' } 的前面



    <marquee onMouseOver="this.stop()" onMouseOut="this.start()" align=center direction=right scrollamount=1.5 scrolldelay=3 valign=middle behavior="alternate"> 
    {dede:arclist row=5 titlelen=20 orderby=pubdate type='image.' imgwidth='152' imgheight='98' typeid='11' } 

    第二步:
    将</marquee>插入{/dede:arclist}的后面即可实现滚动

    即:</marquee>{/dede:arclist}

    滚动的主要参数设置:

    align:是设定活动字幕的位置,除了居左、居中、居右三种位置外,又增加靠上(top)和靠下(bottom)两种位置。
    Direction:用于设定活动字幕的滚动方向是向左(left)、向右(right)、向上(up)、向下(down)。
    Behavior:用于设定滚动的方式,主要由三种方式:
    behavior="scroll"表示由一端滚动到另一端;默认为此项
    behavior="slide":表示由一端快速滑动到另一端,且不再重复;
    behavior="alternate"表示在两端之间来回滚动。
    Height:用于设定滚动字幕的高度。
    Width:则设定滚动字幕的宽度。
    Hspace和vspace:分别用于设定滚动字幕的左右边框和上下边框的宽度.
    Scrollamount:用于设定活动字幕的滚动距离。数值越小,滚动的速度就越快。
    scrolldelay:用于设定滚动两次之间的延迟时间,数值越小,间隔就越小。
    Loop:用于设定滚动的次数,当loop=-1表示一直滚动下去,直到页面更新。
    其中默认情况是向左滚动无限次,字幕高度是文本高度;
    滚动觉得不错的朋友记得回帖帮我顶一下!
    展开全文
  • 我在网上看到的网站上面图片滚动条上下滚动滚动滚动图片不会出现一闪闪的情况, 好像定在那里一样,而我写的,上下滚动时却会出现一闪一闪的情况,这是怎么回事?这是我 的代码 ![图片说明]...
  • html图片左右无缝循环滚动示例

    万次阅读 2016-11-28 15:17:02
    首先,最外层的宽高要给个固定值,然后给个overflow: hidden;,放不下的图片隐藏。...达到循环滚动的效果。右移也是同理。下面是代码实现和demo<!DOCTYPE html> <html> <head> <meta charse

    首先,最外层的宽高要给个固定值,然后给个overflow: hidden;,放不下的图片隐藏。
    原理:(以左方向为例)先向左移动一个图片的宽度,此时第一个图片已经看不见了,这个时候将第一个标签元素克隆后追加到末尾,然后将第一个元素移除。达到循环滚动的效果。右移也是同理。下面是代码实现和demo

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8" />
    		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    		<title></title>
    
    		<script type="text/javascript" src="js/jquery.min.js"></script>
    		<script type="text/javascript" src="js/center.js"></script>
    
    	</head>
    
    	<style type="text/css">
    		.img_content {
    			width: 600px;
    			margin: 0;
    			padding: 0;
    			height: 200px;
    			position: absolute;
    			overflow: hidden;
    		}
    		
    		.img_content ul {
    			list-style: none;
    			margin: 0;
    			padding: 0;
    			position: absolute;
    			width: 1000px;
    		}
    		
    		.img_content ul li {
    			float: left;
    			margin: 0;
    			padding: 0;
    		}
    		
    		.img_content ul li img {
    			width: 200px;
    			height: 200px;
    		}
    		
    		button {
    			width: 100px;
    			height: 40px;
    			border-radius: 5px;
    			background: cornflowerblue;
    			color: white;
    			border: 0;
    		}
    	</style>
    
    	<body>
    
    		<div class="img_content">
    
    			<ul>
    				<li><img src="img/1.jpg" /> </li>
    				<li><img src="img/2.jpg" /> </li>
    				<li><img src="img/3.jpg" /> </li>
    				<li><img src="img/4.jpg" /> </li>
    				<li><img src="img/5.jpg" /> </li>
    				<li><img src="img/6.jpg" /> </li>
    				<li><img src="img/7.jpg" /> </li>
    				<li><img src="img/8.jpg" /> </li>
    
    			</ul>
    		</div>
    
    		<button id="left">左</button>
    		<button id="right">右</button>
    		<button id="auto">自动切换</button>
    		<button id="stop">取消自动切换</button>
    
    		<script>
    			centerParent($('.img_content')[0]);
    
    			$('#left').click(function() {
    				scrollLeft();
    			});
    
    			$('#right').click(function() {
    				scrollRight();
    			});
    
    			/*向左滑动*/
    			function scrollLeft() {
    
    				/*先向左移动一个图片的宽度  移动后在末尾追加第一个元素 然后将第一个元素移除 */
    				$('ul').animate({
    					left: -200
    				}, 200, function() {
    					$('ul').append($('ul li:first').clone());
    					$('ul li:first').remove();
    				});
    
    				/*将left值置为0*/
    				$('ul').animate({
    					left: 0
    				}, 0);
    			}
    
    			/*向右滑动*/
    			function scrollRight() {
    				/*先向右移动一个图片的宽度  移动后把最后一个元素插入到头部 然后移除最后一个元素*/
    				$('ul').animate({
    					left: -200
    				}, 0, function() {
    					$('ul').prepend($('ul li:last').clone());
    					$('ul li:last').remove();
    				});
    
    				/*完成上面动作后将left置为0*/
    				$('ul').animate({
    					left: 0
    				}, 200);
    			}
    
    			var auto;
    			$('#auto').click(function() {
    				auto = setInterval(scrollLeft, 2000);
    			});
    
    			$('#stop').click(function() {
    				clearInterval(auto);
    			});
    		</script>
    
    	</body>
    
    </html>
    

    demo

    展开全文
  • Android高级图片滚动控件,编写3D版的图片轮播器

    万次阅读 多人点赞 2014-03-13 09:09:27
    最新我们公司的一款应用也加入了这个功能,并且在图片轮播的基础上还增加了三维立体的效果,但比较遗憾的是,整体效果并不理想,用户体验性比较糟糕。因此,我就花了点时间去编写了一个效果更好的3D图片轮播器,自我...
  • Qt实现滚动图片效果

    千次阅读 2016-04-11 11:00:12
    滚动图片效果 .h文件 #ifndef ROLLPICTURE_H #define ROLLPICTURE_H #include #include #include #include #include #include #include
  • 连续不间断滚动图片

    千次阅读 2012-05-31 18:38:36
     要实现滚动图片或文字,最简单的方法就是使用。但marquee是IE浏览器特有元素,虽然其他一些浏览器开始支持,但应该实现方式都不同,支持程度也不好,可能一些样式或js就会导致内容无法滚动,具体没研究过,有...
  • MUI滚动组件-scroll 横向滚动图片一半解决办法
  • PPT 中加 文本滚动条 图片滚动

    千次阅读 2012-03-27 20:52:25
    PPT 中加 文本滚动条  转自:http://jgp57.blog.163.com/blog/static/62801097201143144632143/ 让PPT2007幻灯片滚动起来 Word长文档可以滚动查看,Excel表格也可以随意上下拖动,而在PPT中,如果必须在...
  • dreamweaver中的滚动图片问题

    千次阅读 2008-04-29 21:42:00
    用具体属性以这段代码为例 此处输入滚动内容 direction表示滚动的方向,值可以是left,right,up,down,默认为leftbehavior表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动)loop...
  • selenium页面滚动图片元素定位

    千次阅读 2014-11-17 16:20:05
    页面中如果出现滚动图片该如何 问题解决建议的答案: css=img[src="http://img12.360buyimg.com/da/jfs/t589/13/396507220/60981/da180357/54655eddNcd53aeba.jpg"] 应该是这样的一个顺序 做自动化测试的时候...
  • 背景图片不跟随滚动滚动

    千次阅读 2018-06-28 13:51:45
    我们在做网页的时候,当背景是一张完整的图片,不动让其跟随滚动滚动,怎么办?下面详细讲解一下。CSS代码示例-背景颜色属性(background-color):&lt;html&gt; &lt;head&gt; &lt;title&gt;...
  • 简单的滚动图片跑马灯

    千次阅读 2012-10-22 23:56:38
    滚动图片 body, div { border: 0; margin: 0; padding: 0; } #outer { overflow: hidden; width: 400px; height: 200px; } #inner { height: 200px; width: 1800...
  • 有时在设计时,有些布局总需要动态加载内容、加载布局等。ListView能完成这个功能,但是大家都知道ListView是纵向的,也就是只能上下滑动,想要左右滑动很难做到。我研究了很长的时间,在网上找了很多相关的内容学习...
  • 网站首页滚动图片的后台管理

    千次阅读 2013-05-21 13:17:22
     言归正传传,我目前在做的网站,有一个新闻加图片滚动的 就是图上的这种效果,我相信大家怎么让图片自由切换及滚动就不用我说了,不会的可以自己去网上搜索,滚动广告条,有很多的。 那么如何
  • Axure中导航和滚动图片实例

    千次阅读 2015-09-12 16:16:40
    整合实例 # ... 在Axure中新建空白文件(快捷键 ctrl + n) 用矩形拉出导航条的长宽,填充好颜色。...用标签写出导航条上的导航项....设置鼠标悬停时,改变颜色....点击每个项目所在的标签 ,在属性中选择鼠标悬停时,设置字体...
  • Html,jsp页面滚动图片效果

    千次阅读 2014-12-08 09:28:56
    虹桥推荐商户 更多 if(shopServiceShaList!=null && shopServiceShaList.size()>0){ int shopVOCount = 0; for(ShopVO shopVO : shopServiceShaList){ if(shopVO!=null && shopVOCount ...%>
  • 所以各大平台一般会提供一些可滚动的视图来向用户展示数据。Android平台框架中为我们提供了诸如ListView、GirdView、ScrollView等滚动视图控件,这几个视图控件也是我们平常使用最多的。我下面介绍一下...
  • 简介在现在的一些App中常常见到图片轮播器,一般用于展示广告、新闻等数据,在iOS内并没有现成的控件直接实现这种功能,但是通过UIScrollView的允许分页设置,可以实现滚动轮播的功能。轮播原理UIScrollView对象有...
  • 页面图片自动滚动

    千次阅读 2018-08-28 19:58:24
    打开网页时,图片自动在循环切换,当想仔细查看某一张图片时,停止自动播放,左右提供手动切换按钮,图片也可添加 超链接; 代码为了方便没有外联 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;...
  • 以下代码,运行后,需要...1、单行滚动效果 无标题文档 ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li
  • HTML网页图片滚动代码

    万次阅读 多人点赞 2017-11-24 22:42:51
    &lt;!--下面是向上滚动代码--&gt; &lt;div id=butong_...height:100;...插入需要滚动图片"&gt; &lt;img src="插入需要滚动图片"&gt; &lt;img
  • 实现图片的轮番滚动图片在头部下面轮番滚动??????????急急急
  • 该属性用来定义背景图片是否随浏览器滑块的拖动而滚动,在背景图片滚动属性中,可以使用两个属性值,分别为scroll和fixed,  background-attachment: scroll | fixed;  *scroll: 背景图片随滑块的变化而滚动。 ...
  • 图片滚动从右向左滚动网页代码

    千次阅读 2015-06-16 14:21:20
    一下代码是从一个网站上面扒下来的,仅供参考,直接保存到html文件即可运行。
  • 使用jquery实现的漂亮的滚动图片

    千次阅读 2011-11-17 13:33:35
    应客户的要求实现一个滚动图片的效果,使用javascript+css从0开始还是有一定难度的。但是我们有万能的互联网,从网上找了一下,很多这样的列子,于是找了一个稍加修改就达到了客户的要求。 首先看一下效果图:   ...
  • 【html】【一个滚动图片的代码】

    千次阅读 2014-07-21 16:01:23
    SCROLLDELAY=1 border=0 direction=left scrolldelay=7 width=246 height=278 align=middle behavior="alternate">
  • 大家好,记得上次我带着大家一起实现了一个类似与淘宝客户端中带有的图片滚动播放器的效果,但是在做完了之后,发现忘了加入图片自动播放的功能(或许是我有意忘记加的.....),结果图片只能通过手指滑动来播放。...
  • ASP:循环滚动图片的代码+解释

    千次阅读 2014-05-25 20:01:20
    标签是很方便,但要实现不间断的滚动确比较麻烦. offsetWidth是指物体可见宽度 scrollLeft是指滚动滑块在滚动条上的位置 demo的overflow属性一般为hidden,我在这里用auto是为了方便你查看scrollLeft的状态, ...

空空如也

1 2 3 4 5 ... 20
收藏数 137,370
精华内容 54,948
关键字:

滚动