jquery 写的图片左右连续滚动
<style type="text/css"> *{ margin:0; padding:0;} body { font:12px/1.8 Arial; color:#666;} h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;} .go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px; margin-top:20px; font-size:40px;} .wrap{border:1px dashed #ccc; background:#f8f8f8; padding:20px;} #slide{overflow:hidden;width:900px;margin:100px auto;} ul{list-style:none;} li{float:left;} .slideul1{width:3999px;} </style> <script type="text/javascript" src="/jquery-1.4.4.min.js"></script> <body> <h1 class="tit-h1">jquery图片左右连续滚动</h1> <div class="wrap"> <div id="slide"> <ul class="slideul1"> <li class="slideli1"> <ul class="slideul2"> <li><img src="data:images/1.jpg"/></li> <li><img src="data:images/2.jpg"/></li> <li><img src="data:images/3.jpg"/></li> <li><img src="data:images/4.jpg"/></li> <li><img src="data:images/5.jpg"/></li> </ul> <li class="slideli2"></li> </ul> </div> <script type="text/javascript"> var _speed=30;
var _slide = $("#slide");
var _slideli1 = $(".slideli1");
var _slideli2 = $(".slideli2");
_slideli2.html(_slideli1.html());
function Marquee(){
if(_slide.scrollLeft() >= _slideli1.width())
_slide.scrollLeft(0);
else{ _slide.scrollLeft(_slide.scrollLeft()+1);
}
}
$(function(){
//两秒后调用
var sliding=setInterval(Marquee,_speed) _slide.hover(function() {
//鼠标移动DIV上停止
clearInterval(sliding);
},function(){
//离开继续调用
sliding=setInterval(Marquee,_speed); });
});
</script>
</div>
jquery 写的图片左右连续滚动的更多相关文章
- javascript小记五则:用JS写一个图片左右自由滚动的“跑马灯”效果
之前看了很多百度搜索出的东西,十个有九个是不能实用的,个个讲的都不详细,今天详细给大家讲解下关于这个图片“跑马灯”滚动效果,源码如下: <!DOCTYPE html PUBLIC "- ...
- 用jquery写出图片自动轮播效果
相关代码如下,只要把代码粘贴进编辑器,修改图片路径,即可看到效果. 1.html部分 <body> <ul class="banner"> < ...
- 用jquery写的图片懒加载
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- jquery连续滚动
本文非常详细的讲解在jquery里实现图片或文字的连续循环滚动的方法. 连续循环滚动是我们在网页开发中经常要用到的特效,在jquery里,我们要实现文字或图片的连续循环滚动是非常简单的.出处:http ...
- [jQuery插件]手写一个图片懒加载实现
教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...
- 图片左右间隔滚动Jquery特效
图片左右间隔滚动Jquery特效,支持自动播放的开启与关闭,同时支持左右箭头的点击播放,具体处理程序如下 <!DOCTYPE html > <html> <head> ...
- Jquery实现图片左右自动滚动
图片左右滚动的效果想必大家都有见到过吧,其实很简单.在本文将为大家介绍下使用Jquery是如何实现图片左右自动滚动的. 代码如下:<!DOCTYPE HTML> <html> ...
- jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...
- jquery 图片自动无缝滚动
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...
随机推荐
- jQuery插件 -- UI插件Tabs Widget 1.10
最近将tabs(标签页)整合到Admin LTE( 一个完全响应式管理模板,基于Bootstrap3的框架.)中使用.过程中走了不少弯路,原因是没有注意版本问题,jquery ui tabs 每次升级 ...
- 二:SpringAOP
一:AOP 面向切面编程思想 横向重复,纵向抽取 |- filter中 |- 动态代理 |- interceptor中 二:动态代理 1.通过动态代理可以体现aop思想 2.对目标对象中的方法进行增强 ...
- jQuery知识点学习整理
零.jQuery中操作css的方法 1.$("p").css("background-color"); 返回首个匹配元素的background-color的值. ...
- elastic job 动态设置定时任务
1. 版本 <!-- import elastic-job lite core --> <dependency> <groupId>com.dangdang< ...
- 关于display:inline-block布局导致错位问题分析
移动端设计稿需求是这样的,如下图: 未知的几个头像从左至右并行居中排列. 一般可能直接使用float,但是设计图要求头像排列始终是居中的,于是想到要让它们成为行内元素,然后可使用的方法有flex bo ...
- Python入门-初始函数
今天让我们来初步认识一个在python中非常重要的组成部分:函数 首先,让我们来幻想这样一个场景: 比如说我们现在想要通过社交软件约一个妹子,步骤都有什么? print('打开手机 ') print( ...
- Java中由Calendar类获取的月、天和小时的简单处理
在Java中,Calendar是日期处理的一个重要的类.但是,我们使用Calendar获取的月份,天,小时等可能需要进行简单的处理才能满足我们的需要.比如,月份范围是0-11,而我们可能需要的是1-1 ...
- YoLo 实践(1)
目录 YoLo 实践(1) 目标: 实施方法: Step 0. 测试项目是否可以正常运行 运行效果图 使用VOC数据结构训练模型 Step1: 生成统一格式的标注文件和类别文件 Step2: 加载预训 ...
- 第四次作业-第一次scrum冲刺
团队成员 周斌 舒 溢 许嘉荣 唐 浩 黄欣欣 1.第一次冲刺任务安排 对Github上的HUSTOJ开源项目进行Fork,搭建基本环境 2.用户需求 ①基本功能显示在首页 ②能够提交题目并判题,并对 ...
- Android Animation 知识点速记备忘思维导图
备注的大段文本,无法在图片中体现, 思维导图源文件放在附件中.使用 Xmind 8 制作. 附件:AndroidAnimation-xmind.zip