bootstrap-js组件-轮播效果

news/2024/7/19 15:09:05 标签: bootstrap, js, carousel

简单的没有控制的图片轮播：

js xml">js-tag"><js-title">div js-attribute">class=js-value">"carousel slide" js-attribute">data-ride=js-value">"carousel" js-attribute">id=js-value">"mycarousel">
                js-comment"><!-- 幻灯片图片 -->
                js-tag"><js-title">div js-attribute">class=js-value">"carousel-inner">
                    js-tag"><js-title">div js-attribute">class=js-value">"item active">
                        js-tag"><js-title">img js-attribute">src=js-value">"images/lunbo1.jpg">
                    js-tag"></js-title">div>
                    js-tag"><js-title">div js-attribute">class=js-value">"item"> 
                        js-tag"><js-title">img js-attribute">src=js-value">"images/lunbo2.jpg">
                    js-tag"></js-title">div>
                    js-tag"><js-title">div js-attribute">class=js-value">"item">
                        js-tag"><js-title">img js-attribute">src=js-value">"images/lunbo3.jpg">
                    js-tag"></js-title">div>
                js-tag"></js-title">div>
            js-tag"></js-title">div>

这里写图片描述

完整的轮播：

js handlebars"><!DOCTYPE html>
js-tag"><js-title">html js-attribute">lang=js-value">"en">
js-tag"><js-title">head>
    js-tag"><js-title">meta js-attribute">charset=js-value">"UTF-8">
    js-tag"><js-title">meta js-attribute">name=js-value">"viewport" js-attribute">content=js-value">"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    js-tag"><js-title">link js-attribute">rel=js-value">"stylesheet" js-attribute">href=js-value">"css/bootstrap.css">
    js-tag"><js-title">script js-attribute">src=js-value">"js/jquery.1.12.4.min.js">js-tag"></js-title">script>
    js-tag"><js-title">script js-attribute">src=js-value">"js/bootstrap.js">js-tag"></js-title">script>
    js-tag"><js-title">title>Bootstrapjs-tag"></js-title">title>
js-tag"></js-title">head>
js-tag"><js-title">style js-attribute">type=js-value">"text/css">
    *js-rules">{
        js-rule">js-attribute">font-family:js-value"> 微软雅黑;
    js-rule">}
js-tag"></js-title">style>
js-tag"><js-title">body>
    js-tag"><js-title">div js-attribute">class=js-value">"container">
        js-tag"><js-title">h1 js-attribute">class=js-value">"page-header">BootStrapjs-tag"></js-title">h1>

            js-tag"><js-title">div js-attribute">class=js-value">"carousel slide" js-attribute">data-ride=js-value">"carousel" js-attribute">id=js-value">"mycarousel">
                js-comment"><!-- 幻灯片图片 -->
                js-tag"><js-title">div js-attribute">class=js-value">"carousel-inner">
                    js-tag"><js-title">div js-attribute">class=js-value">"item active">
                        js-tag"><js-title">img js-attribute">src=js-value">"images/lunbo1.jpg">
                    js-tag"></js-title">div>
                    js-tag"><js-title">div js-attribute">class=js-value">"item"> 
                        js-tag"><js-title">img js-attribute">src=js-value">"images/lunbo2.jpg">
                    js-tag"></js-title">div>
                    js-tag"><js-title">div js-attribute">class=js-value">"item">
                        js-tag"><js-title">img js-attribute">src=js-value">"images/lunbo3.jpg">
                    js-tag"></js-title">div>
                js-tag"></js-title">div>

                js-comment"><!-- 指示灯效果 -->
                js-tag"><js-title">ol js-attribute">class=js-value">"carousel-indicators">
                    js-tag"><js-title">li js-attribute">data-target=js-value">"#mycarousel" js-attribute">data-slide-to=js-value">"0" js-attribute">class=js-value">"active">js-tag"></js-title">li>
                    js-tag"><js-title">li js-attribute">data-target=js-value">"#mycarousel" js-attribute">data-slide-to=js-value">"1">js-tag"></js-title">li>
                    js-tag"><js-title">li js-attribute">data-target=js-value">"#mycarousel" js-attribute">data-slide-to=js-value">"2">js-tag"></js-title">li>
                js-tag"></js-title">ol>

                js-comment"><!-- 左右控制 -->
                js-tag"><js-title">a js-attribute">href=js-value">"#mycarousel" js-attribute">class=js-value">"left  carousel-control" js-attribute">data-slide=js-value">"prev">
                    js-tag"><js-title">span js-attribute">class=js-value">"glyphicon glyphicon-chevron-left">js-tag"></js-title">span>
                js-tag"></js-title">a>
                js-tag"><js-title">a js-attribute">href=js-value">"#mycarousel" js-attribute">class=js-value">"right carousel-control" js-attribute">data-slide=js-value">"next">
                    js-tag"><js-title">span js-attribute">class=js-value">"glyphicon glyphicon-chevron-right">js-tag"></js-title">span>
                js-tag"></js-title">a>
            js-tag"></js-title">div>
js-tag"></js-title">body>
js-tag"><js-title">script
</js-attribute">html>

这里写图片描述

添加图片说明;

js xml">js-tag"><js-title">div js-attribute">class=js-value">"carousel slide" js-attribute">data-ride=js-value">"carousel" js-attribute">id=js-value">"mycarousel">
js-comment"><!-- 幻灯片图片 -->
                js-tag"><js-title">div js-attribute">class=js-value">"carousel-inner">
                    js-tag"><js-title">div js-attribute">class=js-value">"item active">
                        js-tag"><js-title">img js-attribute">src=js-value">"images/lunbo1.jpg">
                        js-tag"><js-title">div js-attribute">class=js-value">"carousel-caption">
                            js-tag"><js-title">h3>The one slidejs-tag"></js-title">h3>
                            js-tag"><js-title">p>live off obstetrician js-tag"></js-title">p>
                        js-tag"></js-title">div>
                    js-tag"></js-title">div>
                    js-tag"><js-title">div js-attribute">class=js-value">"item"> 
                        js-tag"><js-title">img js-attribute">src=js-value">"images/lunbo2.jpg">
                        js-tag"><js-title">div js-attribute">class=js-value">"carousel-caption">
                            js-tag"><js-title">h3>The two slidejs-tag"></js-title">h3>
                            js-tag"><js-title">p>live off obstetrician js-tag"></js-title">p>
                        js-tag"></js-title">div>
                    js-tag"></js-title">div>
                    js-tag"><js-title">div js-attribute">class=js-value">"item">
                        js-tag"><js-title">img js-attribute">src=js-value">"images/lunbo3.jpg">
                        js-tag"><js-title">div js-attribute">class=js-value">"carousel-caption">
                            js-tag"><js-title">h3>The three slidejs-tag"></js-title">h3>
                            js-tag"><js-title">p>live off obstetrician js-tag"></js-title">p>
                        js-tag"></js-title">div>
                    js-tag"></js-title">div>
                js-tag"></js-title">div>
                js-comment"><!-- 左右控制 -->
                js-tag"><js-title">a js-attribute">href=js-value">"#mycarousel" js-attribute">class=js-value">"left  carousel-control" js-attribute">data-slide=js-value">"prev">
                    js-tag"><js-title">span js-attribute">class=js-value">"glyphicon glyphicon-chevron-left">js-tag"></js-title">span>
                js-tag"></js-title">a>
                js-tag"><js-title">a js-attribute">href=js-value">"#mycarousel" js-attribute">class=js-value">"right carousel-control" js-attribute">data-slide=js-value">"next">
                    js-tag"><js-title">span js-attribute">class=js-value">"glyphicon glyphicon-chevron-right">js-tag"></js-title">span>
                js-tag"></js-title">a>
            js-tag"></js-title">div>

css:

js css">js-class">.carousel-captionjs-rules">{
        js-rule">js-attribute">background:js-value"> js-hexcolor">#000;
        js-rule">js-attribute">opacity:js-value"> js-number">0.6;
        js-rule">js-attribute">width:js-value"> js-number">100%;
        js-rule">js-attribute">left:js-value"> js-number">0pxjs-important">!important;
        js-rule">js-attribute">bottom:js-value"> js-number">0px;
        js-rule">js-attribute">height:js-value"> js-number">100px;
    js-rule">}

这里写图片描述

新闻界面：

js xml">js-doctype"><!DOCTYPE html>
js-tag"><js-title">html js-attribute">lang=js-value">"en">
js-tag"><js-title">head>
    js-tag"><js-title">meta js-attribute">charset=js-value">"UTF-8">
    js-tag"><js-title">meta js-attribute">name=js-value">"viewport" js-attribute">content=js-value">"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    js-tag"><js-title">link js-attribute">rel=js-value">"stylesheet" js-attribute">href=js-value">"css/bootstrap.css">
    js-tag"><js-title">script js-attribute">src=js-value">"js/jquery.1.12.4.min.js">js-tag"></js-title">script>
    js-tag"><js-title">script js-attribute">src=js-value">"js/bootstrap.js">js-tag"></js-title">script>
    js-tag"><js-title">title>Bootstrapjs-tag"></js-title">title>
js-tag"></js-title">head>
js-tag"><js-title">style js-attribute">type=js-value">"text/css">
    *js-rules">{
        js-rule">js-attribute">font-family:js-value"> 微软雅黑;
    js-rule">}
    js-class">.carousel-captionjs-rules">{
        js-rule">js-attribute">background:js-value"> js-hexcolor">#000;
        js-rule">js-attribute">opacity:js-value"> js-number">0.6;
        js-rule">js-attribute">width:js-value"> js-number">100%;
        js-rule">js-attribute">left:js-value"> js-number">0pxjs-important">!important;
        js-rule">js-attribute">bottom:js-value"> js-number">0px;
        js-rule">js-attribute">height:js-value"> js-number">100px;
    js-rule">}
js-tag"></js-title">style>
js-tag"><js-title">body>
    js-tag"><js-title">div js-attribute">class=js-value">"container">
        js-tag"><js-title">h1 js-attribute">class=js-value">"page-header">BootStrapjs-tag"></js-title">h1>

            js-tag"><js-title">div js-attribute">class=js-value">"carousel slide" js-attribute">data-ride=js-value">"carousel" js-attribute">id=js-value">"mycarousel">
                js-comment"><!-- 幻灯片图片 -->
                js-tag"><js-title">div js-attribute">class=js-value">"carousel-inner">
                    js-tag"><js-title">div js-attribute">class=js-value">"item active">
                        js-tag"><js-title">img js-attribute">src=js-value">"images/lunbo1.jpg">
                        js-tag"><js-title">div js-attribute">class=js-value">"carousel-caption">
                            js-tag"><js-title">h3>The one slidejs-tag"></js-title">h3>
                            js-tag"><js-title">p>live off obstetrician js-tag"></js-title">p>
                        js-tag"></js-title">div>
                    js-tag"></js-title">div>
                    js-tag"><js-title">div js-attribute">class=js-value">"item"> 
                        js-tag"><js-title">img js-attribute">src=js-value">"images/lunbo2.jpg">
                        js-tag"><js-title">div js-attribute">class=js-value">"carousel-caption">
                            js-tag"><js-title">h3>The two slidejs-tag"></js-title">h3>
                            js-tag"><js-title">p>live off obstetrician js-tag"></js-title">p>
                        js-tag"></js-title">div>
                    js-tag"></js-title">div>
                    js-tag"><js-title">div js-attribute">class=js-value">"item">
                        js-tag"><js-title">img js-attribute">src=js-value">"images/lunbo3.jpg">
                        js-tag"><js-title">div js-attribute">class=js-value">"carousel-caption">
                            js-tag"><js-title">h3>The three slidejs-tag"></js-title">h3>
                            js-tag"><js-title">p>live off obstetrician js-tag"></js-title">p>
                        js-tag"></js-title">div>
                    js-tag"></js-title">div>
                js-tag"></js-title">div>
                js-comment"><!-- 左右控制 -->
                js-tag"><js-title">a js-attribute">href=js-value">"#mycarousel" js-attribute">class=js-value">"left  carousel-control" js-attribute">data-slide=js-value">"prev">
                    js-tag"><js-title">span js-attribute">class=js-value">"glyphicon glyphicon-chevron-left">js-tag"></js-title">span>
                js-tag"></js-title">a>
                js-tag"><js-title">a js-attribute">href=js-value">"#mycarousel" js-attribute">class=js-value">"right carousel-control" js-attribute">data-slide=js-value">"next">
                    js-tag"><js-title">span js-attribute">class=js-value">"glyphicon glyphicon-chevron-right">js-tag"></js-title">span>
                js-tag"></js-title">a>
            js-tag"></js-title">div>
js-tag"></js-title">body>
js-tag"><js-title">script>
    $(js-string">'.carousel-caption').hide();
    $(js-string">'.item').hover(
        js-function">js-keyword">functionjs-params">(){
        $(js-keyword">this).find(js-string">'.carousel-caption').slideDown();
        },
        js-function">js-keyword">functionjs-params">(){
        $(js-keyword">this).find(js-string">'.carousel-caption').slideUp();
        },
    );
js-tag"></js-title">script>
js-tag"></js-title">html>

这里写图片描述


http://www.niftyadmin.cn/n/773856.html

相关文章

js-关于this的小测试

js-关于this的小测试

一个面试题分析&#xff1a; <script type"text/javascript">//运行test() 和new test&#xff08;&#xff09;的结果var a 5;function test(){a 0;alert(a);alert(this.a);var a;alert(a);}test(); //0 5 0// AO{// a: 0// }// GO {// a: 5// }// alert…
阅读更多...
js-深克隆，浅克隆

js-深克隆，浅克隆

1深克隆 <script type"text/javascript">var obj{name:"abc",age:123,card:[ visa,master],wife:{name:"bcd",son:{name:"aaa"}}}var obj1{};//深克隆// 遍历对象 for&#xff08; var prop in obj&#xff09;//1.判断是不是原…
阅读更多...
js-typeof封装工具类

js-typeof封装工具类

在JavaScript中&#xff0c;判断类型也是常用的一种方法&#xff0c;但是它自带的判断类型的方法不是很完美&#xff0c;只能判断以下基本类型&#xff0c;不能判断引用类型和封装类型&#xff1a; number &#xff0c; string &#xff0c;boolean , object( 数组和null&…
阅读更多...
js小功能-滑块移动 和 俄罗斯方块式 键盘操作移动

js小功能-滑块移动 和 俄罗斯方块式 键盘操作移动

滑块移动 <script type"text/javascript">var div document.createElement(div);document.body.appendChild(div);div.style.width "50px";div.style.height "50px";div.style.backgroundColor "red";div.style.position …
阅读更多...
js小功能-涂色板

js小功能-涂色板

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Document</title><style>*{margin:0;padding:0;}li{box-sizing: border-box;/*边框加上宽高的大小一共是10px*/float: left;width:10px;he…
阅读更多...
js-随机显示颜色

js-随机显示颜色

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Document</title><style>*{margin:0;padding:0;}li{box-sizing: border-box;/*边框加上宽高的大小一共是10px*/float: left;width:10px;he…
阅读更多...
js-封装insertAfter

js-封装insertAfter

有很多方法 进行insertAfter&#xff08;&#xff09;方法的封装&#xff0c;我也想到一种方法&#xff0c;用着很简单&#xff0c;但不知道有没有什么弊端&#xff0c;还望指正&#xff1a; 1 Element.prototype.insertAfterfunction (targetElement,referElement){return t…
阅读更多...
js-循环里面的时事件绑定（闭包）

js-循环里面的时事件绑定（闭包）

如下函数&#xff0c;想要打印出每个i的序号&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Document</title> </head> <body><ul><li>1</li><…
阅读更多...
最新文章

Copyright @ 2022~2023