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 ...
随机推荐
- wms-ssv数据字典
--------------------------------------------以下,托盘-- dbo.Container --托盘 , "托盘状态", "Con ...
- AngularJS中的动画实现
AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script ...
- .net EF框架-实现增删改查
声明一个EF上下文对象 Model dbContext = new Model(); 添加操作(向表中插入一条数据) //声明一个表的实体 Contact contact = new Contact( ...
- linux系统mysql主主复制(双主复制)
一.简介 在上一篇的主从复制中:http://www.cnblogs.com/lay2017/p/9043985.html 我们了解到,mysql通过master写日志,slave读取并执行日志内容从 ...
- 初步理解impress.js
1.认识impress.js impress.js 采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具). 现在普通开发者可以利用 impress.js 自己 ...
- mysql case when的使用
SELECT (CASE payType WHEN 1 THEN '微信' WHEN 2 THEN '支付宝' ELSE '余额' END) as type, count(payType) FROM ...
- 11.1NOIP模拟赛解题报告
心路历程 预计得分:\(100 + 100 + 50\) 实际得分:\(100 + 100 + 50\) 感觉老师找的题有点水呀. 上来看T1,woc?裸的等比数列求和?然而我不会公式呀..感觉要凉 ...
- MYSQL数据库索引类型及使用
MYSQL数据库索引类型包括普通索引,唯一索引,主键索引与组合索引,这里对这些索引的做一些简单描述: (1)普通索引 这是最基本的MySQL数据库索引,它没有任何限制.它有以下几种创建方式: 创建索引 ...
- 新项目放到jenkins步骤
1配置playbook.xml,src和dest需要和运维确认 2项目内config 文件夹下index文件内,build对象内assetsPublicPath属性是否需要更改. playbo ...
- ArcEngnine中IHookHelper的用法
一.IHookHelper 主要在用在自定义类型于AE带的的ICommand或ITool等 1.实例化IHookHelper 对象:IHookHelper m_hookHelper = new Hoo ...