宝哥软件园

BootStrap中jQuery插件旋转木马实现轮播广告效果

编辑:宝哥软件园 来源:互联网 时间:2021-09-05

轮播广告在网站中的应用实在是太常见了,下面说一说怎样使用引导程序中的旋转木马插件来实现轮播广告效果,下图为最终效果:

这里写图片描述

具体实现方法请看下面的代码:

div class=' carousel slide ' data-ride=' carousel ' id=' carousel ' data-interval=' 3000 '/data-interval设置轮播间隔为3秒钟!-广告序号指示器(表示当前第几张的下方的几个小圆圈),可加可不加-ol class=' carousel-indicators ' Li data-target=' # carousel ' data-slide-to=' 0 '/Li Li data-target=' # carousel ' data-slide-to=' 1 ' class=' active '/Li Li data-target=' 2 '/Li Li data-target=' # carousel ' data-slide-to=' 3 '/Li/ol div class=' carousel-inner ' div class=' item ' img src=' http : img/为广告添加说明文字,在图片上中下方显示,可加可不加-div='旋转木马-标题' H3第一张幻灯片标签/h3 pNulla简历elit libero,这是一个很好的例子./p/div/div class='项目活动' img src=' http : img/03。jpg ' alt=' '/!-为广告添加说明文字,在图片上中下方显示,可加可不加-div='旋转木马-标题' H3第二张幻灯片标签/h3 pLorem ipsum dolor sit amet,consectetur adipiscing elit ./p/div/div class=' item ' img src=' http : img/04。jpg ' alt=' '/!-为广告添加说明文字,在图片上中下方显示,可加可不加-div='旋转木马-标题' H3第三张幻灯片标签/H3帕伦特科苏斯马格纳准将,高级顾问./p/div/div class=' item ' img src=' http : img/05。jpg ' alt=' '/!-为广告添加说明文字,在图片上中下方显示,可加可不加-div='旋转木马-标题' H3第四张幻灯片标签/h3 pNulla简历elit libero,这是一个很好的例子./p/div/div/-上一张的按钮,可加可不加-a class=' left carousel-control ' href=' # carousel ' rel=' external nofollow ' rel=' external nofollow ' data-slide=' prev ' span class=' glyphicon glyphicon-chevron-left '/span/a!-下一张的按钮,可加可不加-a class=' right carousel-control ' href=' # carousel ' rel=' external nofollow ' rel=' external nofollow ' data-slide=' next ' span class=' glyphicon glyphicon-chevron-right '/span/a/div如代码中注释,广告序号指示器,广告的说明文字,以及上一张、下一张的按钮都是可以根据需要自行添加的。

可以在旋转木马类中添加数据间隔扩展属性来更改轮播的时间间隔。

以上所述是小编给大家介绍的引导程序中jQuery插件旋转木马实现轮播广告效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

更多资讯
游戏推荐
更多+