simisty 2016-10-27 14:02 采纳率: 0%
浏览 3656
已结题

li标签无法正常显示,display值为none

1 代码

   <style>
        .ck-slide{
            width:720px;

        }
        .ck-slide-wrapper{
            height: 100%;
        }

    </style>
<div class="ck-slide">
    <ul class="ck-slide-wrapper">
        <li>
            <a href="#"><img src="../github/myck_slide-master/images/1.jpg" alt="" style="width:700px;"></a>
        </li>
        <li style="display:none">
            <a href="#"><img src="../github/myck_slide-master/images/2.jpg" alt="" style="width:700px;"></a>
        </li>
        <li style="display:none">
            <a href="javascript:;"><img src="../github/myck_slide-master/images/3.jpg" alt="" style="width:700px;"></a>
        </li>
        <li style="display:none">
            <a href="javascript:;"><img src="../github/myck_slide-master/images/4.jpg" alt="" style="width:700px;"></a>
        </li>
        <li style="display:none">
            <a href="javascript:;"><img src="../github/myck_slide-master/images/5.jpg" alt="" style="width:700px;"></a>
        </li>

    </ul>

    <script src="../github/myck_slide-master/js/myslide.js">

    </script>
    <script>

       /* $(".ck-slide").ckSlide({
            autoPlay:true
        })*/

    </script>

</div>

//引入的外部样式
* {
    margin: 0px;
    padding: 0px;


}


.ck-slide {
     margin: 100px 0 0 0;
     left: 50%;
     margin-left: -400px;
     width:800px;
     position: relative;

 }


.ck-slide .ck-slide-wrapper {
    top: 0;
    left: 0;
    z-index: 1;
    width:100%;
    position: absolute;

}
.ck-slide-wrapper  li{
    list-style: none;
    display: block;

}


2 显示效果
图片说明

图片说明

3 问题
想实现的效果是轮播。
上述代码在浏览器中打开的时候可以正常显示第一章图片。

按照我个人的理解,ul下面放置了li标签,并且ck-slide样式被设置了指定的宽度居中显示,那么ul下面的li标签会在垂直方向上分布显示,但是实际效果却仅仅显示了第一张图片的效果。通过提示工具查看发现ul下面的li标签除了第一个li标签外 其他li标签的display被设置为了none,这是为什么呀??我没有设置display为none呀


有朋友提到js文件的问题,这里并没有执行js代码,我提供全部代码:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/slide.css">
    <script src="./js/jquery.min.js"></script>
    <style>
        .ck-slide{
            width:720px;
            height:320px;

        }
        .ck-slide-wrapper{
            height: 100%;
        }

    </style>
</head>
<body>

<div class="ck-slide">
    <ul class="ck-slide-wrapper">
        <li>
            <a href="#"><img src="images/1.jpg" alt="" style="width:700px;"></a>
        </li>
        <li style="display:none">
            <a href="#"><img src="images/2.jpg" alt="" style="width:700px;"></a>
        </li>
        <li style="display:none">
            <a href="javascript:;"><img src="images/3.jpg" alt="" style="width:700px;"></a>
        </li>
        <li style="display:none">
            <a href="javascript:;"><img src="images/4.jpg" alt="" style="width:700px;"></a>
        </li>
        <li style="display:none">
            <a href="javascript:;"><img src="images/5.jpg" alt="" style="width:700px;"></a>
        </li>

    </ul>
    <a href="javascript:;" class="ctrl-slide ck-prev">上一张</a>
    <a href="javascript:;" class="ctrl-slide ck-next">下一张</a>
    <div class="ck-slideBox">
        <div class="slideWrap">
            <ul>
                <li class="current"><em>1</em></li>
                <li><em>2</em></li>
                <li><em>3</em></li>
                <li><em>4</em></li>


            </ul>
        </div>
    </div>
</div>

</body>
</html>


使用到的图片
图片说明

感谢给位朋友的指点!

  • 写回答

6条回答 默认 最新

  • qq_23113827 2016-10-27 14:11
    关注

    你上面页面代码中每个li标签的style都有display:none啊???

    评论

报告相同问题?

悬赏问题

  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?