1.html代碼：

    <div class="header4">
      <div class="e">
    <div class="slide fl">
        <ul class="slide_pics">
            <li><a href=""><img src="img/yagao1.png" alt="幻燈片" /></a></li>
            <li><a href=""><img src="img/衣服.jpg" alt="幻燈片" width="218px" height="336px" /></a></li>
        </ul>
    <ul class="points">
        <!-- 動(dòng)態(tài)創(chuàng)建小圓點(diǎn)
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li> -->
        </ul>
    </div>
    <div class="slide1">
        <ul class="slide_pics1">
            <li><a href="#"><img src="img/cent1.jpg"></a></li>
            <li><a href="#"><img src="img/cent2.jpg"></a></li>
        </ul>
        <ul class="points1">
            <!-- <li class="active1"><a href="#"></a></li>
            <li><a href="#"></a></li> -->
        </ul>
    </div>
    <div class="e2">        
        <div class="e3"><img src="img/頭像.png"><p class="e31">立刻登陸,立刻省錢</p>
            <a href="E:\html文件夾\denglu.html" target="_blank"><span class="e32">用戶登陸</span></a>
            <a href="zhuce.html" target="_blank"><span class="e33">新用戶注冊(cè)</span></a>
            </div>
        <div class="e4"><div class="e5"><img src="img/二維碼.png"></div>
        <img src="img/二維碼1.png">
    </div>
    </div>
</div>
  </div>

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;/* 父容器要設(shè)置定位，才能讓子元素相對(duì)父容器定位 */
    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;/* 塊元素默認(rèn)寬度為父寬度的100%，定位之后就變成行內(nèi)塊了，它不能繼承父的寬度，如果沒有設(shè)置寬高，就由內(nèi)容決定，所以也必須給它一個(gè)寬度 */
    width: 100%;
    height: 5px;
    /*background-color: red;*/
    left: 0;
    bottom: 9px;
    text-align: center;/* 行內(nèi)塊的居中方式 */
    font-size: 0px;/* 去掉行內(nèi)塊間隙，它引起小圓點(diǎn)沒有挨緊，并且向下超出高度范圍 */
}
.points1 li{
    width: 11px;
    height: 11px;

    display: inline-block;
    background-color: #9f9f9f;
    margin: 0 5px;
    border-radius: 50%;/* 設(shè)置圓角，優(yōu)雅降級(jí)，更好效果請(qǐng)升級(jí)瀏覽器，不兼容IE */
}
.points1 .active1{

    background-color: black;
}
.points{
    position: absolute;/* 塊元素默認(rèn)寬度為父寬度的100%，定位之后就變成行內(nèi)塊了，它不能繼承父的寬度，如果沒有設(shè)置寬高，就由內(nèi)容決定，所以也必須給它一個(gè)寬度 */
    width: 100%;
    height: 5px;
    /*background-color: red;*/
    left: 0;
    bottom: 9px;
    text-align: center;/* 行內(nèi)塊的居中方式 */
    font-size: 0px;/* 去掉行內(nèi)塊間隙，它引起小圓點(diǎn)沒有挨緊，并且向下超出高度范圍 */
}
.points li{
    width: 11px;
    height: 11px;
    display: inline-block;
    background-color: #9f9f9f;
    margin: 0 5px;
    border-radius: 50%;/* 設(shè)置圓角，優(yōu)雅降級(jí)，更好效果請(qǐng)升級(jí)瀏覽器，不兼容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;//將要運(yùn)動(dòng)過來的li
  var nowli = 0;//當(dāng)前要離開的li
var timer = null;


  //除第一個(gè)li，都定位到右側(cè)
  $li.not(':first').css({left:600});

  //動(dòng)態(tài)創(chuàng)建小圓點(diǎn)
  $li.each(function(index){
      //創(chuàng)建li
      var $sli = $('<li></li>');
      //第一個(gè)li添加選中樣式
      if(index == 0){
              $sli.addClass('active');
    }
    //將小圓點(diǎn)的li添加到ul中
        $sli.appendTo('.points');
  })

  $points = $('.points li');
// alert($points.length);//4個(gè)小圓點(diǎn)

  //小圓點(diǎn)的點(diǎn)擊事件
  $points.click(function() {
nextli = $(this).index();
//當(dāng)點(diǎn)擊當(dāng)前張的小圓點(diǎn)時(shí)，不做任何    操作，防止跳變的Bug
if(nextli == nowli){
    return;
}
move();
    $(this).addClass('active').siblings().removeClass('active');
});

//左按鈕的點(diǎn)擊事件
    // $prev.click(function() {
  //  nextli--;
//  move();
  //  //改變圓點(diǎn)樣式
    //      $points.eq(nextli).addClass('active').sibli    ngs().removeClass('active');
// });

  // //右按鈕的點(diǎn)擊事件
// $next.click(function() {
  //  nextli++;
  //  move();
  //  //改變圓點(diǎn)樣式
//  $points.eq(nextli).addClass('active').siblings().removeClass('active');
// });

//針對(duì)外層的slide做鼠標(biāo)進(jìn)入和離開事      件，因?yàn)槭髽?biāo)指針有可能進(jìn)入到左右翻頁    和小圓點(diǎn)的范圍
//mouseenter使鼠標(biāo)進(jìn)入子元素也能清除定時(shí)器
    $('.slide').mouseenter(function() {
clearInterval(timer);

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

  //定時(shí)器循環(huán)自動(dòng)播放
    timer = setInterval(autoplay, 3000);

      //自動(dòng)播放的邏輯與點(diǎn)擊下一張是相同的
  function autoplay(){
          nextli++;
        move();
        //改變圓點(diǎn)樣式
                $points.eq(nextli).addClass('active').sibli    ngs().removeClass('active');
    }

        function move(){
          //向右走到第一張，再繼續(xù)走時(shí)
    if(nextli < 0){
    nextli = len - 1;//將要來的是最后一張
    nowli = 0;//要離開的是第一張
    $li.eq(nextli).css({left:-600});//把最后一張定位到左側(cè)，準(zhǔn)備進(jìn)入
    $li.eq(nowli).stop().animate({left: 600});//離開的第一張走到右側(cè)
    $li.eq(nextli).stop().animate({left: 0});//馬上要進(jìn)來的最后一張走進(jìn)來
    nowli = nextli;//要離開的賦值為剛進(jìn)入的最后一張
    return;//下邊是正常情況的，不執(zhí)行，直接返回
    }
      //向左走到最后一張，再繼續(xù)走時(shí)
if(nextli > len - 1){
    nextli = 0;//將要來的是第一張
    nowli = len - 1;//要離開的是最后一張
        $li.eq(nextli).css({left:600});//把第一張定位到右側(cè)，準(zhǔn)備進(jìn)入
        $li.eq(nowli).stop().animate({left: -600});//離開的最后一張走到左側(cè)
          $li.eq(nextli).stop().animate({left: 0});//馬上要進(jìn)來的第一張走進(jìn)來
          nowli = nextli;//要離開的賦值為剛進(jìn)入的第一張
          return;//下邊是正常情況的，不執(zhí)行，直接返回
}

      if(nextli > nowli){
    //馬上要進(jìn)來的這張瞬間移動(dòng)到右邊
    $li.eq(nextli).css({left:220});
    //當(dāng)前這張離開
    $li.eq(nowli).stop().animate({left: -220});
}else{
    //馬上要進(jìn)來的這張瞬間移動(dòng)到左邊
    $li.eq(nextli).css({left:-220});
    //當(dāng)前這張離開
        $li.eq(nowli).stop().animate({left: 220});
}
    //馬上要進(jìn)來的這張走到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;//將要運(yùn)動(dòng)過來的li
  var nowli = 0;//當(dāng)前要離開的li
  var timer = null;


  //除第一個(gè)li，都定位到右側(cè)
$li.not(':first').css({left:750});

  //動(dòng)態(tài)創(chuàng)建小圓點(diǎn)
  $li.each(function(index){
      //創(chuàng)建li
      var $sli = $('<li></li>');
      //第一個(gè)li添加選中樣式
      if(index == 0){
          $sli.addClass('active1');
      }
      //將小圓點(diǎn)的li添加到ul中
      $sli.appendTo('.points1');
  })

      $points1 = $('.points1 li');
// alert($points1.length);//4個(gè)小圓點(diǎn)

  //小圓點(diǎn)的點(diǎn)擊事件
  $points1.click(function() {
      nextli = $(this).index();
      //當(dāng)點(diǎn)擊當(dāng)前張的小圓點(diǎn)時(shí)，不做任何操作，防止跳變的Bug
      if(nextli == nowli){
          return;
      }
        move();
              $(this).addClass('active1').siblings().rem    oveClass('active1');
  });

    // //左按鈕的點(diǎn)擊事件
    prev.click(function() {
  //  nextli--;
  //  move();
  //  //改變圓點(diǎn)樣式
  //            $points1.eq(nextli).addClass('active1').s      iblings().removeClass('active1');
  // });

  // //右按鈕的點(diǎn)擊事件
  // $next.click(function() {
  //  nextli++;
  //  move();
  //  //改變圓點(diǎn)樣式
  //        $points1.eq(nextli).addClass('active1').siblings().removeClass('active1');
  // });

  //針對(duì)外層的slide做鼠標(biāo)進(jìn)入和離開    事件，因?yàn)槭髽?biāo)指針有可能進(jìn)入到左右翻頁和小圓點(diǎn)的范圍
  //mouseenter使鼠標(biāo)進(jìn)入子元素也能清除定時(shí)器
  $('.slide1').mouseenter(function() {
clearInterval(timer);
  });
  $('.slide1').mouseleave(function() {
      timer = setInterval(autoplay,     3000);
});

  //定時(shí)器循環(huán)自動(dòng)播放
  timer = setInterval(autoplay, 3000);

    //自動(dòng)播放的邏輯與點(diǎn)擊下一張是相同的
  function autoplay(){
      nextli++;
      move();
      //改變圓點(diǎn)樣式
        $points1.eq(nextli).addClass('active1').s    iblings().removeClass('active1');
  }

    function move(){
    //向右走到第一張，再繼續(xù)走時(shí)
        if(nextli < 0){
          nextli = len - 1;//將要來的是最    后一張
          nowli = 0;//要離開的是第一張
          $li.eq(nextli).css({left:-750});//把最后一張定位到左側(cè)，準(zhǔn)備進(jìn)入
          $li.eq(nowli).stop().animate({left: 750});//離開的第一張走到右側(cè)
    $li.eq(nextli).stop().animate({left: 0});//馬上要進(jìn)來的最后一張走進(jìn)來
    nowli = nextli;//要離開的賦值為剛進(jìn)入的最后一張
    return;//下邊是正常情況的，不執(zhí)行，直接返回
}
//向左走到最后一張，再繼續(xù)走時(shí)
if(nextli > len - 1){
    nextli = 0;//將要來的是第一張
    nowli = len - 1;//要離開的是最后一張
    $li.eq(nextli).css({left:600});//把第一張定位到右側(cè)，準(zhǔn)備進(jìn)入
    $li.eq(nowli).stop().animate({left: -750});//離開的最后一張走到左側(cè)
    $li.eq(nextli).stop().animate({left: 0});//馬上要進(jìn)來的第一張走進(jìn)來
    nowli = nextli;//要離開的賦值為剛進(jìn)入的第一張
    return;//下邊是正常情況的，不執(zhí)行，直接返回
}

if(nextli > nowli){
    //馬上要進(jìn)來的這張瞬間移動(dòng)到右邊
    $li.eq(nextli).css({left:750});
    //當(dāng)前這張離開
    $li.eq(nowli).stop().animate({left: -750});
}else{
    //馬上要進(jìn)來的這張瞬間移動(dòng)到左邊
    $li.eq(nextli).css({left:-750});
    //當(dāng)前這張離開
    $li.eq(nowli).stop().animate({left: 750});
}
//馬上要進(jìn)來的這張走到0的位置
$li.eq(nextli).stop().animate({left: 0});
nowli = nextli;
  }
  })