jquery实现几种常用的轮播效果

作者: admin 分类: js 发布时间: 2017-05-15 02:48

最近磨机事业部的网站需要改版,需要几种轮播特效于是就实现几种轮播特效

一、一次滚动一张图片

css样式

/**
 * start banner-slider
 */
.banner-slider { width:100%; position:relative; overflow:hidden;zoom:1;}
.banner-slider .slides{position:relative;overflow:hidden;}
.banner-slider .slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.banner-slider .slides img{width:100%;}
.banner-slider .slides li{width:100%;float:left;margin-right:-100%;z-index: 1;opacity:0;}
.banner-slider .slides li:first-child{opacity:1;z-index: 2}
.banner-slider .num-nav { position:absolute;  right:10%;  font-size:0px;top:50%;}
.banner-slider .num-nav li { width:8px; height:8px; background-color:#888; border-radius:50%;display:block;margin:6px 0px; cursor:pointer;}
.banner-slider .num-nav li.on {background-color: #ff6a00;}
.banner-slider .caption{width:30%;background-color:#ecf2fa;padding:20px 30px;position:absolute;top:20%;right:10%}
.banner-slider .caption h3{color:#383e47;}
.banner-slider .caption p{color:#757e89;}
.banner-slider .flexslider .slides li a{text-decoration: none;}
/**
 * end banner-slider
 */

jquery代码

$(document).ready(function () {
    function bannerSlider(){
      var i = 0;

      var size = $(".banner-slider .slides li").size();
      var width= $(".banner-slider .slides li").width();

      $(".banner-slider .slides").after(" <ol class=\"num-nav\"> </ol> ");
      for (var j = 0; j < size; j++) {
          $(".banner-slider .num-nav").append("<li></li>");
      }

      $(".banner-slider .num-nav li").first().addClass("on");
      $(".banner-slider .slides li").eq(0).animate({"z-index":"2","opacity":"1"},1000).siblings().animate({"z-index":"1","opacity":"0"},1000);

      /*鼠标点击事件*/

      $(".banner-slider .num-nav li").click(function () {

          var index = $(this).index();//获取当前索引值
          
          i = index;
          $(".banner-slider .slides li").eq(index).animate({"z-index":"2","opacity":"1"},1000).siblings().animate({"z-index":"1","opacity":"0"},1000);
          $(this).addClass("on").siblings().removeClass("on");
      });
    }
    bannerSlider();
    
});

html代码

 <div class="banner-slider"> 
   <ul class="slides"> 

   <li><a href="#"><img src="imgs/banner_01.jpg" /> <div class="caption"><h3>Adventurer CheesecakeAdventurer </h3><p>Adventurer CheesecakeAdventurer CheesecakeAdventurer </p></div></a></li>
         <li><a href="#"><img src="imgs/banner_02.jpg" /> <div class="caption"><h3>Adventurer CheesecakeAdventurer </h3><p>Adventurer CheesecakeAdventurer CheesecakeAdventurer </p></div></a></li>
         <li><a href="#"><img src="imgs/banner_03.jpg" /> <div class="caption"><h3>Adventurer CheesecakeAdventurer </h3><p>Adventurer CheesecakeAdventurer CheesecakeAdventurer </p></div></a></li>
         <li><a href="#"><img src="imgs/banner_04.jpg" /> <div class="caption"><h3>Adventurer CheesecakeAdventurer </h3><p>Adventurer CheesecakeAdventurer CheesecakeAdventurer </p></div></a></li>
   </ul> 
  
   
  </div> 

实现效果

二、一次滚动多张图片

css代码

/**
 * start pro-slider
 */
.products-center{max-width: 1200px;margin:0px auto;position:relative;}
.pro-slider { width:100%; margin:60px 0; }
.pro-slider .pro-view{overflow:hidden;width:100%;}
.pro-slider .slides{width:1200%; position:relative;/*background-color: #0f0*/;}
.pro-slider .slides img{width:100%;position:relative;vertical-align: middle;}
.pro-slider .slides li{float:left;}
.pro-slider .num-nav { position:absolute; width:100%; bottom:-40px; left:0px; text-align:center; font-size:0px;}
.pro-slider .num-nav li { width:10px; height:10px; background-color:#888; border-radius:50%;display:inline-block;margin:0px 3px; cursor:pointer;}
.pro-slider .num-nav li.on {background-color: #ff6a00;}
.pro-slider .btn {width: 50px;height: 50px;background-color: #808080;opacity: 0.5; filter:alpha(opacity:0.5); position:absolute;top:40%; cursor:pointer; text-align:center; line-height:50px; font-size:40px; color:#fff; font-family:"宋体"; display:block; border-radius: 50%; -moz-border-radius: 50%; /* Firefox */ -webkit-border-radius: 50%; /* Safari 和 Chrome */ }
.pro-slider .btn_l { left:-100px;}
.pro-slider .btn_r { right:-100px;}

.pro-slider .pro-caption{color:#575c67;text-align: center;height:97px;background-color: #fff;line-height: 97px;margin-top: 1px;}
.pro-slider .slides li a{text-decoration: none; }
.pro-slider .slides li a:hover .pro-caption{color:#ff7271;}
.pro-slider .slides li a:visited .pro-caption{color:#ff7271;}

.pro-slider .hide-nav{background-color: #ccc}
@media screen and (max-width: 1440px) {
  .pro-slider .btn_r { right:50px;}
  .pro-slider .btn_l { left:50px;}
  .pro-slider .btn {width:30px;height:30px;line-height:30px; font-size:30px;  }
}

/**
 * end pro-slider
 */

 

js代码

$(document).ready(function() {
  function proSlider() {
    var i = 0;
    var size;
    var sliderWidth;
    var pages;
    var width;
    var marginLeft;
    var mvWidth ;
    reset();
    function init(num) {
      i = 0;
      size = $(".pro-slider .slides li").size();
      sliderWidth = $(".products-center").width();
      pages = Math.ceil(size / num);
      width = sliderWidth * ((1 - 0.025 * (num - 1)) / num);

      if (num > 1) {
        marginLeft = 0.025 * sliderWidth;
      } else {
        marginLeft = 0;
      }

      $(".pro-slider .slides li").width(width);
      $(".pro-slider .slides li").css("margin-left", marginLeft);
      $(".pro-slider .slides li:nth-child(" + num + "n+1)").css("margin-left", 0);
      //$(".pro-slider .slides").finish().animate({ left: -i * sliderWidth }, 0);
      if ($(".pro-slider .pro-view").size() == 0) {
        $(".pro-slider .slides").wrap("<div class='pro-view'></div>");
      }

      $(".pro-slider .slides").siblings().remove();
      //$('.pro-slider .pro-view').siblings().css('background-color', 'red');
      $(".pro-slider .slides").after("<div class=\"btn btn_l\">&lt;</div> <div class=\"btn btn_r\">&gt;</div> ");
      $(".pro-slider .slides").after("<ol class=\"num-nav\"> </ol> ");
      for (var j = 0; j < pages; j++) {
        $(".pro-slider .num-nav").append("<li></li>");
      }
      $(".pro-slider .num-nav li").first().addClass("on");
      hideNav();
      $(".pro-slider .slides").finish().animate({
        left: -i * sliderWidth
      },0);

      /*鼠标点击事件*/

      $(".pro-slider .num-nav li").click(function() {

        var index = $(this).index(); //获取当前索引值
        i = index;
        $(".pro-slider .slides").finish().animate({
          left: -index * sliderWidth
        },
        400);
        $(this).addClass("on").siblings().removeClass("on");
        hideNav();
      });

      /*向左按钮*/
      $(".pro-slider .btn_l").click(function() {

        if (i > 0 && i <= (pages - 1)) {
          i--;
          hideNav();
          move();

        }

      })

      /*向右按钮*/
      $(".pro-slider .btn_r").click(function() {
        if (i >= 0 && i < (pages - 1)) {
          i++;
          hideNav();
          move();

        }
      })
    }

    function reset() {
      sliderWidth = $(".products-center").width();
     

      if(sliderWidth > 776) {
        //console.log("init3->"+sliderWidth);
         init(3);
      } 
      else if(480 < sliderWidth&&sliderWidth <= 776) {
        //console.log("init2->"+sliderWidth);
        init(2);
      } 
      else if(sliderWidth<= 480) {
        //console.log("init1->"+sliderWidth);
        init(1);
       
      }
    }



    /*判断左右导航状态*/
    function hideNav() {
      if (i == pages - 1) {
        $(".pro-slider .btn_r").addClass("hide-nav");
        $(".pro-slider .btn_l").removeClass("hide-nav");
      }
      if (i == 0) {
        $(".pro-slider .btn_l").addClass("hide-nav");
        $(".pro-slider .btn_r").removeClass("hide-nav");
      }
    }
    /*移动事件*/
    function move() {

      $(".pro-slider .slides").finish().animate({
        left: -i * sliderWidth
      },
      400);
      $(".pro-slider .num-nav li").eq(i).addClass("on").siblings().removeClass("on");

    }



    $(window).resize(function() {

      reset();

    });

  }

  proSlider();

});

html代码

<div class="products-center">
            <div class="pro-slider"> 
             <ul class="slides"> 
                <li><a href="#"><img src="images/p1.jpg" /> <div class="pro-caption">Adventurer Cheesecake Brownie1</div></a></li>
                <li><a href="#"><img src="images/p2.jpg" /> <div class="pro-caption">Adventurer Cheesecake Brownie2</div></a></li>
                <li><a href="#"><img src="images/p3.jpg" /> <div class="pro-caption">Adventurer Cheesecake Brownie3</div></a></li>
                <li><a href="#"><img src="images/p4.jpg" /> <div class="pro-caption">Adventurer Cheesecake Brownie4</div></a></li>
                <li><a href="#"><img src="images/p5.jpg" /> <div class="pro-caption">Adventurer Cheesecake Brownie5</div></a></li> 
                <li><a href="#"><img src="images/p6.jpg" /> <div class="pro-caption">Adventurer Cheesecake Brownie6</div></a></li>

                
              
             </ul> 
              
             
            </div> 


        </div>  

实现效果

 

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注