无缝焦点轮播图

最新推荐文章于 2020-09-19 16:00:11 发布

俏皮的小狮子

最新推荐文章于 2020-09-19 16:00:11 发布

阅读量240

点赞数

分类专栏： js 代码分析

本文链接：https://blog.youkuaiyun.com/sinat_25770711/article/details/81491102

版权

js 代码分析专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en"> 
<head>
<meta charset="UTF-8">
<title>无缝焦点图左右切换</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
ul,li{list-style: none;}
.slide{
   position:relative;
   width:760px;
   height:290px;
   margin: 100px auto;
   border: 2px solid #000;
   overflow: hidden;
}
.slide-lst{
   position:absolute;
   width: 3800px;
}
.slide-lst li{
   float:left;
   width:760px;
   height:290px;
}
.slide-ctrl{
   position:absolute;
   bottom:10px;
   right: 0;
}
.slide-ctrl li{
   float:left;
   width:10px;
   height:10px;
   margin-right: 10px;
   background:#fff;
   cursor: pointer;
}
.slide-ctrl .on{
   background: #f00;
}
.switch{
   position:absolute;
   top: 50%;
   width:30px;
   height:50px;
   font-size: 20px;
   line-height: 50px;
   margin-top: -25px;
   font-family: 'simsun';
   text-align: center;
   background: #000;
   color: #fff;
   opacity: .6;
   cursor: pointer;
}
.switch-prev{
   left: 0;
}
.switch-next{
   right:0;
}
</style>
</head>
<body>
<div class="slide">
    <ul class="slide-lst">
        <li><a href="#"><img src="img/bnr1.jpg" /></a></li>
        <li><a href="#"><img src="img/bnr2.jpg" /></a></li>
        <li><a href="#"><img src="img/bnr3.jpg" /></a></li>
        <li><a href="#"><img src="img/bnr4.jpg" /></a></li>
    </ul>
    <ul class="slide-ctrl">
    </ul>
    <span class="switch switch-prev">&lt;</span>
    <span class="switch switch-next">&gt;</span>
</div>
<script type="text/javascript">
$(function(){

  //定义变量
  var slide = $('.slide-lst');
  var clone =  slide.find('li').first().clone();
      slide.append(clone);

  var item  = slide.find('li');
  var size  = item.size();
  var i = 0;

  //圆点随图片数量动态生成
  for(var j = 0; j < size-1; j++){
    $('.slide-ctrl').append('<li></li>')
  }
  var dot   = $('.slide-ctrl').find('li');
      dot.first().addClass('on');

  //鼠标划入事件
  dot.hover(function(){
    var index = $(this).index();
    slide.stop().animate({left:-(index*760)},500)
    dot.eq(index).addClass('on').siblings().removeClass('on');
  })

  function move(){   
    //点击右箭头           
    if(i == size){                  
      slide.css({left:0});          
      i = 1;                        
    }

    //点击左箭头 
    if(i == -1){
      slide.css({left:-(size-1)*760});
      i = size-2;
    }

    slide.stop().animate({left:-(i*760)},500);

    //当i等于最后一张的前一张图片时，让下面的小圆点定位到第一个
    if(i == size - 1){              
      dot.eq(0).addClass('on').siblings().removeClass('on');
    }else{
      dot.eq(i).addClass('on').siblings().removeClass('on');
    }
  }

  $('.switch-prev').on('click',function(){
    i--;
    move()
  });

  $('.switch-next').on('click',function(){
    i++;                           
    move()

  });

//定时器，自动切换
  var t = setInterval(function(){
    i++;                           
    move()
   },2000);

//当鼠标移入banner时清除定时器，移出时重新启动定时器
   $('.slide').hover(function(){
      clearInterval(t);
   },function(){
      t = setInterval(function(){
        i++;                           
        move()
      },2000);
   });

});
</script>
</body>
</html>