利用引导程序的转盘 射流研究…实现轮播图动画效果

前期准备：

1.jquery.js。

2 .引导的旋转木马。

3.bootstrap.css。

一起来看代码吧：

页面比较丑，希望大家不要介意哦嘻嘻

效果图：

html js:

！DOCTYPE html html head meta charset=' utf-8 ' title我的爱-首页/title link rel='样式表href=' CSS/bootstrap。CSS ' link rel='样式表href=' CSS/index。CSS ' link href=' fav图标。ico ' rel='快捷图标/script src=' http : js/jquery。js ' type=' text/JavaScript '/script script src=' http : js/carousel。js ' type=' text/JavaScript '/script/head dy div class='首页/a/div div ul class=' nav bar-nav ' Li class=' active ' a href=' # section 1 ' class=' con '向日葵花/a/李href=' # section 2 ' class=' con '萌萌哒的狗狗/a/李a/好吃哒/a/Li/ul/div/div/nav/div class=' index-body ' div id=' carousel-example-generic ' class=' carousel slide ' data-ride=' carousel '！-指示器-ol class=' carousel-Indicators ' Li data-target=' # carousel-example-generic ' data-slide-to=' 0 ' class=' active '/Li Li data-target=' # carousel-example-generic ' data-slide-to=' 2 '/Li/ol！-幻灯片的包装器- div class='旋转木马-内部'角色=' listbox ' div class=' item active ' img src=' http : image/index one。jpg ' alt='向日葵class=' images '/div class=' item ' img src=' http : image/index two。jpg ' alt='萌萌哒狗狗class=' images '/div class=' item ' img src=' http : image/index三。jpg ' alt='好吃哒class='images' /div /div！-Controls-a class=' left carousel-control ' href=' # carousel-example-generic ' role=' button ' data-slide=' prev ' span class=' glyphicon glyphicon-chevron-left ' aria-hidden=' true '/span class=' Sr-only ' previous/span/a class=' right carousel-control ' href=' # carousel-example-generic ' role=' button ' data-slide=' next ' span class=' glyphicon-chevron-right ' aria-hidden=' true '爱喝酸奶的吃货/div /div /div脚本类型=' text/JavaScript ' $(function(){ $(').导航条-导航李').每个（函数（索引){ $(这个)).单击(function() { $('li.active ').移除CLaSS(' active ')；//注意这里$(这个)。添加CLaSS(' active ')；//注意这里$('.旋转木马-内部分区。活动').移除CLaSS(' active ')；$('.转盘-内部分区')。eq(指数)。添加CLaSS(' active ')；});});window.setInterval(函数(){ $(')。转盘-内部分区')。每个（函数（索引){ if ($(this)).有类(' active '){ $(').navbar-nav li.active ').移除CLaSS(' active ')；$('.导航条-导航李').eq(指数)。添加CLaSS(' active ')；} });}, 100);});/script/body/htmlindex.css。容器-流体{填料-左侧left: 200px}。导航条-默认{底色： # 308 DCA}.导航栏-品牌{ font-size : 34px高度： 70px}.导航栏-nav lia { font-size : 19px；}.导航条-默认navbar品牌.导航条-默认。纳夫巴-纳夫利亚导航条-默认navbar-navlia:hover .导航条-默认导航条-nav lia : focus { color : # fff；}.navbar品牌.导航条-nav lia {线高： 40px}.导航条-默认navbar-nav.activea .导航条-默认navbar-nav.activea:hover .导航条-默认导航条-导航。activea :焦点{ color : # fff背景色： # 2276高炉；}.索引-正文{ margin: 0 auto}。转盘-内部{ height: 490px}。索引体。图像{宽度： 900px}。索引-页脚{ margin-top : 20px；color: # fff背景色： # 2276高炉；}.footer-centet { width : 300 px；font-size : 20px线高： 55pxmargin: 0自动高度： 60px}大家在自己设计演示的时候注意下，类为索引体的差异和img的宽度要设置一样，否则会出现以下情况：

以上所述是小编给大家介绍的利用引导程序的转盘。射流研究…实现轮播图动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！