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 ...
随机推荐
- C#使用ServiceController控制windows服务
C#在,使用ServiceController控制类windows服务,添加首次使用前引文:System.ServiceProcess,空间中引用:using System.ServiceProces ...
- IOS开发——Protocol使用协议
protocol ['prəutəkɔl] (样例:http://blog.sina.com.cn/s/blog_6aafe9c90100yozz.html ) 一.说明 两个类进行通讯,用协议就比 ...
- Vim 命令 【转】
高级一些的编辑器,都会包含宏功能,vim当然不能缺少了,在vim中使用宏是非常方便的: :qx 开始记录宏,并将结果存入寄存器xq 退出记录模式@x 播放记录在x寄存器中的宏命 ...
- REST API出错响应的设计（转）
REST API应用很多,一方面提供公共API的平台越来越多,比如微博.微信等:一方面移动应用盛行,为Web端.Android端.IOS端.PC端,搭建一个统一的后台,以REST API的形式提供服务 ...
- 【Java】【jquery】ajax垃圾问题
1.暗示HTML.JSP文件本身使用UTF-8格公式 2.HTML的head加: <META http-equiv="Content-Type" content=" ...
- URAL 1727. Znaika's Magic Numbers（数学 vector）
主题链接:http://acm.timus.ru/problem.aspx?space=1&num=1727 1727. Znaika's Magic Numbers Time limit: ...
- Intel 80x86 寻址模式
随着进一步的研究,我们会逐渐接触到你的电脑配置模式的内在联系,和设计原则.在这些,解决计算机是一个非常重要的概念,我们需要很好地理解了什么. 一.预赛: (1)作数 在接触寻址方式之前,我们还要先了解 ...
- CSS设置滚动条样式[转]
原文转载地址:http://www.javascript100.com/?p=756 webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可 ...
- jQuery.extend()方法和jQuery.fn.extend()方法
jQuery.extend()方法和jQuery.fn.extend()方法源码分析 这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例, ...
- DropDownListFor使用ViewData进行绑定的示例
特别注意,经实践: 此方法的ViewBag的名称必须和new SelectList()中的最后一个参数,即下拉框的默认值的名称必须相同,如: ViewBag.Title = WebConst.UnSe ...