用css怎么写弹出广告代码，JS也可以，求大神

html-css014

用css怎么写弹出广告代码，JS也可以，求大神,第1张

其实蛮简单的，你理解了他的原理就会了，简单说一下吧，首先这个广告正常显示同样不影响网页其他的内容的布局，那么他应该是突出来的对吧？这个可以用相对文档的绝对定位或者相对浏览窗口的固定定位，这个会把？

然后再说下弹出效果，这个广告本身是display:none；隐藏的，然后通过js或者jq控制当打开该网页的时候添加display:block就弹出了（显示）；复杂点的，有时候弹出来之后别人把他关闭了（或者直接没有关闭按钮，那么这里直接忽略），但是你又想广告过一会又弹出来，这个怎么实现呢？

这里就用到了定时器setInterval，里面加个判断 当该广告的display是none的时候把他改为block，再设置个时间多久循环一次，比如两秒，当广告被关闭，两秒之后会判断一次，因为广告广告是关闭的（display:none）所以他会给广告更改样式（改为display：block），这样广告又出来了

怎么样这样说能够理解吧？剩下的代码就需要你来写了，只把大概思路和你说下

这个效果一般称为图片轮播，实现的方法有很多，像b站的这种较为简单，可以用css3来实现。

以4张图片为例：

1.基本布局：

将4张图片左浮动横向并排放入一个div容器内，图片设置统一尺寸，div宽度设置4个图片的总尺寸，然后放入相框容器div，

相框设置1个图片的大小并设置溢出隐藏，以保证正确显示一个照片。

2.设置动画：

然后使用css3动画，通过对photos进行位移，从而达到显示不同的图片，每次偏移一个图片的宽度，即可显示下一张图片。

4张图片，需要切换3次.

根据需要可以对各个图片添加相应的序号和图片简介。

3.代码如下：

<div id="frame" >

    <div id="photos" class="play">

        <img src="images/1.jpg" >

        <img src="images/3.jpg" >

        <img src="images/4.jpg" >

        <img src="images/5.jpg" >

        <ul id="dis">

            <li>111111111111111</li>

            <li>22222222222222</li>

            <li>33333333333333</li>

            <li>44444444444444</li>

        </ul>

    </div>

</div>  1 <style>

 2     #frame{position:absolutewidth:300pxheight:200pxoverflow:hiddenborder-radius:5px}

 3     #dis{position:absoluteleft:-50pxtop:-10pxopacity:.5}

 4     #dis li{display:inline-blockwidth:200pxheight:20pxmargin:0 50pxfloat:lefttext-align:centercolor:#fffborder-radius:10pxbackground:#000}

 5     #photos img{float:leftwidth:300pxheight:200px}

 6     #photos {  position: absolutez-index:9  width: calc(300px * 4)/*---修改图片数量的话需要修改下面的动画参数*/  }

 7     .play{ animation: ma 20s ease-out infinite alternate}

 8     @keyframes ma {

 9         0%,25% {        margin-left: 0px       }

10         30%,50% {       margin-left: -300px    }

11         55%,75% {       margin-left: -600px    }

12         80%,100% {       margin-left: -900px    }

13 

14     }

15 </style>

首先你这个东西要放到body里面，也就是他的父级是body而不是其他的标签。框架是这样

<body>

  <div id="right_kefu"></div>

  <!--网站其他内容-->

</body>

上面的是前提，如果你这个东西的父级不是body，祖父级是body那就不行了。然后再把你的css代码中的right：5px改成left：0；就行了。