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; } })

    你可能感兴趣的:(jQuery的无缝滚动和幻灯片)