jquery无缝滚动效果实现
demo如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
html{background:white;color:black}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}body,button,input,select,textarea{font:12px \5b8b\4f53,arial,sans-serif}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}th{text-align:inherit}fieldset,img{border:0}iframe{display:block}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}a:focus,*:focus{outline:0}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both;overflow:hidden}.clearfix{zoom:1}.clear{clear:both;display:block;font-size:0;height:0;line-height:0;overflow:hidden}.hide{display:none}.block{display:block}.fl,.fr{display:inline}.fl{float:left}.fr{float:right}
.block{display:block;}
a:hover{text-decoration:none;}
.scroll_box{width:920px;position:relative;margin:0 auto;}
.prev{width:40px;height:86px;background:#000;position:absolute;top:160px;left:-40px;font-size:60px;color:#fff;text-align:center;line-height:86px;}
.next{width:40px;height:86px;background:#000;position:absolute;top:160px;right:-40px;font-size:60px;color:#fff;text-align:center;line-height:86px;}
.prev:hover{opacity:0.8;filter:alpha(opacity=80);}
.next:hover{opacity:0.8;filter:alpha(opacity=80);}
.scroll_con{width:920px;height:430px;position:absolute;top:0px;overflow:hidden;}
.scroll_con ul{height:920px;position:absolute;}
.scroll_con ul li{width:920px;height:430px;}
.scroll_con ul li img{width:100%;height:100%;}
</style>
</head>
<body>
<div class="scroll_box">
<a href="javascript:;" class="prev block"><</a>
<div class="scroll_con">
<ul class="clearfix" id="Scroll">
<li class="fl">
<img src="http://cache.tzj.iwgame.com/act/special/wsry/images/ev3/ev3_slide1.jpg"/>
</li>
<li class="fl">
<img src="http://cache.tzj.iwgame.com/act/special/wsry/images/ev3/ev3_slide2.jpg"/>
</li>
<li class="fl">
<img src="http://cache.tzj.iwgame.com/act/special/wsry/images/ev3/ev3_slide3.jpg"/>
</li>
<li class="fl">
<img src="http://cache.tzj.iwgame.com/act/special/wsry/images/ev3/ev3_slide4.jpg"/>
</li>
</ul>
</div>
<a href="javascript:;" class="next block">></a>
</div>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
//box 滚动盒子 btn_prev左按钮 btn_next右按钮 speed切换速度 baseW每次滚动宽度 isAuto是否开启自动滚动 autoSpeed自动滚动速度
function switchScroll(box,btn_prev,btn_next,speed,baseW,isAuto,autoSpeed){
var obj = box;
var pr = btn_prev;
var ne = btn_next;
var _this = obj;
var s_l = obj.find('li').length;
var temp = _this.html();
_this.css('width',baseW*s_l+'px').css('left','0px');
var autoTimer = null;
pr.click(function(){
if(parseInt(_this.css('left')) >= 0){
var tp = _this.find('li').eq(s_l-1).html();
_this.find('li').eq(s_l-1).remove();
_this.find('li').eq(0).before('<li class="fl">'+ tp +'</li>');
_this.css('left',-baseW+'px');
if(!_this.is(":animated")){//如果当前不处于动画状态
_this.animate({
'left':(parseInt(_this.css('left'))+baseW)+'px'
}, speed );
}
}else{
if(!_this.is(":animated")){//如果当前不处于动画状态
_this.animate({
'left':(parseInt(_this.css('left'))+baseW)+'px'
}, speed );
}
}
});
ne.click(function(){
if(parseInt(_this.css('left')) <= -(baseW*s_l-baseW)){
var tp = _this.find('li').eq(0).html();
_this.find('li').eq(s_l-1).after('<li class="fl">'+ tp +'</li>');
_this.css('left',-(baseW*s_l-baseW*2)+'px');
_this.find('li').eq(0).remove();
if(!_this.is(":animated")){//如果当前不处于动画状态
_this.animate({
'left':(parseInt(_this.css('left'))-baseW)+'px'
}, speed);
}
}else{
if(!_this.is(":animated")){//如果当前不处于动画状态
_this.animate({
'left':(parseInt(_this.css('left'))-baseW)+'px'
}, speed);
}
}
});
function autoScroll(){
clearInterval(autoTimer);
autoTimer = setInterval(function(){
ne.trigger('click');
},autoSpeed);
}
if(!!isAuto){
autoScroll();
_this.mouseover(function(){
clearInterval(autoTimer);
});
pr.mouseover(function(){
clearInterval(autoTimer);
});
ne.mouseover(function(){
clearInterval(autoTimer);
});
_this.mouseleave(function(){
autoScroll();
});
}
}
$(function(){
switchScroll($('#Scroll'),$('.prev'),$('.next'),500,920,true,2000);
});
</script>
一次滚动两张图
function switchScroll(box,btn_prev,btn_next,speed,baseW,isAuto,autoSpeed){
var obj = box;
var pr = btn_prev;
var ne = btn_next;
var _this = obj;
var s_l = obj.find('li').length;
var Ls = Math.ceil(s_l/2);
if(s_l%2 != 0){
var tmpl = obj.html();
obj.html(tmpl+tmpl);
Ls = s_l;
s_l = obj.find('li').length;
}
var temp = _this.html();
_this.css('width',baseW*Ls+'px').css('left','0px');
var autoTimer = null;
pr.click(function(){
if(parseInt(_this.css('left')) >= 0){
var tp = _this.find('li').eq(s_l-1).html();
var tp1 = _this.find('li').eq(s_l-2).html();
_this.find('li').eq(0).before('<li class="fl">'+ tp +'</li>');
_this.find('li').eq(s_l).remove();
_this.find('li').eq(0).before('<li class="fl">'+ tp1 +'</li>');
_this.find('li').eq(s_l).remove();
_this.css('left',-baseW+'px');
if(!_this.is(":animated")){//如果当前不处于动画状态
_this.animate({
'left':(parseInt(_this.css('left'))+baseW)+'px'
}, speed );
}
}else{
if(!_this.is(":animated")){//如果当前不处于动画状态
_this.animate({
'left':(parseInt(_this.css('left'))+baseW)+'px'
}, speed );
}
}
});
ne.click(function(){
if(parseInt(_this.css('left')) <= -(baseW*Ls-baseW)){
var tp = _this.find('li').eq(0).html();
var tp1 = _this.find('li').eq(1).html();
_this.find('li').eq(s_l-1).after('<li class="fl">'+ tp +'</li>');
_this.find('li').eq(0).remove();
_this.find('li').eq(s_l-1).after('<li class="fl">'+ tp1 +'</li>');
_this.find('li').eq(0).remove();
_this.css('left',-(baseW*Ls-baseW*2)+'px');
if(!_this.is(":animated")){//如果当前不处于动画状态
_this.animate({
'left':(parseInt(_this.css('left'))-baseW)+'px'
}, speed);
}
}else{
if(!_this.is(":animated")){//如果当前不处于动画状态
_this.animate({
'left':(parseInt(_this.css('left'))-baseW)+'px'
}, speed);
}
}
});
function autoScroll(){
clearInterval(autoTimer);
autoTimer = setInterval(function(){
ne.trigger('click');
},autoSpeed);
}
if(!!isAuto){
autoScroll();
_this.mouseover(function(){
clearInterval(autoTimer);
});
pr.mouseover(function(){
clearInterval(autoTimer);
});
ne.mouseover(function(){
clearInterval(autoTimer);
});
_this.mouseleave(function(){
autoScroll();
});
}
}
jquery无缝滚动效果实现的更多相关文章
- liMarquee – jQuery无缝滚动插件（制作跑马灯效果）
liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...
- liMarquee演示12种不同的无缝滚动效果
很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...
- 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)
像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...
- jQuery实现滚动效果详解1
声明:第一次写原创,本人初学,很多地方一知半解,本篇算是一个学习的笔记,欢迎批评指正,转载请注明. 今天要做的效果是在网上经常能看到多幅图片向左无缝滚动,鼠标滑过动画暂停,鼠标滑出动画继续的效果.网上 ...
- js实现简单易用的上下无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 16个最棒的jQuery视差滚动效果教程
今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...
- 信息无缝滚动效果marquee
横向滚动.纵向滚动 1. 解决滚动的空白 向左向右滚动的话,可以根据父级定位left,每次加或者减可以使物体向左或右运动,用top也可以实现向上或向下运动 上下滚动实现无缝滚动1. innerHTML ...
- 应用JavaScript搭建一个简易页面图片无缝滚动效果
页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...
- CSS和jQuery分别实现图片无缝滚动效果
一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
随机推荐
- hadoop编程小技巧（7）---自己定义输出文件格式以及输出到不同文件夹
代码測试环境:Hadoop2.4 应用场景:当须要定制输出数据格式时能够採用此技巧,包含定制输出数据的展现形式.输出路径.输出文件名称称等. Hadoop内置的输出文件格式有: 1)FileOutpu ...
- hdu1796 How many integers can you find
//设置m,Q小于n可以设置如何几号m随机多项整除 //利用已知的容斥原理 //ans = 数是由数的数目整除 - 数为整除的两个数的数的最小公倍数 + 由三个数字... #include<cs ...
- Azure VM Public IP设置
Azure虚拟机的Public IP是用于客户端直连云中的虚拟机,可以认为是一个外网IP,一般我们为虚拟机设置终结点,例如HTTP的80端口,如果使用Public IP可以不使用Azure Porta ...
- 百度官方wormHole后门检测记录(转)
本次这个安卓后门真是哔了狗了,刚加入大安卓阵营就出了这个篓子,跟你root不root和什么安卓版本没有版毛钱关系,完全是百度SDK官方提供的后门,不是漏洞,人为的. 乌云地址:http://drops ...
- Java批处理操作
批量,可以大大提高众多增加.删除.变化的步伐,它是有一个非常大的数据处理效率大收益. 的"连接池"相似.事实上就是先将多次操作(增删改)打包.然后再一次发送运行 主要用到两个方法: ...
- UVA11080- Place the Guards(二分图染色)
题目链接 题意:放最少的士兵去监视全部的道路, 但士兵不可相邻,符合的话,就输出最少的士兵数,否则输出-1 思路:事实上就是二分图染色,即黑白染色,然后选择黑白染色最少的那个颜色累加,但要注意可能有多 ...
- eclipse字母大写和小写转换的快捷键
大写转换小写 ctrl+shift+y 小写转换大写 ctrl+shift+x
- 鸟哥的私房菜上 xpenguins 设备（ubuntu 12.04）
看了一个暑假linux,我觉得很辛苦啊,要很好地利用linux并不是的easy... 今天装了一下鸟哥课后给的xpenguins软件,就是桌面特性软件.会有非常多企鹅下落,本以为能够非常轻松的搞定.没 ...
- BIEE在creating domain步骤停止的解决的方法
1.错误现象: biee11g creating domain csf entries will not be parsed since the adminserver is unreachable ...
- Cocos2d-x学习笔记（两）Cocos2d-x总体框架
原创文章.转载请注明出处:http://blog.csdn.net/sfh366958228/article/details/38680123 前言 上一节我们简单分析了HelloWorldproje ...