javaScript编写轮播图

最新推荐文章于 2023-08-09 23:10:39 发布

付渐渐

最新推荐文章于 2023-08-09 23:10:39 发布

阅读量132

点赞数 2

文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_55315930/article/details/119303403

版权

开心总结：

今天自己动手完成了一个轮播图的编写；

主要功能有：

1.点击页码，图片进行自动切换。

2.点击箭头，图片进行下一张或者上一张的切换；

3.页面加载之后，在规定时间内自动进行下一张的切换；

4.当鼠标滑到图片处后，自动切换图片功能停止；

5.当鼠标滑出图片后，自动切换图片功能打开；

6.添加了一个每次图片进行切换的动画，使得看起来更加的美观一些；

主要用到的技术有：

html,css,dom操作，js操作；

源代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,
        ol {
            list-style: none;
        }
        #container{
            width: 750px;
            height: 291px;
            margin: 50px auto;  
            position: relative;  
        }
        #container .tabs {
            position: absolute;
            right: 30px;
            bottom: 30px;
            z-index: 999;
        }
        #container .tabs li{
            float: left;
            width: 20px;
            height: 20px;
            margin-right: 4px;
            background: rgba(0, 0, 0, 0.7); 
            color: #fff;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
        }
        #container .imgs img{
            width: 750px;
            height: 291px;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            transform: scale(0.8);
            transition: opacity 1s ease,transform 1.5s ease;
        }
        #container .imgs img.selected{
            opacity: 1;
            transform: scale(1);
        }
        #container .right,
        #container .left{
            width: 40px;
            height: 40px;
            background: rgba(0, 0, 0, 0.7);
            color: #fff;
            font-size: 32px;
            text-align: center;
            line-height: 40px;
            position: absolute;
            top: 50%;
            margin-top: -20px;
            z-index: 999;
        }
        #container .right{
            right: 0;
        }
        #container .left{
            left: 0;
        }
        #container .tabs .selected{
            background: red;
        }
    </style>
</head>

<body>
    <div id="container">
        <ul class="tabs">
            <li class="tab selected">1</li>
            <li class="tab">2</li>
            <li class="tab">3</li>
            <li class="tab">4</li>
            <li class="tab">5</li>
        </ul>
        <div class="imgs">
/*图片这里可以随意改动，因为我引用的是本地图片，所以加载起来会比较快一些，不会出现什么问题
但是如果引用网络图片，会出现引用不到的情况，我还没将这个因素进行一个考虑，所以这个代码只适用于
图片在本地情况下*/
            <img src="imgs/facebook_1.jpg" alt="" class="img selected">
            <img src="imgs/facebook_2.jpg" alt="" class="img">
            <img src="imgs/3.jpg" alt="" class="img">
            <img src="imgs/4.jpg" alt="" class="img">
            <img src="imgs/5.jpg" alt="" class="img">
        </div>
        <div class="arrows">
            <span class="left">&lt</span>
            <span class="right">&gt</span>
        </div>
    </div>
    <script>
        var oContainer=document.getElementById("container");
        var aTab=document.getElementsByClassName("tab");
        var aAmg=document.getElementsByClassName("img");
        var oRight=document.getElementsByClassName("right")[0];
        var oLeft=document.getElementsByClassName("left")[0];
        var index=0;
        var timer;
        for(var i=0;i<aTab.length;i++){
            aTab[i].index=i;
            aTab[i].onclick=function(){
            changeImg(this.index);
        }
        }
        oRight.onclick=function(){
            index++;
            if(index>(aTab.length-1)){
                index=0;
            }
            changeImg(index);
        }
        oLeft.onclick=function(){
            index--;
            if(index<0){
                index=aTab.length-1;
            }
            changeImg(index);
        }
        function changeImg(idx){
            for(var i=0;i<aTab.length;i++){
                aTab[i].classList.remove("selected");
                aAmg[aTab[i].index].classList.remove("selected");
            }
            aTab[idx].classList.add("selected");
            aAmg[idx].classList.add("selected");
        }
        var timer;
        function go(){
            timer=setInterval(function() {
            oRight.onclick();
        }, 2500);
        }
        go();
        oContainer.onmouseover=function(){
            clearInterval(timer);
        }
        oContainer.onmouseout=function(){
            go();
        }
    </script>
</body>

</html>

付渐渐

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javaScript编写轮播图

开心总结：今天自己动手完成了一个轮播图的编写；主要功能有：1.点击页码，图片进行自动切换。2.点击箭头，图片进行下一张或者上一张的切换；3.页面加载之后，在规定时间内自动进行下一张的切换；4.当鼠标滑到图片处后，自动切换图片功能停止；5.当鼠标滑出图片后，自动切换图片功能打开；6.添加了一个每次图片进行切换的动画，使得看起来更加的美观一些；主要用到的技术有：html,css,dom操作，js操作；源代码：<!DOCTYPE html><h
复制链接

扫一扫