JQuery 滚动轮播
css:
*{margin: 0;padding: 0;}
body{font-size: 12px;line-height: 24px;text-algin: center; }
a{color: #fff;text-decoration: none;}
a:hover{color: #ff0000;}
.banner{width: 400px;height: 50px;overflow: hidden;position: relative;border: 1px solid #ccc;box-shadow: 2px 2px 10px #CD919E;background-image: -moz-linear-gradient(top, #f05e6f, #c9394a);background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/}
.banner ol{ position: absolute;left: 30px;list-style: none;}
.banner ol li{font-size: 12px;line-height: 24px;overflow: hidden;}
JQ:
$(function(){
var index=0;
var timer;
var ols=$('#content ol');
var liLen=ols.find('li').length;//获取所有的li数量
if (liLen>1) {
$('#content').hover(function(){
clearInterval(timer); // 停止滚动
},function(){
timer=setInterval(function(){
var lis=ols.find('li:first');
var lihei=lis.height();//获取li高度
//计算li位置,每次向上滚动一个li的高度,向下滚动-lihei改成lihei
lis.animate({marginTop:-lihei+'px'},500,function(){
//滚动完成以后置为ol末尾
lis.css('marginTop',0).appendTo(ols);
});
},3000);
}).trigger('mouseleave');
}
});
html:
<div id="content" class="banner">
<ol>
<li><a href="#">熊猫酒仙:火焰呼吸,醉酒云雾,醉拳,火土风暴↑↑↑</a></li>
<li><a href="#">牛头酋长:冲击波,战争践踏,耐久光环,重生↓↓↓</a></li>
<li><a href="#">暗影猎手:治疗波,妖术,毒蛇守卫,终极巫毒术↑↑↑</a></li>
<li><a href="#">末日使者:吞噬,焦土,死亡,末日↓↓↓</a></li>
</ol>
</div>
JQuery 滚动轮播的更多相关文章
- jQuery仿淘宝图片无缝滚动轮播
自己前天,也就是1月8日的时候早上自己写了一个图片滚动轮播(基于jQuery). 其实几个月以前就有朋友问过我怎么做出和淘宝上面一样的滚动轮播,一直到现在也没有真正的写好,这次写得差不多了. 但是还有 ...
- 3、js无缝滚动轮播
另一个无缝滚动轮播,带暂停,由于js是异步,用C面向过程的思想开始会很怪异很怪异,因为当你定时器里面需要执行的函数时间比较长或是有一段延时时,异步的代码会完全不同,但习惯就好了. 这个代码有几个问题, ...
- Jquery+css实现图片无缝滚动轮播
Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...
- jQuery自动轮播图片焦点图
在线演示 本地下载
- JS实现文字向上无缝滚动轮播
效果图: 全部代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 前端福利之jQuery文字轮播特效(转)
闲谈:离开学校那座象牙塔已经也有大半年的事件了,生活中不再充满了茫然只有忙碌.连续加班加点大半个月,做的活动项目终于算是告一段落了,而今天也将是考验其真正价值的时候,现在将这次开发中遇到的问题做一下总 ...
- 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码
css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...
- jquery特效(4)—轮播图②(定时自动轮播)
周末出去逛完街,就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示 ...
- jQuery实现选项联动轮播
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Hybrid App技术批量制作APP应用与跨平台解决方案
前言 简单的聊一聊我开发了4年之久的Hybrid App(混合模式移动应用)平台开发,目前一直在持续开发与维护,支持无编程快速开发! 其本意也不是要吹捧前端有多么强大,只是用自己的实际项目阐述下对于前 ...
- 详解Javascript中正则表达式的使用
正则表达式用来处理字符串特别好用,在JavaScript中能用到正则表达式的地方有很多,本文对正则表达式基础知识和Javascript中正则表达式的使用做一个总结. 第一部分简单列举了正则表达式在Ja ...
- 从零开始学 Java - Spring 集成 ActiveMQ 配置(一)
你家小区下面有没有快递柜 近两年来,我们收取快递的方式好像变了,变得我们其实并不需要见到快递小哥也能拿到自己的快递了.对,我说的就是类似快递柜.菜鸟驿站这类的代收点的出现,把我们原来快递小哥必须拿着快 ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- IL接口和类的属性
上一篇文章学习了IL的入门,接下来我们再通过两个例子来了解下类的属性.构造函数以及接口的使用 一.类的属性.构造函数 1.先看下我们要构建的类的C#代码,然后再进行IL的实现,示例代码如下: [Ser ...
- ASP.NET Core WebListener 服务器
原文地址:WebListener server for ASP.NET Core By Tom Dykstra, Chris Ross WebListener是一个只能运行在Windows上的ASP. ...
- ASP.Net MVC——DotNetZip简单使用,解决文件压缩问题。
准备工作: 在vs工具栏中找到NuGet 下载DotNetZip 现在就可以使用DotNetZip强大的类库了,在这里我给出一些简单的使用. public ActionResult Export() ...
- 从网上找的 visual studio 的各个版本下载地址,vs2010/vs2012/vs2013带注册码
从网上找的 visual studio 的各个版本下载地址,很全,从 6.0 一直 到 vs2013,要的拿去吧... Microsoft Visual Studio 6.0 下载:英文版360云盘下 ...
- windows上如何搭建Git Server
Git在版本控制方面,相比与SVN有更多的灵活性,对于开源的项目,我们可以托管到Github上面,非常方便,但是闭源的项目就会收取昂贵的费用.那么私有项目,如何用Git进行代码版本控制呢?我们可以自己 ...
- ES6笔记(一):ES6所改良的javascript“缺陷”
块级作用域 ES5没有块级作用域,只有全局作用域和函数作用域,由于这一点,变量的作用域甚广,所以一进入函数就要马上将它创建出来.这就造成了所谓的变量提升. ES5的"变量提升"这一 ...