今天的码农女孩做了关于定时器切换图片和轮播图的练习

最新推荐文章于 2022-10-26 10:42:49 发布

丁丁丁dingdingding

最新推荐文章于 2022-10-26 10:42:49 发布

阅读量285

点赞数

分类专栏：小练习文章标签： javascript

本文链接：https://blog.csdn.net/m0_64444606/article/details/124012065

版权

小练习专栏收录该内容

47 篇文章 0 订阅

订阅专栏

练习一：用定时器切换四张图片，点击开始按钮开始依次切换，点击停止则停到指定图片。

<!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>
</head>
<body>
    <img src="img/about1.png" id="img1">
    <button id="btn01">开始</button>
    <button id="btn02">停止</button>
    <script>
        var img1=document.getElementById("img1");
        //创建一个数组保存图片的路径
        var imgArr=["img/about1.png","img/about2.png","img/about3.png","img/about4.png"];
        //创建一个变量，用来保存当前图片的索引
        var index=0;
        //定义一个变量用来保存定时器的标识
        var timer;
        var btn01=document.getElementById("btn01");
        btn01.onclick=function(){
            //在开启定时器之前，需要将当前元素上的其他定时器关闭
            clearInterval(timer);
            //开启一个定时器，用来自动切换图片
            timer=setInterval(function(){
                //使索引自增
                index++;
                //判断索引是否超过最大索引
                // //方法一：
                // if(index>=imgArr.length){
                //     //将index设为0
                //     index=0;
                // }
                //方法二：
                index=index%imgArr.length;
                //修改img1的src属性
                img1.src=imgArr[index];
            },1000)
        }
        var btn02=document.getElementById("btn02");
        btn02.onclick=function(){
            //点击按钮以后停止图片的自动切换
            clearInterval(timer);
        }
        
    </script>
</body>
</html>

练习二：点击下面的方块进行跳转图片

<!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;
        }
        #outer {
            position: relative;
            width: 1120px;
            height: 482px;
            margin: 50px auto;
            background-color: yellowgreen;
            padding: 10px 0;
            overflow: hidden;
        }
        #imgList {
            list-style: none;
            position: absolute;
            left: 0;
        }
        #imgList li {
            float: left;
            margin: 0 10px;
        }
        #navDiv {
            position: absolute;
            bottom: 15px;
        }
        #navDiv a {
            width: 15px;
            height: 15px;
            float: left;
            background-color: white;
            margin: 0 5px;
            opacity: 0.7;
            /* 兼容IE8透明 */
            filter: alpha(opacity=70);
        }
        #navDiv a:hover {
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- 创建一个外部的div作为我们一个大的容器 -->
    <div id="outer">
        <!-- ul用来放置图片 -->
        <ul id="imgList">
            <li><img src="img/bann1.jpg"></li>
            <li><img src="img/bann2.jpg"></li>
            <li><img src="img/bann3.jpg"></li>
            <li><img src="img/bann4.jpg"></li>
        </ul>
        <!-- 创建导航按钮 -->
        <div id="navDiv">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>
    <script>
        var imgList=document.getElementById("imgList");
        //获取页面中所有img标签
        var imgArr=document.getElementsByTagName("img");
        //设置imgList的宽度,宽度不能写死防止新增图片宽度不够
        imgList.style.width=1120*imgArr.length+"px";
        //设置导航按钮居中
        //获取navDiv
        var navDiv=document.getElementById("navDiv");
        var outer=document.getElementById("outer");
        //设置navDiv的left的值,left不能写死因为多一个按钮就会不居中
        navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+"px";
        //默认显示图片的索引  
        var index=0;
        //获取所有的a
        var allA=document.getElementsByTagName("a");
        //设置默认选中的效果
        allA[index].style.backgroundColor="red";
        //点击超链接切换到指定的图片
        //为所有超链接绑定单击响应函数
        for(var i=0;i<allA.length;i++){
            //为每一个超链接都添加一个num属性
            allA[i].num=i;
            allA[i].onclick=function(){
                //获取点击超链接的索引，并将其设置为index
                index=this.num;
                //切换图片
                imgList.style.left=-1120*index+"px";
                //设置选中的a
                setA();
            }
        }
        //创建一个方法设置正在选中的a
        function setA(){
            for(var i=0;i<allA.length;i++){
                allA[i].style.backgroundColor="";
            }
            //将选中的a设置为红色
            allA[index].style.backgroundColor="red"
        }
    </script>
</body>
</html>

丁丁丁dingdingding

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
今天的码农女孩做了关于定时器切换图片和轮播图的练习

练习一：用定时器切换四张图片，点击开始按钮开始依次切换，点击停止则停到指定图片。<!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,
复制链接

扫一扫