第八周第三天笔记之轮播图左右切换实例

2018-09-10 本文已影响0人果木山

轮播图左右切换实例

思路：
1. 搭建页面结构：创建固定宽度的外容器wrap，创建固定宽度的boxBanner，宽度超出wrap容器范围，利用left的变化来进行左右切换；
2. 获取元素
3. 在boxBanner里面四张图片的后面添加一张跟第一张一样的图片，作为假图片，完成boxBanner的瞬间移动肉眼误差，同时一定要重新设置boxBanner的宽度；
4. 创建全局变量n，作为图片运动的left值设置，以及对应的按钮的设置，为最重要的值，通过n值的变化，来跳转位置，及按钮设置；
5. autoMove函数的创建，代表的是一个运动过程，从指定位置开始，在规定时间内以什么样的运动效果，到达目标位置，然后做什么事情；指的就是一个位置改变的过程；
6. 图片自动轮播，实质就是创建一个定时器，在间隔时间内，不断的改变位置，调用autoMove函数；
7. 焦点li元素按钮，跟随图片自动轮播时，代表相对应的按钮颜色；
8. 鼠标移入移出事件，给外容器wrap添加；
9. 按钮li元素添加点击事件，点击每个按钮，就跳转到相对应的图片，通过判断i值与n值的关系来设置；
10. 左右按钮a元素添加点击事件，注意边界值的判断；
注意点：
- 全局变量n的设置，贯穿整个实例，通过n值的变化，改变boxBanner位置，达到轮播效果；其中焦点按钮跟随设置、焦点按钮点击事件、左右按钮点击事件都与n值相关联；
- autoMove函数中边界点的判断，需要细细琢磨；
- 焦点按钮点击事件中，需注意n值与i值的关系，需细细思考；

代码：

HTML代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>左右轮播图实例</title>
     <style type="text/css">
         *{
             margin: 0;
             padding: 0;
             list-style: none;
         }
         .wrap{
             width: 750px;
             height: 292px;
             margin: 30px auto;
             position: relative;
             overflow: hidden;
         }
         .wrap .boxbanner{
             position: absolute;
             left: 0;
             top: 0;
             width: 3000px;
             height: 292px;
         }
         .wrap .boxbanner img{
             float: left;
             width: 750px;
             height: 292px;
             vertical-align: middle;
         }
         .wrap ul{
             position: absolute;
             width: 140px;
             left: 50%;
             margin-left: -70px;
             bottom: 10px;
         }
         .wrap ul li{
             width: 20px;
             height: 20px;
             border-radius: 50%;
             background-color: lightslategray;
             float: left;
         }
         .wrap ul li+li{
             margin-left: 20px;
         }
         .wrap ul li.active{
             background-color: orangered;
         }
         .wrap a{
             position: absolute;
             width: 43px;
             height: 67px;
             top:50%;
             margin-top: -30px;
             background-image: url("image1/6.png");
             background-repeat: no-repeat;
             opacity: 0.5;
             filter: alpha(opacity=50);
             display: none;
         }
         .wrap a.Left{
             left: 10px;
             background-position: 0 0;
         }
         .wrap a.Right{
             right: 10px;
             background-position: -63px 0;
         }
         .wrap a:hover{
             opacity: 1;
             filter: alpha(opacity=100);
         }
     </style>
 </head>
 <body>
 <div class="wrap">
     <div class="boxbanner">
         <img src="image1/1.jpg" alt="">
         <img src="image1/2.jpg" alt="">
         <img src="image1/3.jpg" alt="">
         <img src="image1/4.jpg" alt="">
     </div>
     <ul>
         <li class="active"></li>
         <li></li>
         <li></li>
         <li></li>
     </ul>
     <a href="javascript:void(0);" class="Left"></a>
     <a href="javascript:void(0);" class="Right"></a>
 </div>
 <script src="utils.js"></script>
 <script src="moveEffect.js"></script>
 <script src="animatSuper.js"></script>
 <script src="banner.js"></script>
 </body>
 </html>

JS代码：

 //1 获取元素
 var oWrap=utils.getByClass("wrap",document)[0];
 var oboxBanner=utils.getByClass("boxbanner",oWrap)[0];
 var aImg=oboxBanner.getElementsByTagName("img");
 var aBtn=oWrap.getElementsByTagName("li");
 var Left=utils.getByClass("Left",oWrap)[0];
 var Right=utils.getByClass("Right",oWrap)[0];
 //2 在最后添加一张与第一张相同的图片，调整宽度
 oboxBanner.innerHTML+='<img src="image1/1.jpg" alt="">';
 oboxBanner.style.width=3750+"px";
 //3 创建全局变量n，作为图片运动的left值设置，及对应的按钮的设置
 var n=0;
 //4 图片自动轮播，开启定时器自动轮播
 var timer=setInterval(autoMove,2000);
 //autoMove是一个运动过程
 function autoMove() {
     //边界值判断
     if(n>=aImg.length-1){
         n=0;
         oboxBanner.style.left=0;
     }
     n++;
     //此处的n值为：1,2,3,4,1,2,3,4依次循环
     //oboxBanner.style.left=-n*750+"px";
     //移动的效果用运动效果来实现，animate
     animate({
         ele:oboxBanner,
         duration: 500,
         effect:2,
         target:{
             left:-n*750//此处left不能设置单位；
         }
     });
     bannerTip();
 }
 //5 焦点跟随轮播
 function bannerTip() {
     for(var i=0; i<aBtn.length; i++){
         aBtn[i].className=i==n%4?"active":null;
     }
 }
 //6 鼠标移入停止运动
 oWrap.onmouseover=function () {
     clearInterval(timer);
     Left.style.display=Right.style.display="block";
 };
 //7 鼠标移出继续运动
 oWrap.onmouseout=function () {
     timer=setInterval(autoMove,2000);
     Left.style.display=Right.style.display="none";
 };
 //8 点击li元素时，显示对应的图片
 handleChange();
 function handleChange() {
     for(var i=0; i<aBtn.length; i++){
         (function (index) {
             aBtn[index].onclick=function () {
                 n=index-1;
                 autoMove();
             }
         })(i);
     }
 }
 //9 左右按钮点击运动
 handleLeftRight();
 function handleLeftRight() {
     Left.onclick=function () {
         if(n<=0){
             n=aImg.length-1;
             oboxBanner.style.left=-n*750+"px";
         }
         n--;
         animate({
             ele:oboxBanner,
             duration: 500,
             effect:2,
             target:{
                 left:-n*750//此处left不能设置单位；
             }
         });
         bannerTip();
     };
     Right.onclick=function () {
         autoMove();
     }
 }

第八周第三天笔记之轮播图左右切换实例

轮播图左右切换实例

猜你喜欢

热点阅读