首先，我不了解JS。我需要让滑块自动运行，只有在点击时才会进入下一张幻灯片。所以任何帮助都会很明显。
HTML文件
<div class="wrapper">
<div id="slider">
<div id="slide-wrapper">
<!-- ################################################################################################ -->
<figure id="slide-1"><a class="view" href="#"><img src="images/demo/slider/sdslider-1.jpg" alt=""></a>
<figcaption>
<h2>Nullamlacus dui ipsum</h2>
<p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
<p class="right"><a href="#">Continue Reading »</a></p>
</figcaption>
</figure>
<figure id="slide-2"><a class="view" href="#"><img src="images/demo/slider/s2.png" alt=""></a>
<figcaption>
<h2>Aliquatjusto quisque nam</h2>
<p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
<p class="right"><a href="#">Continue Reading »</a></p>
</figcaption>
</figure>
<figure id="slide-3"><a class="view" href="#"><img src="images/demo/slider/s3.png" alt=""></a>
<figcaption>
<h2>Aliquatjusto quisque nam</h2>
<p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
<p class="right"><a href="#">Continue Reading »</a></p>
</figcaption>
</figure>
<figure id="slide-4"><a class="view" href="#"><img src="images/demo/slider/s4.png" alt=""></a>
<figcaption>
<h2>Aliquatjusto quisque nam</h2>
<p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
<p class="right"><a href="#">Continue Reading »</a></p>
</figcaption>
</figure>
<figure id="slide-5"><a class="view" href="#"><img src="images/demo/slider/s5.png" alt=""></a>
<figcaption>
<h2>Dapiensociis temper donec</h2>
<p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
<p class="right"><a href="#">Continue Reading »</a></p>
</figcaption>
</figure>
<!-- ################################################################################################ -->
<ul id="slide-tabs">
<li><a href="#slide-1">All About The University</a></li>
<li><a href="#slide-2">Why You Should Study With Us</a></li>
<li><a href="#slide-3">Education And Student Experience</a></li>
<li><a href="#slide-4">Alumni And Its Donors</a></li>
<li><a href="#slide-5">Latest University News & Events</a></li>
</ul>
<!--
################################################################################################ -->
</div>
</div>
</div>
</div>
<div class="section-top">
<div class="col_1_of_3 span_1_of_3">
<div class="title-img">
<div class="title"><img src="images/book1.png" alt=""/></div>
<div class="title-desc"><p>Chairman's Message</p></div>
<div class="clear"></div>
</div>
<p class="desc"><strong>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt.</strong></p>
<p class="desc1">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet conse ctetur adipisicing elit.</p>
<a href="#" class="btn btn-primary"><span>Read more</span><img src="images/more_arrow.png" alt=""></a>
</div>
<div class="col_1_of_3 span_1_of_3">
<div class="title-img1">
<div class="title"><img src="images/cup.png" alt=""/></div>
<div class="title-desc"><p>Event Calender</p></div>
<div class="clear"></div>
</div>
<p class="desc-middle"><strong>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt.</strong></p>
<p class="desc1">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet conse ctetur adipisicing elit.</p>
<a href="#" class="btn btn-primary1"><span>Read more</span><img src="images/more_arrow.png" alt=""></a>
</div>
<div class="col_1_of_3 span_1_of_3">
<div class="title-img2">
<div class="title"><img src="images/books.png" alt=""/></div>
<div class="title-desc"><p>Virtual library</p></div>
<div class="clear"></div>
</div>
<p class="last"><strong>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt.</strong></p>
<p class="desc1">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet conse ctetur adipisicing elit.</p>
<a href="#" class="btn btn-primary2"><span>Read more</span><img src="images/more_arrow.png" alt=""></a>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
JS代码
我在这个网站上看到过很多类似的问题，但是他们发布的Js代码与我的不同。所以很难找到哪些是我需要显示的正确代码部分以寻求帮助。不知道我提供的代码是否正确，但经过多次搜索后我发现这段代码可能很有用。
m.Event.prototype= {isDefaultPrevented:bb,isPropagationStopped:bb,isImmediatePropagationStopped:bb,preventDefault:function(){var a=this.originalEvent;this.isDefaultPrevented=ab,a&&(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){var a=this.originalEvent;this.isPropagationStopped=ab,a&&(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){var a=this.originalEvent;this.isImmediatePropagationStopped=ab,a&&a.stopImmediatePropagation&&a.stopImmediatePropagation(),this.stopPropagation()}}
答案 0 :(得分：0)
您的代码不是很清楚所以我建议您轻松一步，因为您对JavaScript有一些了解。
使用bootstrap carousel。
Bootstrap Tabbed滑块：
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x400/cccccc/ffffff">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/999999/cccccc">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/dddddd/333333">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/999999/cccccc">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<ul class="nav nav-pills nav-justified">
<li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li>
</ul>
</div><!-- End Carousel -->
</div>
css：
body { padding-top: 20px; }
#myCarousel .nav a small {
display:block;
}
#myCarousel .nav {
background:#eee;
}
#myCarousel .nav a {
border-radius:0px;
}
JavaScript：
$(document).ready( function() {
$('#myCarousel').carousel({
interval: 4000
});
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
clickEvent = true;
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.nav').children().length -1;
var current = $('.nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.nav li').first().addClass('active');
}
}
clickEvent = false;
});
});
代码段链接here。