javascript无缝流畅动画轮播，终于让我给搞出来了。
自己一直想写一个真正能用的轮播图，以前是写过一个，但是不是无缝的轮播，感觉体验很差，这个轮播之前也搞了很多实例，看了很多代码，但是脑子总转不过弯，为什么在运动到一定距离后可以突然转回到原始位置，而没有出现运动情况？为什么我清楚定时器了，还是出现定时器重叠的情况，导致轮播混乱？如何让左右按钮，分页按钮，轮播函数联系起来，在触发一个事件的时候，轮播能正常运行？如何在第一个li的时候向左（上一张）滑动？
平时自己有空就想，试过很多方法，但是始终搞不出来，今天看了别人写的插件，后发现：
1.当ul滚动到最后一张的时候，瞬间回到初始位置，而没有动作，是应为我们都把这个回到初始位置的瞬间当作了运动的一部分了。
2.关于定时器重叠的，问题，以前我试过通过if(timer){clearInterval(timer)}的方法，但是不好用，应为点击分页的时候，还是会出现问题，最后看了别人的代码，发现通过鼠标移入slider之后，清除定时器，可以一劳永逸的解决了这个问题，因为，当鼠标移入slider之后，定时器被清除，而在没有重新启动定时器之前的一切操作，都是在没有自动轮播的情况下进行的。
3.让左右按钮，分页按钮，轮播函数结合，我是这么想的，轮播函数可以独立，然后通过获取当前的offsetLleft，后运动之后的offsetLleft来决定运动距离和方向，然后左右按钮只需通过设置每个li的宽度的正负值传参就可以联系起来，而分页函数和左右函数，则通过index的增减，传参联系起来，分页函数与轮播函数，通过获取当前分页的索引值和点击分页的索引值联系起来，当然这个索引值，可以通过setAttibute和getAttribute来设置获取。
4.关于最后一个问题，我们都知道如果当前页为第一页的时候，如果点击上一张的话，会出现空白，反正就是错，所以我们在初始化的时候，需要在最前面添加最后一个滚动单位（最后一张图片的li），为了让滚动到最后一个li能返回初始位置，也要在ul的最后添加第一个li，如果你觉得，这样会不会影响到分页呢。其实分页我们可以通过独立设置data-index，还有分页的length也可以通过初始化之前的来设置，因为当时并没有添加节点。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>demo3</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
ul{
padding:0px;
margin:0px;
}
#slider{
width:400px;
height:200px;
position: relative;
margin:400px auto;
overflow: hidden;
border:1px solid #eee;
}
#prev{
width:50px;
height:30px;
line-height: 30px;
color:#fff;
background:#000;
text-align: center;
position: absolute;
opacity:0.5;
left:-200px;
text-decoration: none;
top:50%;
z-index:100;
margin-top:-15px;
}
#next{
opacity:0.5;
text-decoration: none;
z-index:100;
width:50px;
height:30px;
line-height: 30px;
color:#fff;
background:#000;
text-align: center;
position: absolute;
right:-200px;
top:50%;
margin-top:-15px;
}
#slider ul{
height:200px;
position: absolute;
left:0px;
top:0px;
}
#slider ul li{
width:400px;
height:200px;
background:orange;
list-style: none;
text-align: center;
line-height: 200px;
font-size:100px;
font-weight:bold;
color:#fff;
float:left; }
#slider ol{
list-style-type: none;
position: absolute;
bottom:10px;
padding:0;
margin:0;
width:100%;
text-align: center;
}
#slider ol li{
width:10px;
height:10px;
display: inline-block;
background: #000;
opacity: 0.3;
cursor:pointer;
margin:5px;
border-radius: 50%; }
#slider ol li.on{
opacity: 0.8;
}
</style>
</head>
<body>
<div id="slider">
<a href="javascript:;" id="prev">prev</a>
<a href="javascript:;" id="next">next</a>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
<ol>
</ol>
</div>
</body>
</html>
javascript
<script type="text/javascript" src="startmove.js"></script>
<script type="text/javascript">
window.onload = function (){
var slider = document.getElementById('slider');
var oUl = slider.getElementsByTagName('ul')[0];
var oLi = oUl.getElementsByTagName('li');
var liWidth = parseInt(getStyle(oLi[0] , 'width'));
var aNext = document.getElementById('next');
var aPrev = document.getElementById('prev');
var timer = null;
var inter = 3000;
var index = 0;
var oOl = slider.getElementsByTagName('ol')[0];
var pLi = oOl.getElementsByTagName('li');
var b = false; //初始化
function intSlider(){
for(var i = 0 ; i < oLi.length ; i++){
oLi[i].setAttribute('data-index',i);
}
for( var i = 0 ; i < oLi.length; i++){
var iLi = document.createElement('li');
oOl.appendChild(iLi);
}
for(var i = 0 ; i < pLi.length ; i++){
pLi[i].setAttribute('data-index',i)
}
pLi[0].className = 'on';
var cloneLastLi = oLi[oLi.length-1].cloneNode(true);
var cloneFirstLi = oLi[0].cloneNode(true);
oUl.insertBefore(cloneLastLi,oUl.childNodes[0]);
oUl.appendChild(cloneFirstLi);
oUl.style.left = -parseInt(getStyle(oLi[0] , 'width')) + 'px';
};
intSlider(); //重新设定ul宽度
function getWidth(){
var liWidth = parseInt(getStyle(oLi[0] , 'width'));
oUl.style.width = oLi.length * liWidth + 'px'; };
getWidth(); //鼠标移入移除直接清除了timer，就省了很多清除定时器的麻烦
slider.onmouseover = function() {
if(timer){
clearInterval(timer);
}
startMove(aNext,{right : 20});
startMove(aPrev,{left : 20}); };
slider.onmouseout = function() {
timer = setInterval(nextSlider , inter);
startMove(aNext,{right : -100});
startMove(aPrev,{left : -100}); }; //核心函数
function sliderOffset(offset){
b = true;
//当前left和滚动之后的left
var currentLeft = oUl.offsetLeft;
var afterLeft = currentLeft + offset; startMove(oUl , {left : afterLeft},function(){
if (oUl.offsetLeft <= -(oUl.offsetWidth) + liWidth) {
oUl.style.left= -liWidth + 'px';
} else if (oUl.offsetLeft >= 0) {
oUl.style.left= -(oLi.length - 2) * liWidth + 'px';
}; b = false;
});
}; //当前分页函数
function pageSlider(index){
for(var i = 0; i < pLi.length ; i++){
if(pLi[i].className == 'on'){
pLi[i].className = '';
} }
pLi[index].className = 'on'; }; //分页点击函数
for(var i = 0 ; i< pLi.length ; i++){
pLi[i].onclick = function (){
var index1 = this.getAttribute('data-index');
var offset = (index - index1) * liWidth;
sliderOffset(offset)
index = index1;
pageSlider(index);
}
}; //上一张函数
function nextSlider(){
if(b){
return;
}
sliderOffset(-liWidth)
if(index >= pLi.length-1){
index = 0;
}else{
index++
}
pageSlider(index)
}; //下一张函数
function prevSlider(){
if(b){
return;
}
sliderOffset(liWidth);
if(index <= 0){
index = pLi.length-1;
}else{
index--
}
pageSlider(index);
}; //事件绑定兼容函数
function addEvent(element,event,listener){
if(element.addEventListener){
element.addEventListener(event,listener,false);
}else{
element.attachEvent('on' + event , listener);
}
}; //绑定事件
addEvent(aNext,'click',nextSlider);
addEvent(aPrev,'click',prevSlider); //样式获取
function getStyle(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr]
}else{
return getComputedStyle(obj,false)[attr]
}
}; //自动轮播
timer = setInterval(nextSlider, inter);
}
</script>
javascript无缝流畅动画轮播，终于让我给搞出来了。的更多相关文章
- javascript无缝全屏轮播
虽然平时能利用插件来实现,但是总是觉得,如果连个无缝轮播都写不出来,还玩个毛线: 其实现在还真的是玩毛线,因为代码都是别人的,不过嘛,很快就变成是我的啦! 代码还没封装成插件,其实我也还没弄清楚. 下 ...
- jQuery无缝循环开源多元素动画轮播jquery.slides插件
详细内容请点击 初始化插件: 一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型$(".slideInner").slide({slideContainer: ...
- javascript写无缝平移的轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript--缓动动画+轮播图
上效果: 实现步骤: 最重要的是运动公式!!! <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- 【JavaScript】固定布局轮播图特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 带无缝滚动的轮播图（含JS运动框架）
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- 原生JavaScript实现焦点图轮播
不管是高校的网站还是电商的页面,焦点图的切换和轮播应该是一项不可或缺的应用.今天把焦点图轮播制作的技术要点做下笔记,以供日后查看. 一.结构层(HTML) 焦点图的HTML结构很简单,就是一个父容器( ...
- JavaScript基础 -- 焦点图轮播(转载)
首先将HTML结构搭建好: <div id="container"> <div id="list" style="left: -60 ...
- javaScript 手写图片轮播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- CentOS 6.5 伪分布式 安装 hadoop 2.6.0
安装 jdk -openjdk* 检查安装:java -version 创建Hadoop用户,设置Hadoop用户使之可以免密码ssh到localhost su - hadoop ssh-keygen ...
- Solr中schema.xml的解释
接Solr-4.10.2与Tomcat整合.schema.xml位于D:\solr\data\solr\collection1\conf\中.1.fieldType节点 name: FieldT ...
- 数据库对象（视图，序列，索引，同义词）【weber出品必属精品】
视图视图的定义:视图就是一个查询的别名为什么使用视图限制数据的存取 SQL> conn /as sysdba 已连接. SQL> grant create view to scott; 授 ...
- POJ 1001 Exponentiation 模拟小数幂
模拟小数幂 小数点位 pos 非零末位 e 长度 len 只有三种情况 pos > len pos < e e < pos < len #include <iostrea ...
- 对面向对象程序设计（OOP）的认识
前言 本文主要介绍面向对象(OO)程序设计,以维基百科的解释: 面向对象程序设计(英语:Object-oriented programming,缩写:OOP),指一种程序设计范型,同时也是一种程序开发 ...
- 不用派生CTreeCtrl不用繁琐的过程 教你如何让CTreeCtrl的每一项有ToolTip提示
最近工作中需要让CTreeCtrl控件的每一项都有提示信息,于是谷歌百度,爬山涉水,结果是………….在CodeProject里找到一篇文章是把CTreeCtrl派生出新类,重载一些函数自定义内容.使用 ...
- 为什么要采用外部js文件
这篇文章主要讲的是为什么要采用外部js文件,有什么好处. 为什么不把js内嵌在html中呢,这样不是好分析吗?对,这样你是好分析,同样的别人呢?不内嵌在html中有如下原因: 安全性: 只要查看页 ...
- sudo 无法解析主机的解决办法
错误存在于更改主机名字后,解决办法如下: sudo gedit /etc/hosts找到如下行:127.0.1.1 XXX将其修改为:127.0.1.1 (你现在的主机名) 保 ...
- 使用ARM模板在Azure中国大规模部署DCOS集群
容器技术是目前非常流行的技术,尤其是在以Docker作为容器引擎的推动下,让容器的轻量级,可移植,自包含,隔离性等的上了一个新的台阶,目前谈及Dev/Ops,CI/CD很少能够绕过Docker的. A ...
- 《Programming WPF》翻译 第7章 6.视频和3-D
原文:<Programming WPF>翻译 第7章 6.视频和3-D 虽然详细地讨论视频和3-D超越了这本书的范围,但是获得这些特征的支持是值得的. 视频由MediaElement类型支 ...