html+css实现幻灯片自动轮番代码

程序演示

html+css实现幻灯片自动轮番代码 网络技术与安全 第1张

html

<divid="slider"class="carouselslide"data-ride="carousel"><olclass="carousel-indicators"><lidata-target="#slider"data-slide-to="0"class="active"></li><lidata-target="#slider"data-slide-to="1"class=""></li><lidata-target="#slider"data-slide-to="2"class=""></li><lidata-target="#slider"data-slide-to="3"class=""></li><lidata-target="#slider"data-slide-to="4"class=""></li></ol><divclass="carousel-inner"><divclass="itemactive"><atarget="_blank"href="https://www.tx47.cn/xcbk-467.html"><imgsrc="https://www.tx47.cn/content/uploadfile/201903/thum-daf31553512108.jpg"><spanclass="carousel-caption">Emlog资源网Meta收费模板</span><spanclass="carousel-bg"></span></a></div><divclass="itemactive"><atarget="_blank"href="https://www.tx47.cn/xcbk-498.html"><imgsrc="https://www.tx47.cn/content/uploadfile/201903/thum-47761553978947.png"><spanclass="carousel-caption">宝塔面板0.99买30天Linux专业版</span><spanclass="carousel-bg"></span></a></div><divclass="item"><atarget="_blank"href="https://www.tx47.cn/xcbk-450.html"><imgsrc="https://www.tx47.cn/content/uploadfile/201812/thum-f3cc1543762081.jpg"><spanclass="carousel-caption">支付宝赏金扫一扫拿烟钱</span><spanclass="carousel-bg"></span></a></div><divclass="item"><atarget="_blank"href="https://www.tx47.cn/xcbk-496.html"><imgsrc="https://www.tx47.cn/content/uploadfile/201903/thum-4a471553268104.png"><spanclass="carousel-caption">宝塔面板0.01组团买三年插件</span><spanclass="carousel-bg"></span></a></div><divclass="item"><atarget="_blank"href="https://www.tx47.cn/xcbk-248.html"><imgsrc="https://www.tx47.cn/content/uploadfile/201808/thum-88a11535163333.png"><spanclass="carousel-caption">价值80易支付程序源码</span><spanclass="carousel-bg"></span></a></div></div><aclass="leftcarousel-control"href="#slider"role="button"data-slide="prev"><spanclass="fafa-angle-left"aria-hidden="true"></span></a><aclass="rightcarousel-control"href="#slider"role="button"data-slide="next"><spanclass="fafa-angle-right"aria-hidden="true"></span></a></div>

css

/*幻灯片轮番*/.category-job.header,.category-see.header,.page-template-pagesnavs-php.header,.page-template-pagestheme-php.header,.page-template-pagesthemes-php.header,.page-template-pagestools-php.header,.site-minicat.header{box-shadow:none;border-bottom:none;margin-bottom:0}.carousel{border:1pxsolid#eaeaea;padding:2px;margin-bottom:10px}.carousel-inner{width:100%}.carousel-inner>.item{position:relative;display:none;text-align:center;-webkit-transition:.6sease-in-outleft;-o-transition:.6sease-in-outleft;transition:.6sease-in-outleft}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1;width:100%;height:340px;margin-bottom:-10px}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:50%;left:2px;width:30px;height:50px;margin-top:-30px;font-size:20px;color:#fff;text-align:center;filter:alpha(opacity=35);opacity:.35;background-color:#000}.carousel-control.right{right:2px;left:auto}.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;filter:alpha(opacity=70);outline:0;opacity:.7}.carousel-control.fa-angle-left,.carousel-control.fa-angle-right,.carousel-control.icon-next,.carousel-control.icon-prev{position:absolute;top:50%;margin-top:-10px;left:12px;z-index:5;display:inline-block}.carousel-control.icon-next,.carousel-control.icon-prev{width:20px;height:20px;margin-top:-10px;font-family:serif}.carousel-control.icon-prev:before{content:'\\2039'}.carousel-control.icon-next:before{content:'\\203a'}.carousel-indicators{position:absolute;margin-bottom:0;bottom:0;right:12px;z-index:15;width:78%;height:47px;/*padding:11px00;*/;text-align:right}.carousel-indicatorsli{display:inline-block;width:10px;height:10px;margin:15px5px00;text-indent:-999px;background-color:transparent;border:1pxsolid#fff;border-radius:10px}.carousel-indicators.active{background-color:#fff}.carousel-caption{position:absolute;right:0;bottom:0;left:0;z-index:10;text-align:left;padding:10px;margin-right:100px;overflow:hidden;color:#fff;font-size:16px}.asb,.asb-your,.branding{text-align:center}.carousel-bg{position:absolute;right:0;bottom:0;left:0;height:40px;z-index:9;background-color:#000;filter:alpha(opacity=70);opacity:.7}.site-navbarli:hover,.topmenuli:hover{z-index:2}.brand,.content,.sidebar,.site-navbarli{position:relative}.carousel-caption.btn{text-shadow:none}.carousel,.carousel-inner,.container,.header,.label{position:relative;overflow:hidden}.carousel{padding:10px;box-sizing:initial;background:#fff;}

下载权限

查看
  • 免费下载
    评论后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限

为TA充电
人已赞赏
网络技术与安全

资源博客网通用的免费声明文章页 附源代码

2020-10-17 16:36:47

网络技术与安全

PHP获取访客IP和地理位置接口源码

2020-10-17 16:36:49

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
搜索