JavaScript完成轮播图界面练习

最新推荐文章于 2023-07-16 14:54:03 发布

小王学java

最新推荐文章于 2023-07-16 14:54:03 发布

阅读量229

点赞数

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

本文链接：https://blog.csdn.net/w1256466374/article/details/112106159

版权

使用JavaScript完成轮播图的练习

图片会自动的切换，图片下方有指定的按钮切换图片。
运行图片
这里面包含的知识点有：

定时器的使用
动画的操作（这里把动画的操作封装成了一个方法）。
还有一个方法获取当前元素的指定样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图界面</title>
    <style>
        *{
   
            margin: 0;
            padding: 0;
        }
        #outer{
   
            width: 420px;
            height: 500px;
            /* border: 1px solid black; */
            background-color: greenyellow;
            margin: 50px auto;
            padding: 10px 0;
            position: relative;
            overflow: hidden;
        }
        #outer #imgList{
   
            /* 这里不能写死，不然的话多一张少一张图片很麻烦 
            所以这里要在js中进行通过照片数量进行自己调整。*/
            /* width: 200px;  */
            list-style: none;  
            position:absolute;
            left: 0px;
        }
        #outer #imgList li{
   
            margin: 0 10px;
          float: left;
        }

        #outer #imgList li img{
   
            width: 400px;
            height: 500px;
        }
        /* 设置导航栏按钮 */
        #navDiv{
   
            position: absolute;
            bottom: 15px;
            left: 147.5px;
        }
        #navDiv a{
   
            /* display: block; */
            /* 浮动的话就变成了块元素可以省略 */
            width: 15px;
            height: 15px;
            background-color:red;
            float: left;
            margin: 0 5px;
            /* 设置透明 */
            opacity: 0.5;
            /* 兼容IE8的透明 */
            filter: alpha(opacity=

最低0.47元/天解锁文章

小王学java

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript完成轮播图界面练习

使用JavaScript完成轮播图的练习图片会自动的切换，图片下方有指定的按钮切换图片。这里面包含的知识点有：定时器的使用动画的操作（这里把动画的操作封装成了一个方法）。还有一个方法获取当前元素的指定样式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi
复制链接

扫一扫