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 ...
随机推荐
- Linux内核分析（一）---linux体系简介|内核源码简介|内核配置编译安装
原文:Linux内核分析(一)---linux体系简介|内核源码简介|内核配置编译安装 Linux内核分析(一) 从本篇博文开始我将对linux内核进行学习和分析,整个过程必将十分艰辛,但我会坚持到底 ...
- 基于LINUX的多功能聊天室
原文:基于LINUX的多功能聊天室 基于LINUX的多功能聊天室 其实这个项目在我电脑已经躺了多时,最初写完项目规划后,我就认认真真地去实现了它,后来拿着这个项目区参加了面试,同样面试官也拿这个项目来 ...
- cocos2d-x 发动机分析：程序如何开始和结束?
原创地址:http://game.dapps.net/gamedev/game-engine/9515.html 感谢原创分享! 怎么样使用 Cocos2d-x 高速开发游戏,方法非常easy,你能够 ...
- Javascript学习6 - 类、对象、继承
原文:Javascript学习6 - 类.对象.继承 Javasciprt并不像C++一样支持真正的类,也不是用class关键字来定义类.Javascript定义类也是使用function关键字来完成 ...
- 无效 URI: 故障分析证书颁发机构/主机
无效 URI: 分析证书颁发机构/主机 出现该错误的原因是URL中少了一个斜杠.正常的URL是"http:"后边有两个斜杠,而我在改动配置文件里的URL的IP地址部分时.不小心删掉 ...
- Android游戏开发研究帧动画实现
1.动画的原则框架 帧的动画帧的动画顾名思义,画就是帧动画. 帧动画和我们小时候看的动画片的原理是一样的,在同样区域高速切换图片给人们呈现一种视觉的假象感觉像是在播放动画,事实上只 ...
- DataTable转化为List
public List<T> ConvertToList<T>(DataTable dt) where T : new() { // 定义集 ...
- hdu Online Judge
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1073 数据判断,主要是如何判断WA和PE,吸收字符! 代码: #include <stdio.h ...
- C#记录日志、获取枚举值 等通用函数列表
) { ] >= && ipvals[] <= && ipval ...
- 算法题C#
几个大公司(IBM.MicroSoft and so on)面试经典数据结构与算法题C#解答 1.链表反转 我想到了两种比较简单的方法 第一种是需要开一个新的链表,将原链表的元素从后到前的插入到新链表 ...