jquery 无缝轮播
新闻公告无缝轮播--demo
理解:向上移动一个li的高度+margin-bottom值,同时将ul第一个的li插入到ul的最后一个位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="./js/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
*{padding:0;margin:0;list-style:none;font-family:MicroSoft YaHei;}
.wrap{
margin:100px auto;
width:600px;
border:1px #eee solid;
padding:5px 10px;
overflow:hidden;
height:115px;
}
.wrap ul li{
height:40px;
line-height:40px;
border-bottom:1px #eee solid;
font-size:14px;
color:#868686;
}
</style>
</head>
<body>
<div id="auto-scroll" class="wrap">
<ul>
<li>前端技术,是一门进阶容易,精通很难的技术;</li>
<li>相比于后端技术,前端在国内应该是近5年内兴起的一门新技术新职位;</li>
<li>目前,在大学里尚未设有前端的专门专业;</li>
<li>许多前端大神都是自学成才或者是从后端转前端的;</li>
<li>前端工程师是最接近用户的"程序员",其实也未必是"程序员"!,因为前端不仅需要学习技术方面的;</li>
<li>也要懂得设计、用户体验、产品、程序运行流程、浏览器兼容性、http协议...等等;</li>
<li>这就需要前端工程师不仅要有系统的技术技能,也需要有宽广的视野...</li>
<li>广泛学习,留心观察,做一个有技术,有气质的前端吧~</li>
</ul>
</div>
<script>
function moveTo(obj) {
$(obj).find("ul:first").animate({
marginTop: "-40px"
}, 2000, function (){
// console.log($(this));
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
});
}
var timer;
$('#auto-scroll').hover(function(){
clearInterval(timer);
}, function(){
timer = setInterval('moveTo("#auto-scroll")', 3000) ;
}).trigger('mouseleave');
</script>
</body>
</html>
jquery 无缝轮播的更多相关文章
- 记一个jquery 无缝轮播的制作方法
接触前端也很久了,今天才发现,要做好一个轮播,其实有很多东西需要考虑进去,否则做出来的轮播效果并不好,下面我就来做一个轮播,是依赖jquery来写的 1.要做轮播,首先需要的是HTML的内容,css的 ...
- Jquery无缝轮播图的制作
轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...
- jQuery无缝轮播图思路详解-唯品会
效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap" ...
- jQuery插件slides实现无缝轮播图特效
初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...
- jQuery图片无缝轮播
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- js和jquery实现图片无缝轮播的不同写法
多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...
- js、jQuery实现文字上下无缝轮播、滚动效果
因项目需要实现消息通知上下无缝轮播的效果,所以写了一下,在这个分享出来,希望再次遇到此需求的道友,可以直接拷贝来用,节约一点不必要的时间. 原生JS版本 <!DOCTYPE html> & ...
- JQuery制作基础的无缝轮播与左右点击效果
在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...
- 网站banner无缝轮播
网站banner无缝轮播 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
随机推荐
- CentOS使用virt-what知道虚拟机的虚拟化技术
通常拿到一台vps,提供商可能不会告诉我们具体的虚拟化技术,对于CentOS的系统的vm,可以使用virt-what来知道. 如果提示virt-what命令找不到,则需要安装一下 yum instal ...
- Nginx对同一IP限速限流
limit_conn_zone是限制同一个IP的连接数,而一旦连接建立以后,客户端会通过这连接发送多次请求,那么limit_req_zone就是对请求的频率和速度进行限制. limit_conn_zo ...
- Linux设备驱动剖析之IIC(四)
558行,又重试2次. 560行,调用s3c24xx_i2c_doxfer函数: static int s3c24xx_i2c_doxfer(struct s3c24xx_i2c *i2c, stru ...
- HTML head 头标签(转)
HTML head 头部分的标签.元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性.移动互联网时代,head 头部结 ...
- Qt编写GIF录屏工具(开源)
在平时的写作过程中,经常需要将一些操作动作和效果图截图成gif格式,使得涵盖的信息更全面更生动,有时候可以将整个操作过程和运行效果录制成MP4,但是文件体积比较大,而且很多网站不便于上传,基本上都支持 ...
- C++文件流操作
#include <iostream> #include <fstream> #include<iostream> using namespace std; int ...
- 微信jssdk上传图片,一张一张的上传 和 一次性传好几张
//html模板 <div class="zhaopin_3_2"> <div id="bbb"></div> <im ...
- windous----快捷键
桌面操作: • 贴靠窗口:Win +左/右> Win +上/下>窗口可以变为1/4大小放置在屏幕4个角落• 切换窗口:Alt + Tab(不是新的,但任务切换界面改进)• 任务视图:Win ...
- C#学习之委托和事件
C#学习中,关于委托和事件的一些见解: 一.C语言中的函数指针 想要理解什么是委托,就要先理解函数指针的概念.所谓函数指针,就是指向函数的指针(等于没说-.-).比如我定义了两个函数square和cu ...
- Entity Framework DbSet<T>之Include方法与IQueryable<T>扩展方法Include的使用
Entity Framework使用Code First方式时,实体之间已经配置好关系,根据实际情况某些情况下需要同时获取导航属性,比如获取商品的同时需要获取分类属性(导航属性),或者基于优化方面考虑 ...