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 ...
随机推荐
- HDU 3081 Marriage Match II（二分法+最大流量）
HDU 3081 Marriage Match II pid=3081" target="_blank" style="">题目链接 题意:n个 ...
- 有关windows在调试ODOO8.0有些问题
继Ubuntu建筑物8.0调试环境后,,尝试windows设置开发环境. 最后的调试和开发,或将返回Linux环境,由于前一段时间手贱,改变分区表,该grub搞哈.哎!后来重建mbr,手动检索分区表( ...
- Struts2+Spring+Hibernate step by step 11 ssh拦截验证用户登录到集成
注意:该系列文章从教师王健写了一部分ssh集成开发指南 引言: 之前没有引入拦截器之前,我们使用Filter过滤器验证用户是否登录,在使用struts2之后,全然能够使用拦截器,验证用户是否已经登录, ...
- linux笔记本上安装了双显卡驱动(intel+nvidia)
为了提高linux图形性能并降低功耗,独特的文章. 我用的系统Fedora 20 Xfce x64,在安装驱动程序,以确保系统是最新的版本号. 最好安装gcc.kernel-devel和其他包.己主动 ...
- .NET应用架构设计—四色原型模式（色彩造型、域无关的模型）（概念版）
阅读文件夹: 1.背景介绍 2.问自己,UML对你来说有意义吗?它帮助过你对系统进行分析.建模吗? 3.一直以来事实上我们被一个缝隙隔开了,使我们对OOAD遥不可及 4.四色原型模式填补这个历史缝隙, ...
- Ohloh研究报告
1.底 由于近期接合ospaf同样是一个开源项目的成熟度分析工具,由于该项目现在Ohloh我们有共同的东西,这么ohloh我们进行了调查. 简单的说,初始ohloh是一个代码搜 ...
- SQL Server 2005 MD5函数
原文:SQL Server 2005 MD5函数 在SQL Server 2005下自带的函数HashBytes() ,此函数是微软在SQL Server 2005中提供的,可以用来计算一个字符串的M ...
- 锋利的KATANA
锋利的KATANA 阅读目录 ASP.NET 发展历程 走进Katana的世界 使用ASP.NET/IIS托管Katana-based应用程序 使用自定义Host(self-host)托管Katana ...
- 大数据系列修炼-Scala课程03
前言 今天上班看了很多关于前端js,jQuery.bootstrap.js以及springMVC看得迷迷糊糊的,毕竟以前很少去学习前端的技术,所有看得有点困,还好看得比较多,回家后也开始学习关于Sca ...
- JavaScript中的try...catch和异常处理
在JavaScript可以使用try...catch来进行异常处理.例如: try { foo.bar();} catch (e) { alert(e.name + ": " + ...