焦点轮播图代码详解！基础版本

来源：互联网发布：培训学校收费软件编辑：程序博客网时间：2024/06/05 05:53

基本的html框架是这样的

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">      <title>bb</title>    <link href="css/aa.css" rel="stylesheet">    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>    <script type="text/javascript" src="js/aa.js"></script>    <script type="text/javascript" src="js/bb.js"></script>    <style>        *{              margin: 0;             padding: 0;              text-decoration: none;         }        .container{           width:400px;           height:200px;           overflow:hidden;/*隐藏溢出的图片*/           position:relative;           margin:0 auto;        }        .pic{            width:1600px;/*5张图的宽度*/            position:absolute;/*基于父容器进行定位*/        }        .pic div{           float: left;        }        .pic div img{           width:400px;           height:200px;/*想要图片多大比例，就直接定义img标签的大小，其它容器智慧在定位的时候有用，或者overflow截图的时候用*/        }        .position{           position: absolute;           bottom: 0;           right:0;           margin: 0;           background: #000;           opacity: 0.4;           width: 400px;           text-align: center;        }        .position li{             width: 10px;             height: 10px;             margin:0 2px;             display: inline-block;             -webkit-border-radius: 5px;             border-radius: 5px;             background-color: #afafaf;        }        .position .cur{             background-color: #ff0000;        }        .arrow {              cursor: pointer;                  line-height: 39px;              text-align: center;              font-size: 36px;              font-weight: bold;              width: 40px;              height: 40px;               position: absolute;              z-index: 2;              top: 80px;              background-color: RGBA(0,0,0,.3);              color: #fff;        }        .arrow:hover {              background-color: RGBA(0,0,0,.7);        }        .container:hover .arrow {              display: block;        }        .prev {              left: 20px;        }        .next {              right: 20px;        }    </style>  </head><body>          <div class="container">                <div class="pic" style="left:-400px">                    <div><a href="#"><img src="images/1.jpg" alt="pic3copy"></a></div>                    <div><a href="#"><img src="images/2.jpg" alt="pic1"></a></div>                    <div><a href="#"><img src="images/3.jpg" alt="pic2"></a></div>                    <div><a href="#"><img src="images/4.jpg" alt="pic3"></a></div>                </div>                <ul class="position">                    <li class="cur"></li>                    <li class=""></li>                    <li class=""></li>                </ul>                <a href="javascript:;"  class="arrow prev"><</a>                <a href="javascript:;"  class="arrow next">></a>          </div>    </body></html>

下边是逻辑的第一步：写左右按钮的点击事件。——其包含怎样从按钮中提取数据元素，怎样将数据元素给重新赋予按钮之中。(这里需要解释的是这里的图在pic属性为left：0，left：-400，left：-800，left：-1200时分别呈现出来。 )container是个盒子但是只有400宽度，还有个防测漏属性overflow:hidden; 。焦点轮播图的本质就是pic的大盒子一直在左右移动，最关键的属性就是pic的left属性。

$('.next').click(function(){            /*图片向右移动一位*/             if(currentleft=="-1200px"){                currentleft="400px";            }             future=(parseInt(currentleft)-400)+"px";            $(".pic").css("left",future);            currentleft=future;     });       /*左按钮事件*/     $('.prev').click(function(){            /*图片向左移动一位*/                      if(currentleft=="0px"){                currentleft="-1600px";            }            future=(parseInt(currentleft)+400)+"px";            $(".pic").css("left",future);            currentleft=future;     });//这个是不关联圆点的。

下边是关联圆点的。（就是小圆点和图片一起运动的）

$('.next').click(function(){            /*图片向右移动一位*/             if(currentleft=="-1200px"){                currentleft="400px";            }             future=(parseInt(currentleft)-400)+"px";            $(".pic").css("left",future);            currentleft=future;            /*小圆点事件*/            if(index==3){                index=-1;            }                      index++;            showBtn(index);});  /*左按钮事件*/$('.prev').click(function(){            /*图片向左移动一位*/                      if(currentleft=="0px"){                currentleft="-1600px";            }            future=(parseInt(currentleft)+400)+"px";            $(".pic").css("left",future);            currentleft=future;            /*小圆点事件*/            if(index==0){                index=4;            }            index--;            showBtn(index);          });//这个是不关联圆点的。/*小圆点事件*/function showBtn(index){            $(".position li").each(function(){                 $(this).removeClass("cur");             });             $(".position li:eq(" + index + ")").addClass("cur");  }

下边是小圆点点击事件。这里需要注意的是：怎样得到选定元素的索引值index=$('.position li').index(this); 这里不能直接用$(this).index();需要以后探讨

$(".position li").click(function(){         index=$('.position li').index(this);         showBtn(index);         future=(index*-520)+"px";         $(".pic").css("left",future);         currentleft=future;})

阅读全文

0 0