美文网首页
JQuery轮播图

JQuery轮播图

作者: 书中有凉气 | 来源:发表于2016-12-25 22:24 被阅读0次

    平移轮播：

    预览：
    https://jirengu-inc.github.io/jrg-renwu8/homework/%E5%BC%A0%E8%BD%A9/renwu27-1.html#
    源码：

    <html>
<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'>
</script>
<style>
        *{
            padding:0px;
            margin:0px;
        }
    li{
        list-style:none;
    }
    .ul{
        width:2880px;
        position:relative;
        left:-960px;
    }
    .ul li{
        float:left;
        left:100px; 
    }
    .clearfloat::after{
        content: ' ';
        display: block;
        clear: both;
    }
    .clearfloat::before{
        content: ' ';
        display: block;
        clear: both;
    }
    .wrap{
        width:480px;
        height:360px;
        position:absolute; 
        overflow:hidden;
        margin:20px;
    }
    .wrap>a{
        text-decoration:none;
        width:30px;
        height:30px;
        line-height:30px;
        padding-left:0px;
        margin:15px;    
        border-radius:30px;
        position:absolute;
        z-index:10;
        top:40%;
        font-size:15px;
        text-align: center;
        background-color:black;
        color:#fff;
        opacity:0.4;
    }
    .wrap .right{
        right:0px;
    }
    .wrap>a:hover{
        opacity:0.7;
    }
    .choosebtn{
        height: 12px;
        width: 200px;
        position: absolute;
        top: 90%;
        left:30%;
    }

    .choosebtn a{
        float: left;
        height: 10px;
        width: 40px;
        z-index: 10px;
        background-color: grey;
        border-radius: 5px;
        margin-left: 8px;
        opacity: 0.6;
    }
    .choosebtn a:hover{
        opacity: 1;
    }
    .choosebtn .choosebtn-1{
        opacity: 1;
    }
    
</style>
</head>
<body>
    <div class='wrap'>
        <ul class='ul clearfloat'>
            <li><a href='#'>![](https://img.haomeiwen.com/i1844479/357ec1b8222eb27b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
            <li><a href='#'>![](https://img.haomeiwen.com/i1844479/9e3549423ccad79e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
            <li><a href='#'>![](https://img.haomeiwen.com/i1844479/cdbf88bac9a43133.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
            <li><a href='#'>![](https://img.haomeiwen.com/i1844479/6e94ce704ce7a36f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
            <li><a href='#'>![](https://img.haomeiwen.com/i1844479/357ec1b8222eb27b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
            <li><a href='#'>![](https://img.haomeiwen.com/i1844479/9e3549423ccad79e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        </ul>
        <ul class='choosebtn clearfloat'>
            <li><a href='#' class='choosebtn-1'></a></li>
            <li><a href='#'></a></li>
            <li><a href='#'></a></li>
            <li><a href='#'></a></li>
        </ul>
        <a href='#' class='left'><</a>
        <a href='#' class='right'>></a>
    </div>
    
    <script>
        var $l=$('.left'),
            $r=$('.right'),
            $ul=$('.ul'),
            $choosebtn=$('.choosebtn'),
            state=true;
        function leftmove(){
            clearInterval(animating);
            $ul.animate({left:'+=480'},1500, backdiv);
            animating=setInterval(rightmove, 4000);
        }
        function rightmove(){
            clearInterval(animating);
            $ul.animate({left:'-=480'},1500, backdiv);
            animating=setInterval(rightmove, 4000);
        }
        function backdiv(){
            if($ul.css('left')=='0px'){
                $ul.css({left:'-1920px'});
            }
            if($ul.css('left')=='-2400px'){
                $ul.css({left:'-480px'});
            }
            btnclass(btn.location());
            state=true;
            
        }
        function btnclass(num){
            $choosebtn.children().children().removeClass('choosebtn-1');
            $choosebtn.children().eq(num).children().addClass('choosebtn-1');
        }
        var btn={
            location:function(){
                var num;
                if(parseInt($ul.css('left'))/480+2==0){
                    num=0;
                };
                if(parseInt($ul.css('left'))/480+2==-1){
                    num=1;
                };
                if(parseInt($ul.css('left'))/480+2==-2){
                    num=2;
                };
                if(parseInt($ul.css('left'))/480+2==1){
                    num=3;
                };
                return num;
            },
            clicklocation: function(p){
                return p.index('a')-6
            }
        }
        
        

        $l.on('click', function(){
            if(!state){return;};
            state=false;
            leftmove(); 
        })
        $r.on('click', function(){
            if(!state){return;};
            state=false;
            rightmove();
        })
        $choosebtn.on('click', 'a', function(){
            clearInterval(animating);
            var tmp=btn.location()-btn.clicklocation($(this));
            if(tmp==2||tmp==3){
                $ul.css({left:'-2400px'});
            }
            if(tmp>0){
                $ul.animate({left:'+='+tmp*480},1500, backdiv);
            }
            if(tmp<0){
                $ul.animate({left:'-='+Math.abs(tmp)*480},1500, backdiv);
            }
            else{
                return;
            }
            animating=setInterval(rightmove, 4000);
        });
        var Timeout=setTimeout(rightmove, 2000),animating;
    </script>
</body>
</html>

    渐变轮播

    预览：
    https://jirengu-inc.github.io/jrg-renwu8/homework/%E5%BC%A0%E8%BD%A9/renwu27-2.html
    源码：

    <html>
<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'>
</script>
<style>
        *{
            padding:0px;
            margin:0px;
        }
    li{
        list-style:none;
    }
    .ul{
        width:2880px;
        position:relative;
    }
    .ul li{
        position:absolute;
        float:left;
        display:none;
    }
    .ul li:first-child{
        display:block;
    }
    .clearfloat::after{
        content: ' ';
        display: block;
        clear: both;
    }
    .clearfloat::before{
        content: ' ';
        display: block;
        clear: both;
    }
    .wrap{
        width:480px;
        height:360px;
        position:absolute; 
        overflow:hidden;
        margin:20px;
    }
    .wrap>a{
        text-decoration:none;
        width:30px;
        height:30px;
        line-height:30px;
        padding-left:0px;
        margin:15px;    
        border-radius:30px;
        position:absolute;
        z-index:10;
        top:40%;
        font-size:15px;
        text-align: center;
        background-color:black;
        color:#fff;
        opacity:0.4;
    }
    .wrap .right{
        right:0px;
    }
    
    .choosebtn{
        height: 12px;
        width: 200px;
        position: absolute;
        top: 90%;
        left:30%;
    }
    .choosebtn a{
        float: left;
        height: 10px;
        width: 40px;
        z-index: 10px;
        background-color: grey;
        border-radius: 5px;
        margin-left: 8px;
        opacity: 0.6;
    }
    .choosebtn a:hover{
        opacity: 1;
    }
    .choosebtn .choosebtn-1{
        opacity: 1;
    }
    
</style>
</head>
<body>
    <div class='wrap'>
        <ul class='ul clearfloat'>
            <li><a href='#'>![](https://img.haomeiwen.com/i1844479/6d5d84005da77b16.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
            <li><a href='#'>![](https://img.haomeiwen.com/i1844479/4e058bfbad78fd36.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
            <li><a href='#'>![](https://img.haomeiwen.com/i1844479/bf7ac22d91c04f47.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
            <li><a href='#'>![](https://img.haomeiwen.com/i1844479/30efc129e9f5b48c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        </ul>
        <ul class='choosebtn clearfloat'>
            <li><a href='#' class='choosebtn-1'></a></li>
            <li><a href='#'></a></li>
            <li><a href='#'></a></li>
            <li><a href='#'></a></li>
        </ul>
        <a href='#' class='left'><</a>
        <a href='#' class='right'>></a>
    </div>
    
    <script>
        var $l=$('.left'),
                $r=$('.right'),
                $ul=$('.ul'),
                $ul_child=$('.ul').children(),
                $choosebtn=$('.choosebtn');
        function leftmove(){
      clearInterval(time);
      if(picstart()==3){btnclass(0);}
      else{btnclass(picstart()+1);}
            changeopacity('left', picstart());

        }
        function rightmove(){
      clearInterval(time);
      if(picstart()==3){btnclass(0);}
      else{btnclass(picstart()+2);}
            changeopacity('right', picstart());
      time=setInterval(rightmove, 3000);
        }
        function clickbtn(){
      clearInterval(time);
            btnclass($(this).index());
      $ul_child.hide('slow');
      $ul_child.eq($('.choosebtn a').index($(this))).show('slow');
      time=setInterval(rightmove, 3000);


        }
        function btnclass(num){
            $choosebtn.children().children().removeClass('choosebtn-1');
            $choosebtn.children().eq(num).children().addClass('choosebtn-1');
        }
        function picstart(){
            return $ul.children(":visible").index();

        }
        function changeopacity(action, piclocation){
      $ul_child.hide('slow');
            if(action=='left'){
                if(piclocation==0){
                    $ul_child.last().show('slow');
                }
                else{
                    $ul_child.eq(piclocation-1).show('slow');
                }
            }
            if(action=='right'){
                if(piclocation==$ul_child.length-1){
                    $ul_child.first().show('slow');
                }
                else{
                    $ul_child.eq(piclocation+1).show('slow');
                }
            }
        }   
        
        $l.on('click', leftmove);
        $r.on('click', rightmove);
        $choosebtn.on('click', 'a', clickbtn);
    var time=setTimeout(rightmove, 3000);
        
    </script>
</body>
</html>

    全屏轮播：

    预览：
    https://jirengu-inc.github.io/jrg-renwu8/homework/%E5%BC%A0%E8%BD%A9/renwu27-3.html
    源码：

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>无线轮播</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
  
    <style type="text/css">

    
    html,body,ul,li,p{
      margin: 0;
      padding: 0;
    }
    li{
      list-style: none;
    }
    a{
      text-decoration: none;
    }
    html, body, #header, #header .carousel, #header .img-ct{
      height: 100%;
      width: 100%;
    }
    .carousel{
      position: relative;
      width: 310px;
      height: 206px;
      overflow: hidden;
    }
    #header .img-ct{
      position: absolute;
    }
    #header .img-ct:after{
      content: '';
      display: table;
      clear: both;
    }
    #header .item{
      position: relative;
      float: left;
      height: 100%;
    }
    #header .main{
      position: absolute;
      width: 600px;
      left: 50%;
      top: 50%;
      z-index: 1;
      transform: translate(-50%, -50%);
      color: #fff;
      text-align: center;
    }
    #header .main h3{
      font-size: 34px;
    }
    #header .main p{
      font-size: 16px;
      line-height: 2;
    }
      
    #header .cover{
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      opacity: 0.8;
    }



  
    .arrow{
      position: absolute;
        top: 50%;
        margin-top: -15px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #4E443C;
        color: #fff;
        border-radius: 30px;
        box-shadow: 0 0 2px #999;
        opacity: 0.8
    }
    .arrow:hover {
        opacity: 1;
    }
    .pre{
      left: 10px;
    }
    .next{
      right: 10px;
    }
    ul.bullet {
          position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
    }
    ul.bullet li {
        width: 36px;
        height: 10px;
        border-radius: 4px;
        background: #fff;
        display: inline-block;
        cursor: pointer;
    }

    ul.bullet li.active {
        background: #666;
    }


    </style>

  </head>
  <body>
  <div id="header">
    <div class="carousel">
      <ul class="img-ct">

            <li class="item">
              <div class="cover" data-bg-img="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg" style="width: 1920px; background-image: url("http://cdn.jirengu.com/book.jirengu.com/img/6.jpg");"></div>
              <div class="main">
                <h3>夜空中最亮的星</h3> 
                <p>是否在意</p>
              </div>
            </li>
            <li class="item">
              <div class="cover" data-bg-img="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg" style="width: 1920px; background-image: url("http://cdn.jirengu.com/book.jirengu.com/img/7.jpg");"></div>
              <div class="main">
                <h3>只是因为在人群中看了你一眼</h3> 
                <p>是否在意</p>
              </div>
            </li>
            <li class="item">
              <div class="cover" data-bg-img="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg" style="width: 1920px; background-image: url("http://cdn.jirengu.com/book.jirengu.com/img/8.jpg");"></div>
              <div class="main">
                <h3>往城市边缘开</h3> 
                <p>把车窗都咬下来</p>
              </div>
            </li>
            <li class="item">
              <div class="cover" data-bg-img="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg" style="width: 1920px; background-image: url("http://cdn.jirengu.com/book.jirengu.com/img/9.jpg");"></div>
              <div class="main">
                <h3>夜空中最亮的星</h3> 
                <p>是否在意</p>
              </div>
            </li>
      </ul>
      <ul class="bullet">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>    
  </div>



    
    <script type="text/javascript">
    //$(function(){
      
      var $ct = $('.img-ct'),
        $items = $ct.children(),
        $pre = $('.pre'),
        $next = $('.next'),
        $bullet = $('.bullet'),
        imgWidth = $(window).width(),
        imgCount = $ct.children().length;

      $ct.prepend($items.last().clone());
      $ct.append($items.first().clone());
      $ct.find('.item').css('width', imgWidth);
      $ct.find('.cover').css('width', imgWidth);
      imgRealCount = $ct.children().length;
      $ct.css({left: 0-imgWidth, width: imgRealCount*imgWidth})


      var curIdx=0;

      function startClock(){
        clock= setInterval(function(){
          playNext();
        },3000);
      }
      function stopClock(){
        clearInterval(clock);
      }

      startClock();

      $bullet.find('li').on('click', function(){
        var idx=$(this).index();
        if(idx> curIdx){
          playNext(idx- curIdx)
        }
        else if(idx< curIdx){
          playPrev(curIdx- idx)
        }
      })


      function playNext(idx){
        $ct.animate({left:'-='+idx*imgWidth},function(){
          curIdx=(curIdx+ idx)%imgCount;
          if(curIdx==0){
            $ct.css({left:'0'-imgWidth});
          }
          setBullet();
        });
      }

      function playPrev(idx){
        $ct.animate({left:'+='+idx*imgWidth},function(){
          curIdx=(imgCount+ curIdx- idx)%imgCount;
          if(curIdx==(imgCount-1)){
            $.css({left:'0'-imgCount*imgWidth});
          }
          setBullet();
        })
      }

      function setBullet(){
        $bullet.children().removeClass('active').eq(curIdx).addClass('active');
      }


    
    </script>
  </body>
</html>

    相关文章

      网友评论

          本文标题：JQuery轮播图

          本文链接：https://www.haomeiwen.com/subject/bcgkvttx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|JQuery轮播图|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！