基于bootstrap实现广告轮播带图片和文字效果
代码如下所示:
<!DOCTYPEhtml> <htmllang="zh-cn"> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1"> <title>基于bootstrap的轮播广告页,带图片和文字</title> <linkrel="stylesheet"href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <style> .carousel{ height:500px; } .carousel.item{ height:500px; } .carousel.itemimg{ width:100%; } </style> </head> <body> <!--轮播广告--> <divid="LBbox"class="carouselslide"data-ride="carousel"> <!--圆点按钮--> <olclass="carousel-indicators"> <lidata-target="#LBbox"data-slide-to="0"class="active"></li> <lidata-target="#LBbox"data-slide-to="1"></li> </ol> <!--轮播内容--> <divclass="carousel-inner"role="listbox"> <divclass="itemactive"> <imgsrc="http://img.mukewang.com/5412ad7c0001d2eb10880541.jpg"alt="1slide"> <divclass="carousel-caption"> <h1>第四代IntelCore处理器</h1> <p>无论是什么任务,配备IntelHDGraphics5000图形处理器的第四代IntelCore处理器都能应对自如。</p> <p> <ahref="#"class="btnbtn-lgbtn-primary"role="button">点我下载</a> </p> </div> </div> <divclass="item"> <imgsrc="http://img.mukewang.com/5412ae5c0001653b12800644.jpg"alt="2slide"> <divclass="carousel-caption"> <h1>MacBookAir</h1> <p>有了新一代802.11ac技术,MacBookAir令Wi-Fi速度超越极限。</p> <p> <ahref="#"class="btnbtn-lgbtn-primary"role="button">点我下载</a> </p> </div> </div> </div> <!--左按钮--> <ahref="#LBbox"class="leftcarousel-control"role="button"data-slide="prev"> <spanclass="glyphiconglyphicon-chevron-left"aria-hidden="true"></span> <spanclass="sr-only">上一页</span> </a> <!--右按钮--> <ahref="#LBbox"class="rightcarousel-control"role="button"data-slide="next"> <spanclass="glyphiconglyphicon-chevron-right"aria-hidden="true"></span> <spanclass="sr-only">下一页</span> </a> </div> <scriptsrc="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <scriptsrc="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
以上所述是小编给大家介绍的基于bootstrap实现广告轮播带图片和文字效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!