如何设置bootstrap 图片轮播图片的移动速度（不是间隔时间）？

Posted 2023-05-06

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何设置bootstrap 图片轮播图片的移动速度（不是间隔时间）？相关的知识，希望对你有一定的参考价值。

修改css

.carousel-inner > .item
  -webkit-transition: -webkit-transform .2s ease-in-out;
  -o-transition: -o-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;

参考技术A 源o0Forever 你真装不会就不会

$(function()
$('.carousel').carousel(
interval: 3000
);
);

楼主加上这一段参考技术B 看你2还是3了。如果是3，打开bootstrap.js，417行看看，那个js不难的，你应该能看懂，就在那附近，关于carousel写的js的一些数值改改看看追问

在417行附近的代码
that.sliding = false
setTimeout(function () that.$element.trigger('slid') , 0)
)
.emulateTransitionEnd(600)

这里面两个数值我改了，还是不行诶，您能告诉我具体是改那个代码吗？小弟感激不尽

追答

最近比较忙，轮询的js代码肯定在这附近，你找找吧。。这也是锻炼你的机会

AngularJS+ui.bootstrap实现图片轮播

原地址：http://blog.csdn.net/yateswang/article/details/47751477

<!DOCTYPE html>  
<html ng-app="myApp" lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>AngularJS carousel</title>  
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">  
    <script src="angular.min.js"></script>  
    <script src="angular-animate.min.js"></script>  
    <script src="ui-bootstrap.min.js"></script>  
    <script src="ui-bootstrap-tpls.min.js"></script>  
</head>  
<body>  
    <div ng-controller="CarouselDemoCtrl">  
        <div style="height: 305px">  
            <carousel interval="myInterval" no-wrap="noWrapSlides">  
                <slide ng-repeat="slide in slides" active="slide.active">  
                    <img ng-src="{{slide.image}}" style="margin:auto;">  
                    <div class="carousel-caption">  
                        <h4>Nsfocus {{$index}}</h4>  
                        <p>{{slide.text}}</p>  
                    </div>  
                </slide>  
            </carousel>  
        </div>  
    </div>  
    <script>  
        angular.module(‘myApp‘, [‘ui.bootstrap‘, ‘ngAnimate‘]).controller(‘CarouselDemoCtrl‘, function ($scope) {  
            $scope.myInterval = 2000;  
            $scope.noWrapSlides = false;  
            var slides = $scope.slides = [];  
            $scope.addSlide = function () {  
                var newWidth = 600 + slides.length + 1;  
                slides.push({  
                    image: ‘http://steamcommunity-a.akamaihd.net/economy/image/U8721VM9p9C2v1o6cKJ4qEnGqnE7IoTQgZI-VTdwyTBeimAcIoxXpgK8bPeslY9pPJIvB5IWW2-452kaM8heLSRgleGArrBBwe94OfEh0bOlAlopvOVPAWe3GEKAgj6ULuupkVhtYZ0pIxzzk5gY59xSWJ95SOIxsbCuJg/1280x800‘,  
                    text: ‘nsfocus‘,  
                });  
                slides.push({  
                    image: ‘http://steamcommunity-a.akamaihd.net/economy/image/U8721VM9p9C2v1o6cKJ4qEnGqnE7IoTQgZI-VTdwyTBeimAcIoxXpgK8bPeslY9pPJIvB5IWW2-452kaM8heLSRgleGArrBBwe94PqYvguSpXFVwv-URAD3mGBHRgzaceuqqk1BlN5IrcUvxlp8d5t8BX595SOKdq0CMpw/1280x800‘,  
                    text: ‘nsfocus‘,  
                });  
                slides.push({  
                    image: ‘http://cdn.steamcommunity.com/economy/image/U8721VM9p9C2v1o6cKJ4qEnGqnE7IoTQgZI-VTdwyTBeimAcIoxXpgK8bPeslY9pPJIvB5IWW2-452kaM8heLSRgleGArrBBwe94PqUrgrStA1tw6OZBXGTgH0fQ1j-WeOeskQUxYcYuI02hkpgYuNZRW595SOLioa6j6w/1280x800‘,  
                    text: ‘nsfocus‘,  
                });  
                slides.push({  
                    image: ‘http://steamcommunity-a.akamaihd.net/economy/image/U8721VM9p9C2v1o6cKJ4qEnGqnE7IoTQgZI-VTdwyTBeimAcIoxXpgK8bPeslY9pPJIvB5IWW2-452kaM8heLSRgleGArrBBwe94aqAq0-T4CVtyvLEUV2C1F0jU3mOTfrqqwlM0McZ9cBv0yckdvNxTUJ95SOId8xoS5w/1280x800‘,  
                    text: ‘nsfocus‘,  
                });  
            };  
            $scope.addSlide();  
        });  
    </script>  
</body>  
</html>

以上是关于如何设置bootstrap 图片轮播图片的移动速度（不是间隔时间）？的主要内容，如果未能解决你的问题，请参考以下文章

bootstrap2 的图片轮播，如何自动播放？

bootstrap 同一页面多个图片轮播

Discuz常见大问题-如何使用图片轮播器

Bootstrap轮播图的切换按钮如何制作？

如何用Bootstrap制作轮播图