css轮播图_JavaScript实现简易轮播图

最新推荐文章于 2024-07-16 22:34:38 发布

weixin_39710106

最新推荐文章于 2024-07-16 22:34:38 发布

阅读量88

点赞数

文章标签： css轮播图 h5轮播图代码 html 轮播 html 轮播图 html三张图片的轮播代码 html轮播

## 看了不会算我输

轮播图效果如下：

**轮播图实现方式：通过定位的方式，改变left的值，形成轮播图的效果（也可以是从上到下翻滚的，改变top或（bottom））**

需要准备的素材：

1、轮播图片任意

2、左右移动箭头

轮播图的制作方法：

## 第一步创建三个文件

.html文件， .css文件, .js文件

在创建一个img文件夹用来放图片

我这里的文件名字：轮播图.html 轮播图.css 轮播图.js（文件名最好是英文）

## 第二步：通过html把框架搭好：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="轮播图.css">
    <script src="./轮播图.js" defer></script>
    <style>
        .imgdiv ul li img{
            /* 图片大小 */
            width: 1024px;
            height:420px;
        }
    </style>
</head>
<body>
    <div class="imgdiv" style="width: 1024px; height: 420px;">
        <ul style="left: 0;">
            <li><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
            <li><img src="./img/4.jpg" alt=""></li>
        </ul>
        <span class="lf"><img src="./img/左箭头.png" alt=""></span>
        <span class="rf"><img src="./img/右箭头.png" alt=""></span>
    </div>
</body>
</html>

注意的点：1、script标签引外部js时，加上defer（加载完成html后，在加载js），避免获取不到元素的情况。

2、js获取外部css样式修改的时候，也就是没有在html文件里的样式，有可能js获取不到，所以上面代码中需要改变的left值，还有图片还有外部盒子的宽度，我都写在了html里，也方便了如果图片大小改变时，**只需要修改html文档就好，css和js代码都不需要动**

上面代码运行结果：我这里准备了四张图片（读者想用几张都可以）

第三步：写css样式

1，写css把图片横向布局，并且通过overflow：hidden的方式把外面的图片隐藏

2，给ul设置定位，并把left设置为0px;也就是向左偏移为0

（如果是上下轮播，图片纵向布局，top为0px）

代码示例：（动画效果显示；在父级上ul上加上：transition动画效果。）

*{
    margin: 0;
    padding: 0;
}
ul li{
    list-style: none;
}
.imgdiv{
    margin: 200px auto 0;
    overflow: hidden;
    position:relative;
}
.imgdiv ul{
    display:flex;
    transition: left 1s linear;/*动画效果*/
    position:absolute;
}
.imgdiv span{
    cursor:pointer;
}
.imgdiv span.lf{
    position: absolute;
    left: 10px;
}
.imgdiv span.rf{
    position: absolute;
    right: 10px;
}
.imgdiv>div{
    margin: 0 auto;
    position: absolute;
    left:0;
    bottom:20px;
    display: flex;
}
.newsdiv{
    width: 0;
    height: 0;
    border: 10px solid rgb(139, 138, 138);
    border-radius: 50%;
    margin:0 20px;
    cursor:pointer;
    opacity: 0.3;
}

上述代码中的下面这两段代码：是给下面放小圆点盒子与小圆点样式的。在js中根据图片个数动态创建小圆点

.imgdiv>div{
    margin: 0 auto;
    position: absolute;
    left:0;
    bottom:20px;
    display: flex;
}
.newsdiv{
    width: 0;
    height: 0;
    border: 10px solid rgb(139, 138, 138);
    border-radius: 50%;/*正方形变成圆形*/
    margin:0 20px;
    cursor:pointer;/*鼠标放上去变成小手*/
    opacity: 0.3;/*初始透明度，通过js修改透明度，来修改其高亮*/
}

效果如图：

第四步;通过写js来改变图片的left值，使其动态显示。

js：

1、使左右两个图片居中，根据图片的高度，（图片高度-箭头高度）/2

// 设置左右按钮居中
    lfspan.style.top=(parseInt(pop.offsetHeight)-60)/2+'px';
    rfspan.style.top=(parseInt(pop.offsetHeight)-60)/2+'px';

2、根据图片个数，创建小圆点的个数

// 跟随图片的个数,动态设置圆点的个数
    newsbigdiv=document.createElement('div');
    newsbigdiv.className='newsbigdiv';
    pop.appendChild(newsbigdiv);
    // 循环创建子div,给每个子div一个class样式,加一个索引
    for(var i=0;i<lengthLi;i++){
        newsdiv=document.createElement('div');
        newsbigdiv.appendChild(newsdiv);
        newsdiv.className="newsdiv";
        newsdiv.setAttribute('index',i);//给每个子div设置一个索引值
    }
    // 获取圆点div个数,让其左偏移,居中显示
    var divsv = newsbigdiv.querySelectorAll('div');
    newsbigdiv.style.left=(content_width-divsv.length*60)/2+'px';
    // 默认第一个为高亮
    divsv[0].style.opacity=1;

3、改变left值使图片位置发生变换

做法：

num为0 的时候left为0（第一张图） num为1的时候left为负的图片宽度（第二张图） num为2的时候left为负的2倍图片宽度（第三张图）

// 设置全局累加器，判断动到哪一张图片**************
    var num=0;

具体代码：（因为是向左移动，所以left为负值（负号别忘了加）根据num的值的变化，来改变图片的left值）

 function change(){
        // 把所有圆点样式透明设置为0.3
        for(var j=0;j<lengthLi;j++){
            divsv[j].style.opacity=0.3;
        }
        // 给当前索引为num的图片改变圆点高亮显示
        divsv[num].style.opacity=1;
        indexUl.style.left=-num*content_width+'px';
    }

4、给两个箭头绑定点击事件

 lfspan.onclick=function(){
        num--;
        if(num==-1){
            num=lengthLi-1;
        }
        change();
    }
    rfspan.onclick=function(){
        num++;
        if(num==lengthLi){
            num=0;
        }
        change();
    }

5、给下面的圆点绑定点击事件

 for(var i=0;i<lengthLi;i++){
        divsv[i].onclick=function(){
            num=this.getAttribute('index');
            change();
        }
    }

6、设置计时器（第一个参数为，右点击函数，第二个参数为几秒执行一次）

 timer=setInterval(rfspan.onclick,TIME);

7、鼠标移入移出事件（移入图片计时器停止轮播结束，移出图片计时器开始轮播继续）

// 当鼠标放在图片上时,清除定时器
    pop.onmouseover=function(){
        clearInterval(timer);
    }
    // 鼠标离开定时器时,开启定时器
    pop.onmouseout=function(){
        timer=setInterval(rfspan.onclick,TIME);
    }

js详细代码：

var indexUl = document.querySelector(".imgdiv>ul");
// li标签
var indexLi=indexUl.querySelectorAll("li");   
var lengthLi =indexLi.length;
// 最大的div
var pop = document.querySelector(".imgdiv");
var lfspan=pop.querySelector('.lf');
var rfspan=pop.querySelector('.rf');
// 设置左右按钮居中
lfspan.style.top=(parseInt(pop.offsetHeight)-60)/2+'px';
rfspan.style.top=(parseInt(pop.offsetHeight)-60)/2+'px';
// 初始化,获得显示框的宽度
var content_width=parseInt(pop.offsetWidth);

const TIME=2000;
var timer;

// 设置全局累加器，判断动到哪一张图片**************
var num=0;
// 跟随图片的个数,动态设置圆点的个数
newsbigdiv=document.createElement('div');
newsbigdiv.className='newsbigdiv';
pop.appendChild(newsbigdiv);
// 循环创建子div,给每个子div一个class样式,加一个索引
for(var i=0;i<lengthLi;i++){
    newsdiv=document.createElement('div');
    newsbigdiv.appendChild(newsdiv);
    newsdiv.className="newsdiv";
    newsdiv.setAttribute('index',i);//给每个子div设置一个索引值
}
// 获取圆点div个数,让其左偏移,居中显示
var divsv = newsbigdiv.querySelectorAll('div');
newsbigdiv.style.left=(content_width-divsv.length*60)/2+'px';
// 默认第一个为高亮
divsv[0].style.opacity=1;


function change(){
    // 把所有圆点样式透明设置为0.3
    for(var j=0;j<lengthLi;j++){
        divsv[j].style.opacity=0.3;
    }
    // 给当前索引为num的图片改变圆点高亮显示
    divsv[num].style.opacity=1;
    indexUl.style.left=-num*content_width+'px';
}

for(var i=0;i<lengthLi;i++){
    divsv[i].onclick=function(){
        num=this.getAttribute('index');
        change();
    }
}
lfspan.onclick=function(){
    num--;
    if(num==-1){
        num=lengthLi-1;
    }
    change();
}
rfspan.onclick=function(){
    num++;
    if(num==lengthLi){
        num=0;
    }
    change();
}

timer=setInterval(rfspan.onclick,TIME);

// 当鼠标放在图片上时,清除定时器
pop.onmouseover=function(){
    clearInterval(timer);
}
// 鼠标离开定时器时,开启定时器
pop.onmouseout=function(){
    timer=setInterval(rfspan.onclick,TIME);
}

。。。。。。。。。。。。轮播图完成。。。。。。。。。。。

待优化：不能从最后一张直接动画成第一张，第一张不能直接动画成最后一张

具体实现

比如四张图片轮播，在第一张图片的前面有第四张图片，在第四张图片的后面有第一张图片

用数字表示 4（1 2 3 4）1