phpstudy集成环境

 首页 > 一个滚动轮播的问题，存在bug

一个滚动轮播的问题，存在bug

<!doctype html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>banner</title>
</head>
<style>
*{padding:0; margin:0; list-style:none;}
.main{ width:100%;}
.pic{ width:100%; overflow:hidden; position:relative;}
.pic ul li{ position:absolute; left:100%; width:100%;}
.pic ul li.current{ position:static;}
.pic ul li img{ width:100%;}
.abs{ position:absolute;}
.rel{ position:relative;}
.Right{position:absolute;right:0px; top:50%; margin-top:-20px; width:26px; height:40px; cursor:pointer;}
.Left{position:absolute;left:0px; top:50%; margin-top:-20px; width:26px; height:40px; cursor:pointer;}
</style>

<body>
<div class="main rel">
  <div class="pic">
    <ul>
      <li class="current"><img src="images/a-0.jpg"/></li>
      <li><img src="images/a-1.jpg"/></li>
      <li><img src="images/a-2.jpg"/></li>
    </ul>
  </div>
  <img class="Left abst" src="images/right.png"/>
  <img class="Right abst" src="images/left.png">
</div>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var d=0;//当前点下标
var z=0;//之前点下标
var timer=null;//存放定时函数

$(".abst").hover(function(){
    clearInterval(timer);
},function(){
    timer=setInterval("turnRight()",3000);
});

//鼠标点击左右箭头切换
function turnRight(){
    d++;
    if(d>2){d=0};
    $(".pic ul li").removeClass("current").eq(z).stop().animate({left:"-100%"},300);
    $(".pic ul li").eq(d).css("left","100%");
    $(".pic ul li").eq(d).stop().animate({left:"0"},300).addClass("current");
    z=d;
    console.log(d+"+"+z)
};
function turnLeft(){
    d--;
    if(d<0){d=2};
    $(".pic ul li").removeClass("current").eq(z).stop().animate({left:"100%"},300);
    $(".pic ul li").eq(d).css("left","-100%");
    $(".pic ul li").eq(d).stop().animate({left:"0"},300).addClass("current");
    z=d;
    console.log(d+"+"+z)
};
$(".Left").click(function(){
    turnLeft();
});
$(".Right").click(function(){
    turnRight();
});
timer=setInterval("turnRight()",3000);
</script>
</body>
</html>

图片奉上：




因为做的是个宽度自适应的轮播，
现在问题是每次轮播到最后一张图片，与第一张图片的衔接没有动画效果

原因是当在最后一个图片的时候，第一个图片把第三个图片给遮住了，其实动画是有的。

给你做了修改，只改了右边的按钮，左边的没改，你自己看看代码修改下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>banner</title>
</head>
<style>
*{padding:0; margin:0; list-style:none;}
.main{ width:100%;}
.pic{ width:100%; overflow:hidden; position:relative; min-height:1000px;}
.pic ul li{ position:absolute; left:0; width:100%; top:0; display:none;}
.pic ul li.current{ position:static; display:block;}
.pic ul li img{ width:100%;}
.abs{ position:absolute;}
.rel{ position:relative;}
.Right{position:absolute;right:0px; top:50%; margin-top:-20px; width:26px; height:40px; cursor:pointer;}
.Left{position:absolute;left:0px; top:50%; margin-top:-20px; width:26px; height:40px; cursor:pointer;}
</style>

<body>
<div class="main rel">
  <div class="pic">
    <ul>
      <li class="current"><img src="images/a-0.jpg"/></li>
      <li><img src="images/a-1.jpg"/></li>
      <li><img src="images/a-2.jpg"/></li>
    </ul>
  </div>
  <img class="Left abst" src="images/right.png"/>
  <img class="Right abst" src="images/left.png">
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var d=0;//当前点下标
var z=0;//之前点下标
var timer=null;//存放定时函数

// $(".abst").hover(function(){
//     clearInterval(timer);
// },function(){
//     timer=setInterval("turnRight()",3000);
// });

var allItems = $(".pic ul li");
var itemCount = allItems.length;

//鼠标点击左右箭头切换
function turnRight(){
    var item = $('.current');
    var currentIndex = allItems.index(item);
    currentIndex++;
    currentIndex = currentIndex>= itemCount? 0: currentIndex;
    var next = allItems.eq(currentIndex);

    allItems.css('z-index','0').hide();
    item.show().css({'left':'0', 'z-index': currentIndex+1});
    item.removeClass('current').stop().animate({left:"-100%"},3000);
    next.show().css({'left':'0', 'z-index': currentIndex+2}).addClass('current');
    // d++;
    // if(d>2){d=0};
    // $(".pic ul li").removeClass("current").eq(z).stop().animate({left:"-100%"},1000);
    // $(".pic ul li").eq(d).css("left","100%");
    // $(".pic ul li").eq(d).stop().animate({left:"0"},1000).addClass("current");
    // z=d;
    // console.log(d+"+"+z)
};
function turnLeft(){
    d--;
    if(d<0){d=2};
    $(".pic ul li").removeClass("current").eq(z).stop().animate({left:"100%"},300);
    $(".pic ul li").eq(d).css("left","-100%");
    $(".pic ul li").eq(d).stop().animate({left:"0"},300).addClass("current");
    z=d;
    console.log(d+"+"+z)
};
$(".Left").click(function(){
    turnLeft();
});
$(".Right").click(function(){
    turnRight();
});
// timer=setInterval("turnRight()",3000);
</script>
</body>
</html>

使用css3transform: translate3d()配合transition实现过渡效果，实现简单，性能上也要比这种操作left属性好很多:)

【热门文章】
【热门文章】