[js简单的轮播图]

最新推荐文章于 2024-11-01 22:51:11 发布

蔡大大—

最新推荐文章于 2024-11-01 22:51:11 发布

阅读量136

点赞数

分类专栏： js 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/caicaimysql123/article/details/126309577

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

[知识点]

主要的知识点：点位，定时器，运动函数，jq，css

图片展示:

[css]

css完全可以按自己喜欢的方式来，

.wrap {

                width: 650px;

                height: 365px;

                margin-top: 10px;

                margin-left: auto;

                margin-right: auto;

            }

            .slidepic {

                position: relative;

                height: 365px;

            }

            .hd {

                position: absolute;

                z-index: 10;

                width: 100%;

                height: 100%;

                display: none;

            }

            .hd a {

                position: absolute;

                left: -100px;

                top: 40%;

                width: 76px;

                height: 112px;

                background: url() 0 0 no-repeat;

            }

            .me{

                margin: 0;

                padding: 0;

                font-size: 12px;

                color: #666;

                text-align:center;

                padding-top:15px;

            }

            .slidepic>ul>li{

                display: list-item;

                text-align: -webkit-match-parent;

            }

            #myself {

                position: relative;

                width: 100%;

                height: 700px;

                overflow: hidden;

                background-color: #DEDEDE;

            }

            .slidepic ul {

                position: absolute;

                left: 0;

                top:0px;

                z-index: 1;

                list-style-type: none;

            }

            ul,menu,dir {

                display: block;

                list-style-type: disc;

                -webkit-margin-before: 1em;

                -webkit-margin-after: 1em;

                -webkit-margin-start: 0px;

                -webkit-margin-end: 0px;

                -webkit-padding-start: 40px;

            }

            .hd .next{

                right:0px;

                left:470px;

                background-image: url();

            }

            div {

                display: block;

            }

            body {

                overflow-x: hidden;

            }

            div#aboutme, div#case1 {

                width: 292px;

                height: 127px;

                margin: 20px auto;

                margin-bottom: 20px;

            }

            #myself p, #case p {

                width: 800px;

                margin: 0px auto;

                text-align: center;

                margin-top: 10px;

                color: #8C8C8C;

            }

            .slidepic li {

                position: absolute;

                width: 450px;

                height: 253px;

                left: 0px;

                top: 0;

                background-color: #6475ae;

                list-style-type: none;

            }

[html]

<div class="wrap">
               <div class="slidepic" id="slidepic">
                   <ul>
                       <li style="z-index: 2; width: 200px; height: 100px; left: -166px; top: 0px; opacity: 0;"     ><img src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/09/ChMkJ1bKzdKIJ8mGACiptxsKVJMAALJEgE9JDwAKKnP534.jpg" style="width: 100%; height: 100%;"    ></li>
                       <li style="z-index: 3; width: 200px; height: 100px;  left: -166px; top: 79px; opacity: 0.8;"  ><img src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/09/ChMkJ1bKzdKIJ8mGACiptxsKVJMAALJEgE9JDwAKKnP534.jpg"  style="width: 100%; height: 100%;" ></li>
                       <li style="z-index: 4;width: 200px; height: 100px;  left: 0px; top: 20px; opacity: 0;"       ><img src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/09/ChMkJ1bKzdKIJ8mGACiptxsKVJMAALJEgE9JDwAKKnP534.jpg"  style="width: 100%; height: 100%;"      ></li>
                       <li style="z-index: 3; width: 200px; height: 100px;  left: 390px; top: 79px; opacity: 0.8;"   ><img src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/09/ChMkJ1bKzdKIJ8mGACiptxsKVJMAALJEgE9JDwAKKnP534.jpg"  style="width: 100%; height: 100%;"  ></li>
                       <li style="z-index: 2; width: 200px; height: 100px;  left: 390px; top: 0px; opacity: 0;"      ><img src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/09/ChMkJ1bKzdKIJ8mGACiptxsKVJMAALJEgE9JDwAKKnP534.jpg"  style="width: 100%; height: 100%;"     ></li>
                   </ul>
                   <div class="hd" style="display: none;">
                       <a href="javascript:;" class="prev"></a>
                       <a href="javascript:;" class="next"></a>
                   </div>
               </div>
           </div>
       </div>  
  <script src="http://code.jquery.com/jquery-latest.js"></script>

[js]

 $(function(){
           var $slidepic = $('#slidepic');
           var aLi = $slidepic.find('li');
           var timer = null;
           var off = true;
           //定义li定位数据
           var pos = [
               {
                   width:260,
                   height:180,
                   left:-406,
                   top:100,
                   opacity:1,
                   z:2
               },
               {
                   width:300,
                   height:200,
                   left:-166,
                   top:79,
                   opacity:0.8,
                   z:3
               },
               {
                   width:400,
                   height:260,
                   left:0,
                   top:20,
                   opacity:1,
                   z:4
               },
               {
                   width:300,
                   height:200,
                   left:300,
                   top:79,
                   opacity:0.8,
                   z:3
               },
               {
                   width:260,
                   height:180,
                   left:580,
                   top:100,
                   opacity:1,
                   z:2
               }
           ]
           //设置li定位
           fnMove()
           //上一个按钮
           $slidepic.find('.prev').on('click',function(){
               if(off){
                   off = false;
                   fnMove(true)
               }
           })
           //下一个按钮
           $slidepic.find('.next').on('click',function(){
               if(off){
                   off = false;
                   fnMove(false)
               }
           })
           //li运动函数
           function fnMove(b){
               if(typeof(b) != 'undefined'){         //判断参数有没有传，没有就设置li位置，传了就是按钮点击
                   if(b){
                       pos.push(pos.shift())
                   }else{
                       pos.unshift(pos.pop())
                   }
               }
               $.each(pos, function(i, val) {
                   aLi.eq(i).css('zIndex',pos[i].z).stop().animate(pos[i],500,function(){
                       off = true;
                   });
               });
           }
           //开启定时器自动播放
           timer = setInterval(function(){
               fnMove(true)
           },3000)
           //暂停继续播放，显示隐藏左右切换按钮
           $slidepic.hover(function(){
               clearInterval(timer)
               $(this).find('.hd').fadeIn();
           },function(){
               clearInterval(timer)
               timer = setInterval(function(){
                   fnMove(true)
               },5000)
               $(this).find('.hd').fadeOut();
           })
       })