请选择 进入手机版 | 继续访问电脑版

湖南新梦想

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 15|回复: 0

html制作轮播图

[复制链接]

6

主题

6

帖子

32

积分

新手上路

Rank: 1

积分
32
发表于 6 天前 | 显示全部楼层 |阅读模式
<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title></title>
        </head>
        <style type="text/css">
                ul{
                       
                       
                        position: absolute;
                        left: 120px;
                        top: 180px;
                }
                li{
                        width:20px;
                        height: 20px;
                        background-color: #fff;
                        border-radius: 50%;
                        color: #000;
                        padding-left: 10px;
                        margin-top: 5px;
                        display: inline-block;
                        list-style: none;
                }
                .div_1{
                        width:423px;
                        position: relative;
                        border: 1px solid #333;
                        margin: 0px auto;
                }
                .li1{
                        background-color: red;
                        color: white;
                }
                .li2{
                        background-color: white;
                        color: #000;
                }
                *{
                        padding: 0px;
                        margin: 0px;
                }
        </style>
       
        <script type="text/javascript">
                var images=new Array("1.png","2.jpg","3.jpg");
                var i=0;
                function imgs(){
                        document.getElementById("img").src=images[i];
                        var lis=document.getElementsByTagName("li");
                        for(var j=0;j<lis.length ;j++){
                                if(j==i){
                                        lis[j].className="li1";
                                }else{
                                        lis[j].className="li2";
                                }
                               
                               
                        }
                        i++;
                        if(i==images.length){
                                i=0;
                        }
                }
                var a;
                function c(){
                        a=setInterval("imgs()",3000);
                       
                }
                function b(){
                        clearInterval(a);
                }
               
                function l1(k){
                        i=k;
                        b();
                        imgs();
                }
               
               
        </script>
       
        <body>
        <div class="div_1">
        <img id="img" src="1.png" width="423px" height="236px"/>
        <ul>
                <li class="li1">1</li>
                <li>2</li>
                <li>3</li>
               
        </ul>
        </div>
        </body>
</html>
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|湖南新梦想 ( 湘ICP备18019834号-2 )

GMT+8, 2022-9-28 03:56 , Processed in 0.040459 second(s), 19 queries .

Powered by Discuz! X3.4 Licensed

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表