JavaScript 图片轮播 出现第一张和第二张中间错乱显示在一起 求高手
[问题点数：40分，结帖人xykyo]
JavaScript 图片轮播 出现第一张和第二张中间错乱显示在一起 求高手
[问题点数：40分，结帖人xykyo]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|js 基础篇必看(点击事件轮播图的简单实现)
转载 & & 投稿：jingxian
下面小编就为大家带来一篇js 基础篇必看(点击事件轮播图的简单实现)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
轮播图在以后的应用中还是比较常见的，不需要多少行代码就能实现。但是在只掌握了js基础知识的情况下，怎么来用较少的而且逻辑又简单的方法来实现呢？下面来分析下几种不同的做法：
1、利用位移的方法来实现
首先，我们可以在body中添加一个div并且将宽度设置成百分比（自适应页面），比例具体是相对谁的百分比的话按需求来做，在这里不多说。将图片放入到div 中。
其次，样式部分将img标签全部设置成absolute；以方便定位
最后，js部分说说逻辑，定义两个空数组，第一个数组用来保存初始的显示在页面的图片和等待进入的图片，第二个数组保存其余的n张图片，假设这两个数组分别设置为：waitToShow=[]; 和 goOut=[];&& waitToShow.shift();弹出第一张图片假如命名为showFirst，并为showFirst图片设置位移和移动时间，执行完成之后showFirst放入goOut尾部：goOut.push(showFirst);& 这时waitToShow数组的第0个元素就变成原来的第二张要显示的图片，给这个图片waitToShow[0]设置位移和移动时间，并且将goOut数组的首元素图片弹出来，在放进waitToShow数组的尾部，保证waitToShow数组永远是一张显示的图片和待显示的图片，这样就通过两个数组形成了一个循环来完成轮播图的实现。反向的逻辑是一样的（由于逻辑过于复杂这里不推荐）
2、利用层级的高低来使最顶部图片变化的做法（这个做法没有位移的动作，但是逻辑却非常简便，很实用）
直接来代码更直观点：基本每行都有注释
&!DOCTYPE html&
&meta charset="utf-8"&
&title&轮播图 (闪现 自适应)&/title&
&style media="screen"&
margin: 0;
padding: 0;
width: 60%;
background:
.wrap img {
width: 100%;
/*z-index: 10;*/
height: 30
background:
border-radius: 5
font-size: 20
&div class="wrap"&
&img src="img/01.jpg" alt="" /&
&img src="img/02.jpg" alt="" /&
&img src="img/03.jpg" alt="" /&
&img src="img/04.jpg" alt="" /&
&input type="button" id="butLeft" name="name" value="◀︎"&
&input type="button" id="butRight" name="name" value="▶︎"&
&script type="text/javascript"&
// 获取images元素生成字符串数组，字符串数组不能进行push pop splice 等操作
// 所以要将它的值重新存放进一个数组中，后面有定义
var images = document.getElementsByTagName('img');
var butLeft = document.getElementById('butLeft');
var butRight = document.getElementById('butRight');
//获取变量index 用来为后面设置层级用
var index = 1000;
// 获取一个空的数组，用来存放images里面的字符串元素
var imagess = [];
// for循环用来给imagess数组赋值，并且改变数组中的元素的层级
for (var i = 0; i & images. i++) {
imagess[i] = images[i];
var currentImage = imagess[i];
// 当前图片的层级的设置，一轮for循环都为他们设置了初始的zIndex，图片越靠前，层级设置
// 要求越高，所以用的是－i,这样图片会按顺序从第一张，第二张.....依次向下
currentImage.style.zIndex = -i;
// 设置计数器count，执行一次点击事件（向左或者向右）count加1
var count = 0;
// 向左的点击事件
butLeft.onclick = function() {
// 从数组头部弹出一个图片元素
var showFirst = imagess.shift();
// 给弹出的这个图片元素设置层级，即 －1000+count，
// 让层级相较其他元素是最小的，数组头部弹出的图片会显示在最底层
showFirst.style.zIndex = - index +
// 层级改变完成后再将他push进数组的尾部
imagess.push(showFirst);
// 点击一次加1，不用考虑具体的值，只需要有点击事件加 1
// 向右点击事件
butRight.onclick = function() {
// 从imagess的尾部弹出一个元素，并赋值给showFirst
var showFirst = imagess.pop();
// 设置showFirst的层级为最大，1000+count ，这样他会显示在第一层
showFirst.style.zIndex = index +
// 层级改变之后将他在插入数组imagess的头部
imagess.unshift(showFirst);
// 点击一次加1
以上这篇js 基础篇必看(点击事件轮播图的简单实现)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具JS控制图片轮播的问题_百度知道
JS控制图片轮播的问题
在图片轮播有这样一个问题：假设有3张图片，当播放完第三张返回第一张的时候，不是3 =& 3的显示效果; 2 =&gt，也是 1 =&gt，向右翻图的时候，而是3 =& 2 =& 1的显示效果；同样; 1这样的显示效果
我有更好的答案
你这些代码太多余了，不用你写的这么复杂呀，直接几行代码就行了，就像选项卡一样写呀。点那个按钮，对应的图就显示就行了。最简单的焦点图如果不用无缝滚动，那很简单呀
要无缝滚动的可以给个例子参考下么？ 谢谢！
无缝滚动，是1》2》3》1，这叫无缝滚动
是的，但是从3返回1的时候，现在的这个代码是倒退回1，会闪过2的图像，能直接3&1这样么？
轮播图的原理是3》1》2》3》1，首尾都会复制一个份，作为视觉的无缝切换，其实是假的，
采纳率：42%
为您推荐：
其他类似问题
轮播的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。原生js实现无限循环轮播图效果
转载 & & 作者：夏天不做梦
本文主要介绍了原生js实现无限循环轮播图效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
1.实现无限循环的原理：
以偏移的距离来判断是否跳回第一张和最后一张
也可以利用循环判断图片的当前索引值
var newLeft=parseInt(list.style.left)+//当前的偏移量+下一次的偏移量=新的偏移量
list.style.left=newLeft+"px";//当前的偏移值=新的偏移值
//以偏移的距离来判断是否跳回第一张和最后一张
if(newLeft&-600){
list.style.left=-3000+"px";
if (newLeft&-3000){
list.style.left=-600+"px";
2.当前图片轮播的圆点变色显示：
因为每次点击index+1 所以当前的index-1就是button的索引
//添加on前先清空on
for(var i=0;i&buttons.i++){
if(buttons[i].className=="on"){
buttons[i].className="";
buttons[index-1].className="on";
3.实现动画滚动效果：
原理就是把每次的偏移量分为多次完成比如一次600px那就分为10次每次偏移60px
就要用到setTimeout(go,10);//10毫秒再次调用go函数，一直到不满足条件就停
var newLeft=parseInt(list.style.left)+//当前的偏移量+下一次的偏移量=新的偏移量
var time=300;//位移总时间
var interval=10;//位移间隔时间
//动画效果自定义公式： 每次位移的距离=单次偏移距离/位移次数
var speed=offset/(time/interval);
//递归函数 直到不满足条件（跳到辅助图）
//递归就是把600偏移量分为多次完成偏移
function go(){
//speed&0 并且 当前偏移量&下一次偏移量 就是向左偏移 || 反之向右偏移
if ((speed&0 &&parseInt(list.style.left)&newLeft) || (speed&0 &&parseInt(list.style.left)&newLeft)) {
list.style.left=parseInt(list.style.left)+speed+"px";//每次位移的值
setTimeout(go,interval);//10毫秒再次调用go函数
list.style.left=newLeft+"px";//当前的偏移值=新的偏移值
if(newLeft&-600){
list.style.left=-3000+"px";
if (newLeft&-3000){
list.style.left=-600+"px";
4.点击圆点按钮执行动画：
原理获取当前的按钮位置再获取要点击的按钮的位置
用（点击的——当前的）*-600=需要跳转的正负距离（向左或向右）
for(var i=0;i&buttons.i++){
buttons[i].onclick=function(){
if(this.className=="on"){
//要点击的index属性的值 转换为整数
var myIndex=parseInt(this.getAttribute("index"));
//偏移量=-600*（要点击的位置-当前所在的位置），当前的位置就是index循环所得
var os=-600*(myIndex-index);
//切换完成后，把点击的index位置变成当前的index位置
showButton();
if(!animated){
animate(os);
5.自动播放：
给外层容器加个onmouseover事件再调用setInterval方法
//给方法定义全局变量是因为停止的时候要使用
function play(){
timer=setInterval(function(){
next.onclick();
clearInterval(timer)
注：图片链接本地替换一下
&!DOCTYPE html&
&html lang="en"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&demo&/title&
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:}
code,kbd,pre,samp{font-family:courier new,courier,}
ul,ol{list-style:}
a{text-decoration:}
a:hover{text-decoration:}
sup{vertical-align:text-}
sub{vertical-align:text-}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:border-spacing:0;}
.clear{clear:float:height: 0;overflow:}
#container{width: 600 height: 400 overflow: position: }
#list{width: 4200 height: 400 position: z-index: 1;}
#list img{float:}
#buttons { position: height: 10 width: 100 z-index: 2; bottom: 20 left: 250}
#buttons span { cursor: float: border: 1px solid # width: 10 height: 10 border-radius: 50%; background: #333; margin-right: 5}
#buttons .on { background:}
.arrow { cursor: display: line-height: 39 text-align: font-size: 36 font-weight: width: 40 height: 40 position: z-index: 2; top: 180 background-color: RGBA(0,0,0,.3); color: #}
.arrow:hover { background-color: RGBA(0,0,0,.7);}
#container:hover .arrow { display:}
#prev { left: 20}
#next { right: 20}
&div id="container"&
&div id="list" style="left: -600"&
&img src="images/5.jpg" alt="5"/&
&img src="images/1.jpg" alt="1"/&
&img src="images/2.jpg" alt="2"/&
&img src="images/3.jpg" alt="3"/&
&img src="images/4.jpg" alt="4"/&
&img src="images/5.jpg" alt="5"/&
&img src="images/1.jpg" alt="1"/&
&div id="buttons"&
&span index="1" class="on"&&/span&
&span index="2"&&/span&
&span index="3"&&/span&
&span index="4"&&/span&
&span index="5"&&/span&
&a href="javascript:;" id="prev" class="arrow"&&&/a&
&a href="javascript:;" id="next" class="arrow"&&&/a&
&script type="text/javascript"&
//在页面加载完后立即执行多个函数方案。
function addloadEvent(func){
var oldonload=window.
if(typeof window.onload !="function"){
window.onload=
window.onload=function(){
if(oldonload){
oldonload();
//在页面加载完后立即执行多个函数方案结束。
addloadEvent(lbt);
//轮播图动画切换原理
function lbt(){
var container=document.getElementById("container");
var prev=document.getElementById("prev");
var next=document.getElementById("next");
var list=document.getElementById("list");
var buttons=document.getElementById("buttons").getElementsByTagName("span");
var imgs=list.getElementsByTagName("img");
var index=1;
var animated=
//当前图片轮播的圆点变色显示，原理：index数值是跟随list滑动次数递增的，第一次index=1，所以第一个button的索引值就是0。
//for循环是添加on样式之前要清空之前的on。
function showButton(){
for(var i=0;i&buttons.i++){
if(buttons[i].className=="on"){
buttons[i].className="";
buttons[index-1].className="on";
//圆点变色显示 结束。
function animate(offset){
var newLeft=parseInt(list.style.left)+//当前的偏移量+下一次的偏移量=新的偏移量
var time=300;//位移总时间
var interval=10;//位移间隔时间
//动画效果自定义公式： 每次位移的距离=单次偏移距离/位移次数
var speed=offset/(time/interval);
//递归函数 直到不满足条件（跳到辅助图）
//递归就是把600偏移量分为多次完成偏移
function go(){
//speed&0 并且 当前偏移量&下一次偏移量 就是向左偏移 || 反之向右偏移
if ((speed&0 &&parseInt(list.style.left)&newLeft) || (speed&0 &&parseInt(list.style.left)&newLeft)) {
list.style.left=parseInt(list.style.left)+speed+"px";//每次位移的值
setTimeout(go,interval);//10毫秒再次调用go函数
list.style.left=newLeft+"px";//当前的偏移值=新的偏移值
if(newLeft&-600){
list.style.left=-3000+"px";
if (newLeft&-3000){
list.style.left=-600+"px";
//自动播放3秒执行一次next.onclick
function play(){
timer=setInterval(function(){
next.onclick();
function stop(){
clearInterval(timer);
//执行所有函数
next.onclick=function(){
if(index==5){
showButton();
if(!animated){
animate(-600);
//执行所有函数
prev.onclick=function(){
if(index==1){
showButton();
if(!animated){
animate(600);
//点击圆点按钮 偏移
for(var i=0;i&buttons.i++){
buttons[i].onclick=function(){
if(this.className=="on"){
//要点击的index属性的值 转换为整数
var myIndex=parseInt(this.getAttribute("index"));
//偏移量=-600*（要点击的位置-当前所在的位置），当前的位置就是index循环所得
var os=-600*(myIndex-index);
//切换完成后，把点击的index位置变成当前的index位置
showButton();
if(!animated){
animate(os);
container.onmouseover=
container.onmouseout=
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具说一下思路：和我上一篇博客中用JQ去写的轮播图有相同点和不同点
首先页面布局是一样的
同样是改变.inner盒子的位置去显示不同的图片
为了实现无限滚动需要多添加两张重复的图片
左右切换和前面的方法有所不同，前面是获取当前的索引值乘以-600px当做位移距离，现在是需要获取当前.inner的位置来加上或者减去-600来实现
下面来一步步的去实现轮播图：
首先是html
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
list-style: none;
position: absolute;
bottom: 0;
left: 175px;
float: left;
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ffbeaa;
margin-left: 5px;
opacity: 0.6;
ul li a.active{
background-color: red;
width: 4200px;
height: 400px;
position: absolute;
.inner img{
display: block;
float: left;
height: 400px;
width: 600px;
overflow: hidden;
position: relative;
.prev,.next{
position: absolute;
top: 190px;
opacity: 0.6;
&div class="pic" id="pic"&
&div class="inner" id="inner" style="left:-600"&
&img src="img/5.jpg" alt=""&
&img src="img/1.jpg" alt=""&
&img src="img/2.jpg" alt=""&
&img src="img/3.jpg" alt=""&
&img src="img/4.jpg" alt=""&
&img src="img/5.jpg" alt=""&
&img src="img/1.jpg" alt=""&
&ul id="ul"&
&li&&a href="#" class="active" id="1"&&/a&&/li&
&li&&a href="#" id="2"&&/a&&/li&
&li&&a href="#" id="3"&&/a&&/li&
&li&&a href="#" id="4"&&/a&&/li&
&li&&a href="#" id="5"&&/a&&/li&
&a href="#" class="prev" id="prev"&&img src="img/slider-prev.png" alt=""&&/a&
&a href="#" class="next" id="next"&&img src="img/slider-next.png" alt=""&&/a&
第一步添加左右点击切换：
//文档加载完毕后执行函数
window.onload=function(){
var pic = document.getElementById("pic");
var inner = document.getElementById("inner");
var li = document.getElementById("ul").getElementsByTagName("a");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
//设置索引初始值，点击自增或者自减，根据index值来给按钮添加颜色
var index = 1;
//左点击事件
prev.onclick = function(){
//调用动画函数，传入正的600，为每次的偏移量
animate(600);
//设置索引的范围，不能小于1
if(index==1){
//调用添加颜色函数
showButton();
//右点击事件
next.onclick = function(){
//调用动画函数，传入负的600，为每次的偏移量
animate(-600);
//设置索引的范围，不能超过5
if(index==5){
showButton();
//动画函数，offset参数为偏移量
function animate(offset){
//获取现在.inner盒子的位置加上偏移量 赋值 给.inner盒子
inner.style.left = parseInt(inner.style.left) + offset + "px";
//判断新的位置，如果小于-3000则变为-600px，如果大于-600则变为-3000px
if(parseInt(inner.style.left) & -3000){
inner.style.left = -600 + "px";
if(parseInt(inner.style.left) & -600){
inner.style.left = -3000 + "px";
//按钮添加颜色函数
function showButton(){
//遍历每个a元素，如果有active类 则替换为空字符串，也就是移除这个类
for(var i=0;i&li.i++){
if(li[i].className=="active"){
li[i].className="";
//移除后就没必要去循环了，做一个优化。
//根据当前的index值，找到对应的a元素添加active类
li[index-1].className="active";
需要注意的地方：
执行完毕inner.style.left = parseInt(inner.style.left) + offset + "px"; 后&inner.style.left的值为新位置的值，后面的判断需要用新的值去判断
index的值为1-5，做成a元素的下标时需要 index-1
注意调用的showButton函数的位置，需要在得到index的值的后调用
需要给.inner盒子添加行内样式 style="left:-600",不添加出现inner.style.left获取不到值的情况
获取a元素不能 var li = document.getElementById("ul").getElementsByTagName("li").getElementsByTagName("a");去获取，因为getElementsByTagName("li")获取的是一个包含5个li的数组，需要加索引值，比如var li = document.getElementById("ul").getElementsByTagName("li")[0].getElementsByTagName("a");
第二步：添加五个按钮切换
1 &script&
//文档加载完毕后执行函数
window.onload=function(){
var pic = document.getElementById("pic");
var inner = document.getElementById("inner");
var li = document.getElementById("ul").getElementsByTagName("a");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
//设置索引初始值，点击自增或者自减，根据index值来给按钮添加颜色
<span style="color: #
var index = 1;
<span style="color: #
//左点击事件
<span style="color: #
prev.onclick = function(){
<span style="color: #
//调用动画函数，传入正的600，为每次的偏移量
<span style="color: #
animate(600);
<span style="color: #
//设置索引的范围，不能小于1
<span style="color: #
if(index==1){
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
//调用添加颜色函数
<span style="color: #
showButton();
<span style="color: #
<span style="color: #
//右点击事件
<span style="color: #
next.onclick = function(){
<span style="color: #
//调用动画函数，传入负的600，为每次的偏移量
<span style="color: #
animate(-600);
<span style="color: #
//设置索引的范围，不能超过5
<span style="color: #
if(index==5){
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
showButton();
<span style="color: #
<span style="color: #
//动画函数，offset参数为偏移量
<span style="color: #
function animate(offset){
<span style="color: #
//获取现在.inner盒子的位置加上偏移量 赋值 给.inner盒子
<span style="color: #
inner.style.left = parseInt(inner.style.left) + offset + "px";
<span style="color: #
//判断新的位置，如果小于-3000则变为-600px，如果大于-600则变为-3000px
<span style="color: #
if(parseInt(inner.style.left) & -3000){
<span style="color: #
inner.style.left = -600 + "px";
<span style="color: #
<span style="color: #
if(parseInt(inner.style.left) & -600){
<span style="color: #
inner.style.left = -3000 + "px";
<span style="color: #
<span style="color: #
<span style="color: #
//按钮添加颜色函数
<span style="color: #
function showButton(){
<span style="color: #
//遍历每个a元素，如果有active类 则替换为空字符串，也就是移除这个类
<span style="color: #
for(var i=0;i&li.i++){
<span style="color: #
if(li[i].className=="active"){
<span style="color: #
li[i].className="";
<span style="color: #
//移除后就没必要去循环了，做一个优化。
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
//根据当前的index值，找到对应的a元素添加active类
<span style="color: #
li[index-1].className="active";
<span style="color: #
<span style="color: #
//遍历五个按钮
<span style="color: #
for(var i=0;i&li.i++){
<span style="color: #
//给五个按钮添加点击事件
<span style="color: #
li[i].onclick=function(){
<span style="color: #
//获取当前的id值
<span style="color: #
var id = parseInt(this.getAttribute("id"));
<span style="color: #
//减去原来的index值，乘以-600 得到偏移量，调用偏移函数
<span style="color: #
var offset = (id-index) * -600;
<span style="color: #
//调用偏移函数
<span style="color: #
animate(offset);
<span style="color: #
//把index的值更新
<span style="color: #
<span style="color: #
//调用改变背景色函数
<span style="color: #
showButton();
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
需要注意：
第72行 index = id 把index的值更新为当前的索引index。
因为id属性不是HTML自带的属性。不能li.style.id 这样去获取,而是使用getAttribute("id")方法，这个方法HTML自带属性和自定义属性都能获取
第三步：添加animate函数添加动画函数
1 &script&
window.onload=function(){
var pic = document.getElementById("pic");
var inner = document.getElementById("inner");
var li = document.getElementById("ul").getElementsByTagName("a");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var index = 1;
//通过state的状态 来判断是否执行animate函数
<span style="color: #
var state = false;
<span style="color: #
prev.onclick = function(){
<span style="color: #
//如果state=false 代表动画函数没有执行完毕，则此次点击无效
<span style="color: #
if(state){
<span style="color: #
<span style="color: #
<span style="color: #
animate(600);
<span style="color: #
if(index==1){
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
showButton();
<span style="color: #
<span style="color: #
next.onclick = function(){
<span style="color: #
//如果state=false 代表动画函数没有执行完毕，则此次点击无效
<span style="color: #
if(state){
<span style="color: #
<span style="color: #
<span style="color: #
animate(-600);
<span style="color: #
if(index==5){
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
showButton();
<span style="color: #
<span style="color: #
<span style="color: #
function animate(offset){
<span style="color: #
//调用animate函数后 state的值变为true
<span style="color: #
state = true;
<span style="color: #
//动画执行总的时间
<span style="color: #
var time = 300;
<span style="color: #
//每次位移的间隔时间
<span style="color: #
var interval = 10;
<span style="color: #
//每次位移量
<span style="color: #
var speed = offset/(time/interval);
<span style="color: #
<span style="color: #
var newLeft = parseInt(inner.style.left) +
<span style="color: #
//动画函数
<span style="color: #
function go(){
<span style="color: #
if((speed & 0 && parseInt(inner.style.left) & newLeft) || (speed & 0 && parseInt(inner.style.left) & newLeft)){
<span style="color: #
inner.style.left = parseInt(inner.style.left) + speed + "px";
<span style="color: #
//通过延时定时器不断的去调用自身go函数。直到达到目标位置
<span style="color: #
setTimeout(go,interval);
<span style="color: #
<span style="color: #
//达到目标位置后 state 状态变为 false
<span style="color: #
state = false;
<span style="color: #
//跟新.inner盒子的值为目标的位置
<span style="color: #
inner.style.left = newLeft + "px";
<span style="color: #
//盒子到达目标位置后做一个判断，如果跑到假的第一张图和第五张图上时，马上瞬间跑到真正的第一张图或者第五张图
<span style="color: #
if(parseInt(inner.style.left) & -3000){
<span style="color: #
inner.style.left = -600 + "px";
<span style="color: #
<span style="color: #
if(parseInt(inner.style.left) & -600){
<span style="color: #
inner.style.left = -3000 + "px";
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
function showButton(){
<span style="color: #
for(var i=0;i&li.i++){
<span style="color: #
if(li[i].className=="active"){
<span style="color: #
li[i].className="";
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
li[index-1].className="active";
<span style="color: #
<span style="color: #
for(var i=0;i&li.i++){
<span style="color: #
li[i].onclick=function(){
<span style="color: #
var id = parseInt(this.getAttribute("id"));
<span style="color: #
var offset = (id-index) * -600;
<span style="color: #
//如果state=false 代表动画函数没有执行完毕，则此次点击无效
<span style="color: #
if(state){
<span style="color: #
<span style="color: #
<span style="color: #
animate(offset);
<span style="color: #
<span style="color: #
showButton();
<span style="color: #
<span style="color: #
<span style="color: #
做这个go函数我觉得是这个轮播图中最难的点，我经常有地方转不过弯来。
需要注意的地方：
每次位移一小段距离，终点怎么去判断，也就是什么时候会停止，.inner盒子只能往左边或者右边移动，点击next按钮 .inner往左边移动，是添加一个负值距离，点击prev按钮 .inner往右移动,是添加一个正的left距离 第52行判断条件的意思是，如果speed小于0，获取当前.inner盒子的left的值与目标newLeft值比较 如果大于他则不停的去加上-speed去变小 与newLeft相同为止 或者speed大于0，获取当前.inner盒子的left的值与目标newLeft值比较 如果小于他则不停的去加上speed去变大 与 newLeft相同为止。
newLeft = parseInt(inner.style.left) + 表示最终目标值，存进了变量newLeft中，下面inner.style.left获取的都是现在的left值
go函数里面用的是setTimeout()来递归，通过判断条件，来递归go函数。开始我用的是setInterval()方法，导致出现了奇异的动画效果，思路错了,应该在if前面添加一个clearInterval()清除方法，因为如果不清除的话会不断的调用go函数，导致go函数永远都不会结束，就导致了画面狂闪现象。 setTimeout()方法是在什么时间以后干什么，干完拉倒。setInterval()不停的去调用函数，直到clearInterval()被调用或者窗口被关闭。
注意第70行,写完go函数后需要调用他才会执行。
第四步：最终版，添加自动轮播效果
window.onload=function(){
var pic = document.getElementById("pic");
var inner = document.getElementById("inner");
var li = document.getElementById("ul").getElementsByTagName("a");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var index = 1;
var timer = null;
//设置一个变量来存放自动轮播定时器
var timer2 = null;
var state = false;
prev.onclick = function(){
if(state){
animate(600);
if(index==1){
showButton();
next.onclick = function(){
if(state){
animate(-600);
if(index==5){
showButton();
function animate(offset){
state = true;
var time = 300;
var interval = 10;
var speed = offset/(time/interval);
var newLeft = parseInt(inner.style.left) +
function go(){
clearInterval(timer);
if((speed & 0 && parseInt(inner.style.left) & newLeft) || (speed & 0 && parseInt(inner.style.left) & newLeft)){
inner.style.left = parseInt(inner.style.left) + speed + "px";
timer=setInterval(go,interval);
state = false;
inner.style.left = newLeft + "px";
if(parseInt(inner.style.left) & -3000){
inner.style.left = -600 + "px";
if(parseInt(inner.style.left) & -600){
inner.style.left = -3000 + "px";
function showButton(){
for(var i=0;i&li.i++){
if(li[i].className=="active"){
li[i].className="";
li[index-1].className="active";
for(var i=0;i&li.i++){
li[i].onclick=function(){
var id = parseInt(this.getAttribute("id"));
var offset = (id-index) * -600;
if(state){
animate(offset);
showButton();
//通过定时器来不断的点击 next按钮 来实现轮播效果.
function play(){
timer2 = setInterval(function(){
next.onclick();
//停止轮播函数，清除定时器
function stop(){
clearInterval(timer2);
//给.pic添加移进悬浮和移出事件
pic.onmouseover =
pic.onmouseout =
//第一次访问页面开始轮播
<span style="color: #0
<span style="color: #1
需要注意的地方:
触发next的点击事件，可以写成next.onclick()来触发
给.pic添加事件 不能写成pic.onmouseover = stop(),加了括号后代表立即调用函数，而不是我们需要的悬浮在pic盒子上时调用.
总结：第一次学习这个轮播图时，因为思路跟不上，导致看不懂，然后我又从简单的做起，比如我先学习做了一个自动轮播标签页（前面博客有总结），然后又学习用jq写了一个简单的轮播图，再过来学习这个难度大的，循序渐进去学习，就会发现自己能懂甚至写出来这个轮播图了，附上我学习的视频链接地址。
标签切换地址:http://www.imooc.com/learn/176
JQ轮播图地址：http://www.cnblogs.com/yewenxiang/p/6100206.html
原生js轮播图地址：http://www.imooc.com/learn/176
这篇博客是我目前写的最长的一篇，时间跨度两天，中间多有疏漏或者不正确的地方还希望能指出，我改正。
阅读(...) 评论()