左右案例+小圆点的轮播图+无时间

mustang(野马）

于 2019-07-09 17:40:57 发布

阅读量173

点赞数

分类专栏： js案例

本文链接：https://blog.csdn.net/weixin_45000381/article/details/95215783

版权

js案例专栏收录该内容

26 篇文章 1 订阅

订阅专栏

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* *{
            margin: 0;
            padding: 0;
        } */
        .carousel  /*大的容器*/
        {
            width: 960px;
            height:320px;
            margin: auto;
            position: relative;
            overflow: hidden;
        }
        .imgCon /*图容器*/
        {
            width: 4800px;
            height: 320px;
            position: absolute;
            left: 0;
            font-size: 0;
            transition: all 2s;/*过渡*/

        }
        .imgCon img{  /* 轮播图img的大小*/
            width: 960px;
            height: 320px;
        }
        .dot  /*ul定位*/
        {
            list-style: none;
            position: absolute;
            bottom: 20px;
            left:380px
        }
        .dot>li{  /*lide 设置*/
            width: 18px;
            height: 18px;
            border-radius: 10px;
            border: 1px solid red;
            background-color: rgba(255,0,0,0);/*背景，不可见*/
            float: left;  /*浮动*/
            margin-left: 20px;

        }
        .dot>li:nth-child(1){
            background-color: rgba(255,0,0,0.6);
        }
        .leftBn,.rightBn  /*左右按钮*/
        {
            position: absolute;
            top:140px;
        }
        .leftBn{  /*左按钮*/
            left:20px;
        }
        .rightBn{ /*又按钮*/
            right: 20px;
        }
    </style>
</head>
<body>
    <div class="carousel">
        <!-- 图片，背景图片 -->
        <div class="imgCon">
            <img src="./img/a.jpeg">
            <img src="./img/b.jpeg">
            <img src="./img/c.jpeg">
            <img src="./img/d.jpeg">
            <img src="./img/e.jpeg">
        </div>
        <!-- 小圆点 -->
        <ul class="dot">  
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!-- 左右按钮 -->
        <img src="img/left.png" class="leftBn">
        <img src="img/right.png" class="rightBn">
    </div>
<script>

   var imgCon,pre,lis;//定义全局变量，目的是为了共用
   var position=0; //给定初始值，根据图片顺序第几张
   //一开始进入函数执行相关操作
   init();
   function init() {//获取DOM元素，给对应的添加侦听事件
       imgCon=document.querySelector(".imgCon");//获取包裹着图片的div
       lis=document.getElementsByTagName("li");//获取li  小圆点
       var leftBn=document.querySelector(".leftBn");  //获取左边图片，按钮
       var rightBn=document.querySelector(".rightBn");//获取右边图片，按钮
       leftBn.addEventListener("click",clickHandler);  //给左右按钮添加侦听事件，点击事件侦听
       rightBn.addEventListener("click",clickHandler);//同上，左右两边
//小圆点li  给每个li添加点击事件侦听
       for(var i=0;i<lis.length;i++){  //循环小圆点
           lis[i].addEventListener("click",dotClickHandler); //添加点击事件侦听
       }
       pre=lis[0];  //设置小圆点初始选中第一个小圆点
   }
//小圆点，点击执行的事件
   function dotClickHandler(e) {  //小圆点li  执行的事件
       var arr=Array.from(lis);  //先转为数组
       position=arr.indexOf(this); //点击的下标就是第几张
       imgMove();  //点击执行该方法
   }
//图片的左右按钮，点击执行的方法
   function clickHandler(e) {
       //可以打印看一下this
       console.log(this);//当前点击的元素信息，
       if(this.className==="leftBn"){//className是当前点击属于的属性，上面一行已经打印了，请查看
           position--;  //position  用来表示第几张图片。左右按钮的点击响应的也在做加加，减减操作
           if(position<0) position=4;   //如果一直点击左边了按钮，就减成为了负数了，所以要重新定义
       }else{ //否则，也就是点击的不是leftBn，这里默认是右边了。当然 也可以写准确写 
           position++;    //左边一直加到了第四张就重新设置为0
           if(position>4) position=0;
       }
       imgMove();//执行图片一定方法
   }
//图片移动的方法
   function imgMove() {   //
       imgCon.style.left=-position*960+"px";//装着img图片的容器
       if(pre){
           pre.style.backgroundColor="rgba(0,0,0,0)";
       }
       pre=lis[position];
       pre.style.backgroundColor="rgba(255,0,0,0.6)";
   }
   //position  初始设置为0，点击图片按钮（leftBn和rightBn）和小圆点都会改变position
</script>
</body>
</html>

变化情况

在这里插入图片描述

mustang(野马）

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
左右案例+小圆点的轮播图+无时间

效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* *{ margin: 0; ...
复制链接

扫一扫