我正在尝试制作简单的图像滑块。我已经成功使用javascript和html。看看下面的代码。
我已经把所有的代码都放在了一切。问题只在于 showItemAtIndex 功能。一旦它改变了图像的显示属性，网页就会突然滚动到图像的顶部。非常奇怪。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
/*
@param carousel_id: the tag id which hold the carousel componenets.
carousel container structure should be as the boostrap container structure.
*/
var ImageSlider = function(carousel_id)
{
var parent = this;
this.selected_item_index = 0;//image index which currently visible. by default first image is the selected one
this.carousel_container = document.getElementById(carousel_id);//container which contain the main slider
this.carousel_items = this.carousel_container.getElementsByClassName("carousel-inner")[0].getElementsByClassName("item");
this.carousel_indicators = this.carousel_container.getElementsByClassName("carousel-indicators")[0].getElementsByTagName("li");
//listen to next events click, when user wanto to see the previous image
this.carousel_container.getElementsByClassName("right carousel-control")[0].addEventListener("click", function(){
var new_item_index = parent.selected_item_index + 1;
new_item_index = new_item_index % parent.carousel_items.length;
showItemAtIndex(new_item_index);
});
//listen to prev events click. when user need to show the next image
this.carousel_container.getElementsByClassName("left carousel-control")[0].addEventListener("click", function(){
var new_item_index = parent.selected_item_index - 1;
if (new_item_index < 0) {
new_item_index = new_item_index + parent.carousel_items.length;
}
showItemAtIndex(new_item_index);
});
/*this function will show the the item at the given itemIndex */
var showItemAtIndex = function(itemIndex){
/*
TODO:
step1 : update carousel images
step2 : update carousel-indicators
step3: update this.selected_item_index
*/
/* now we need to show the new selected item */
var carousel_height = parent.carousel_container.height;
var new_selected_item = parent.carousel_items[itemIndex];
new_selected_item.style.display = "inline-block";
//step1
/* first thing we need to hide the current selected items */
var current_carousel_selected_item = parent.carousel_items[parent.selected_item_index];
current_carousel_selected_item.style.display = "none";
//Animate(current_carousel_selected_item,0);
//step2
/* remove active from all elements */
var carousel_indicators_length = parent.carousel_indicators.length;
for(var i = 0 ; i < carousel_indicators_length ; i++ ){
var monoCarouselIndicator = parent.carousel_indicators[i];
monoCarouselIndicator.className = "";
}
/* add class active to indicator at selected element */
var selectedIndicatorElement = parent.carousel_indicators[itemIndex];
selectedIndicatorElement.className = "active";
//step3
parent.selected_item_index = itemIndex;
}
/* we should hide all items but not selected one(selected one = at first index) */
var carousel_item_length = this.carousel_items.length;
for(var i = 1; i < carousel_item_length ; i++){
var monoItem = this.carousel_items[i];
// monoItem.style.height = "0px";
monoItem.style.display = "none";
}
}
</script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<style>
body {
background: #ececee;
}
</style>
</head>
<body>
<!-- header section -->
<div class="container header" style="height:300px;" >
</div>
<!-- carousel section -->
<div class="container carosel_section" id="carosel_section">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" style="height: 100%;">
<img style="height: 100%;" class="img-responsive"
src="http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg">
</div>
<div class="item" style="height: 100%;">
<img style="height: 100%;" class="img-responsive"
src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</div>
<div class="item" style="height: 100%;">
<img style="height: 100%;" class="img-responsive"
src="http://eskipaper.com/images/images-4.jpg">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button"
data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"
aria-hidden="true"></span> <span class="sr-only">Previous</span>
</a> <a class="right carousel-control" href="#myCarousel"
role="button" data-slide="next"> <span
class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- load image slider -->
<script>
new ImageSlider("myCarousel");
</script>
<!-- bottom section section -->
<div class="container header" style="height:300px;" >
</div>
</body>
</html>
答案 0 :(得分：0)
问题出在左右控件的HTML中。删除href="#myCarousel"，它将正常工作。然后它会是这样的：
<!-- Left and right controls -->
<a class="left carousel-control" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
这是一个有效的演示：
var ImageSlider = function(carousel_id) {
var parent = this;
// image index which currently visible. by default first image is the selected one
var selected_item_index = 0;
// container which contain the main slider
var carousel_container = document.getElementById(carousel_id);
var carousel_items = carousel_container
.getElementsByClassName("carousel-inner")[0]
.getElementsByClassName("item");
var carousel_indicators = carousel_container
.getElementsByClassName("carousel-indicators")[0]
.getElementsByTagName("li");
//listen to next events click, when user wanto to see the previous image
carousel_container
.getElementsByClassName("right carousel-control")[0]
.addEventListener("click", function() {
var new_item_index = selected_item_index + 1;
new_item_index = new_item_index % carousel_items.length;
showItemAtIndex(new_item_index);
});
//listen to prev events click. when user need to show the next image
carousel_container
.getElementsByClassName("left carousel-control")[0]
.addEventListener("click", function() {
var new_item_index = selected_item_index - 1;
if (new_item_index < 0) {
new_item_index = new_item_index + carousel_items.length;
}
showItemAtIndex(new_item_index);
});
// this function will show the the item at the given itemIndex
var showItemAtIndex = function(itemIndex) {
/* TODO:
step1: update carousel images
step2: update carousel-indicators
step3: update this.selected_item_index
*/
// now we need to show the new selected item
var carousel_height = carousel_container.height;
var new_selected_item = carousel_items[itemIndex];
new_selected_item.style.display = "block";
// step1
// first thing we need to hide the current selected items
var current_carousel_selected_item = carousel_items[selected_item_index];
current_carousel_selected_item.style.display = "none";
//Animate(current_carousel_selected_item,0);
// step2
// remove active from all elements
var carousel_indicators_length = carousel_indicators.length;
for (var i = 0; i < carousel_indicators_length; i++) {
var monoCarouselIndicator = carousel_indicators[i];
monoCarouselIndicator.className = "";
}
// add class active to indicator at selected element
var selectedIndicatorElement = carousel_indicators[itemIndex];
selectedIndicatorElement.className = "active";
// step3
selected_item_index = itemIndex;
}
// we should hide all items but not selected one (selected one = at first index)
var carousel_item_length = carousel_items.length;
for (var i = 1; i < carousel_item_length; i++) {
var monoItem = carousel_items[i];
// monoItem.style.height = "0px";
monoItem.style.display = "none";
}
}
new ImageSlider("myCarousel");body {
background: #ececee;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- header section -->
<div class="container header" style="height:300px;"></div>
<!-- carousel section -->
<div class="container carosel_section" id="carosel_section">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" style="height: 100%;">
<img style="height: 100%;" class="img-responsive" src="http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg">
</div>
<div class="item" style="height: 100%;">
<img style="height: 100%;" class="img-responsive" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</div>
<div class="item" style="height: 100%;">
<img style="height: 100%;" class="img-responsive"
src="http://eskipaper.com/images/images-4.jpg">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>