我们如何在旋转木马中进行控制

时间:2015-07-19 12:01:08

标签: jquery twitter-bootstrap

我刚制作了一个文字轮播并且不知道如何制作它的控制,左右控制。请帮我解决一下。我是JQuery的新手

小提琴:https://jsfiddle.net/1bc8j418/

或者你可以在这里看到我的代码

这是我的HTML

        <div class="carouselBg">
            <p id="demoSliderFirst" class="textSliders"> 
                Life must be lived forwards, but can only be understood backwards.  
            </p>
        </div>

这是我的CSS

.carouselBg{
   min-height: 300px;
   max-width: 700px;
   position: relative;
   top: 70px;
   color: #fff;
   background-color: #AC8157;
}
.textSliders{
  font-size: 24px;
  color: #fff;
  text-align: center;
  padding:50px;
  padding-top:130px;
}

这是我的JQUERY

var demoSlider1 = $('#demoSliderFirst');
var DemoSliderSet1 = [
'Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment',
'What screws us up the most in life is the picture in our head of how it is supposed to be.',
'Life shrinks or expands in proportion to one’s courage.'];
var index1 = 0;

function demoSliderCarousel1(){

    var newDemoSliderSet1 = DemoSliderSet1[index1];

    demoSlider1.fadeOut('400',function(){
        demoSlider1[0].innerHTML = newDemoSliderSet1;
    }).fadeIn('400');


    index1++;

    if(index1 >= DemoSliderSet1.length){
        index1 = 0;
    }

}

setInterval(demoSliderCarousel1,4000);

0 个答案:

没有答案