jQuery的无缝滚动和幻灯片

1.html代码：

    

      

    

        

            

            

        
    

        
        
    
    

        

            

            

        
        

            
        
    
    
        
        
立刻登陆,立刻省钱
            用户登陆
            新用户注册
            
        

        
    
    

  

2.css样式:

  .header4{
    width: 100%;
    height: 340px;
    background-color: #4074da;
    position: relative;
}
    .e{
    width: 1190px;
    height: 340px;
    margin:0 auto;
    background-color: white;
}
.slide{
    width: 220px;
    height: 336px;
    position: relative;/* 父容器要设置定位，才能让子元素相对父容器定位 */
    overflow:hidden;
    float:left;
}
.slide .slide_pics{
    width: 220px;
    height: 336px;
    left:0;
    top:0;
    position:relative;
}
.slide .slide_pics li{
    width: 220px;
    height: 336px;
    left:0;
    top:0;
    position:absolute;
}
.slide ul{
    list-style: none;
}
.slide1{
    width: 750px;
    height: 340px;
    background-color: red;
    float:left;
    overflow: hidden;
    position: absolute;
    left: 577px;
    top: 0;
    float: left;
}
.slide1 .slide_pics1{
    width: 750px;
    height: 340px;
    left:0;
    top:0;
    position:relative;
    }
.slide1 .slide_pics1 li{
    width: 750px;
    height: 340px;
    left:0;
    top:0;

    position:absolute;
}
.slide1 ul{
    list-style: none;
}
.points1{
    position: absolute;/* 块元素默认宽度为父宽度的100%，定位之后就变成行内块了，它不能继承父的宽度，如果没有设置宽高，就由内容决定，所以也必须给它一个宽度 */
    width: 100%;
    height: 5px;
    /*background-color: red;*/
    left: 0;
    bottom: 9px;
    text-align: center;/* 行内块的居中方式 */
    font-size: 0px;/* 去掉行内块间隙，它引起小圆点没有挨紧，并且向下超出高度范围 */
}
.points1 li{
    width: 11px;
    height: 11px;

    display: inline-block;
    background-color: #9f9f9f;
    margin: 0 5px;
    border-radius: 50%;/* 设置圆角，优雅降级，更好效果请升级浏览器，不兼容IE */
}
.points1 .active1{

    background-color: black;
}
.points{
    position: absolute;/* 块元素默认宽度为父宽度的100%，定位之后就变成行内块了，它不能继承父的宽度，如果没有设置宽高，就由内容决定，所以也必须给它一个宽度 */
    width: 100%;
    height: 5px;
    /*background-color: red;*/
    left: 0;
    bottom: 9px;
    text-align: center;/* 行内块的居中方式 */
    font-size: 0px;/* 去掉行内块间隙，它引起小圆点没有挨紧，并且向下超出高度范围 */
}
.points li{
    width: 11px;
    height: 11px;
    display: inline-block;
    background-color: #9f9f9f;
    margin: 0 5px;
    border-radius: 50%;/* 设置圆角，优雅降级，更好效果请升级浏览器，不兼容IE */
}
.points .active{
    background-color: black;
}

js代码:

  $(function(){
var $li = $('.slide_pics li');
var len = $li.length;//4张
// var $prev = $('.prev');//左按钮
// var $next = $('.next');//右按钮
    var nextli = 0;//将要运动过来的li
  var nowli = 0;//当前要离开的li
var timer = null;


  //除第一个li，都定位到右侧
  $li.not(':first').css({left:600});

  //动态创建小圆点
  $li.each(function(index){
      //创建li
      var $sli = $('
');
      //第一个li添加选中样式
      if(index == 0){
              $sli.addClass('active');
    }
    //将小圆点的li添加到ul中
        $sli.appendTo('.points');
  })

  $points = $('.points li');
// alert($points.length);//4个小圆点

  //小圆点的点击事件
  $points.click(function() {
nextli = $(this).index();
//当点击当前张的小圆点时，不做任何    操作，防止跳变的Bug
if(nextli == nowli){
    return;
}
move();
    $(this).addClass('active').siblings().removeClass('active');
});

//左按钮的点击事件
    // $prev.click(function() {
  //  nextli--;
//  move();
  //  //改变圆点样式
    //      $points.eq(nextli).addClass('active').sibli    ngs().removeClass('active');
// });

  // //右按钮的点击事件
// $next.click(function() {
  //  nextli++;
  //  move();
  //  //改变圆点样式
//  $points.eq(nextli).addClass('active').siblings().removeClass('active');
// });

//针对外层的slide做鼠标进入和离开事      件，因为鼠标指针有可能进入到左右翻页    和小圆点的范围
//mouseenter使鼠标进入子元素也能清除定时器
    $('.slide').mouseenter(function() {
clearInterval(timer);

});
$('.slide').mouseleave(function() { timer = setInterval(autoplay, 3000);
});

  //定时器循环自动播放
    timer = setInterval(autoplay, 3000);

      //自动播放的逻辑与点击下一张是相同的
  function autoplay(){
          nextli++;
        move();
        //改变圆点样式
                $points.eq(nextli).addClass('active').sibli    ngs().removeClass('active');
    }

        function move(){
          //向右走到第一张，再继续走时
    if(nextli < 0){
    nextli = len - 1;//将要来的是最后一张
    nowli = 0;//要离开的是第一张
    $li.eq(nextli).css({left:-600});//把最后一张定位到左侧，准备进入
    $li.eq(nowli).stop().animate({left: 600});//离开的第一张走到右侧
    $li.eq(nextli).stop().animate({left: 0});//马上要进来的最后一张走进来
    nowli = nextli;//要离开的赋值为刚进入的最后一张
    return;//下边是正常情况的，不执行，直接返回
    }
      //向左走到最后一张，再继续走时
if(nextli > len - 1){
    nextli = 0;//将要来的是第一张
    nowli = len - 1;//要离开的是最后一张
        $li.eq(nextli).css({left:600});//把第一张定位到右侧，准备进入
        $li.eq(nowli).stop().animate({left: -600});//离开的最后一张走到左侧
          $li.eq(nextli).stop().animate({left: 0});//马上要进来的第一张走进来
          nowli = nextli;//要离开的赋值为刚进入的第一张
          return;//下边是正常情况的，不执行，直接返回
}

      if(nextli > nowli){
    //马上要进来的这张瞬间移动到右边
    $li.eq(nextli).css({left:220});
    //当前这张离开
    $li.eq(nowli).stop().animate({left: -220});
}else{
    //马上要进来的这张瞬间移动到左边
    $li.eq(nextli).css({left:-220});
    //当前这张离开
        $li.eq(nowli).stop().animate({left: 220});
}
    //马上要进来的这张走到0的位置
      $li.eq(nextli).stop().animate({left: 0});
    nowli = nextli;
}
})
            $(function(){
      var $li = $('.slide_pics1 li');
  var len = $li.length;//4张
  // var $prev = $('.prev');//左按钮
  // var $next = $('.next');//右按钮
  var nextli = 0;//将要运动过来的li
  var nowli = 0;//当前要离开的li
  var timer = null;


  //除第一个li，都定位到右侧
$li.not(':first').css({left:750});

  //动态创建小圆点
  $li.each(function(index){
      //创建li
      var $sli = $('
');
      //第一个li添加选中样式
      if(index == 0){
          $sli.addClass('active1');
      }
      //将小圆点的li添加到ul中
      $sli.appendTo('.points1');
  })

      $points1 = $('.points1 li');
// alert($points1.length);//4个小圆点

  //小圆点的点击事件
  $points1.click(function() {
      nextli = $(this).index();
      //当点击当前张的小圆点时，不做任何操作，防止跳变的Bug
      if(nextli == nowli){
          return;
      }
        move();
              $(this).addClass('active1').siblings().rem    oveClass('active1');
  });

    // //左按钮的点击事件
    prev.click(function() {
  //  nextli--;
  //  move();
  //  //改变圆点样式
  //            $points1.eq(nextli).addClass('active1').s      iblings().removeClass('active1');
  // });

  // //右按钮的点击事件
  // $next.click(function() {
  //  nextli++;
  //  move();
  //  //改变圆点样式
  //        $points1.eq(nextli).addClass('active1').siblings().removeClass('active1');
  // });

  //针对外层的slide做鼠标进入和离开    事件，因为鼠标指针有可能进入到左右翻页和小圆点的范围
  //mouseenter使鼠标进入子元素也能清除定时器
  $('.slide1').mouseenter(function() {
clearInterval(timer);
  });
  $('.slide1').mouseleave(function() {
      timer = setInterval(autoplay,     3000);
});

  //定时器循环自动播放
  timer = setInterval(autoplay, 3000);

    //自动播放的逻辑与点击下一张是相同的
  function autoplay(){
      nextli++;
      move();
      //改变圆点样式
        $points1.eq(nextli).addClass('active1').s    iblings().removeClass('active1');
  }

    function move(){
    //向右走到第一张，再继续走时
        if(nextli < 0){
          nextli = len - 1;//将要来的是最    后一张
          nowli = 0;//要离开的是第一张
          $li.eq(nextli).css({left:-750});//把最后一张定位到左侧，准备进入
          $li.eq(nowli).stop().animate({left: 750});//离开的第一张走到右侧
    $li.eq(nextli).stop().animate({left: 0});//马上要进来的最后一张走进来
    nowli = nextli;//要离开的赋值为刚进入的最后一张
    return;//下边是正常情况的，不执行，直接返回
}
//向左走到最后一张，再继续走时
if(nextli > len - 1){
    nextli = 0;//将要来的是第一张
    nowli = len - 1;//要离开的是最后一张
    $li.eq(nextli).css({left:600});//把第一张定位到右侧，准备进入
    $li.eq(nowli).stop().animate({left: -750});//离开的最后一张走到左侧
    $li.eq(nextli).stop().animate({left: 0});//马上要进来的第一张走进来
    nowli = nextli;//要离开的赋值为刚进入的第一张
    return;//下边是正常情况的，不执行，直接返回
}

if(nextli > nowli){
    //马上要进来的这张瞬间移动到右边
    $li.eq(nextli).css({left:750});
    //当前这张离开
    $li.eq(nowli).stop().animate({left: -750});
}else{
    //马上要进来的这张瞬间移动到左边
    $li.eq(nextli).css({left:-750});
    //当前这张离开
    $li.eq(nowli).stop().animate({left: 750});
}
//马上要进来的这张走到0的位置
$li.eq(nextli).stop().animate({left: 0});
nowli = nextli;
  }
  })