如何创建文本滑块

时间:2013-09-27 19:13:15

标签: javascript html5 css3 text slider

我正在尝试创建一个文本滑块 我目前正在建立一个网站,并希望添加一个部分,我可以显示客户评论,并将其从一个评论更改为另一个评论。

1 个答案:

答案 0 :(得分:0)

只有HTML和CSS才能做到这一点 你需要使用Javascript,假设你有这个HTML:

 <div class="customer_review" id="review0">
   Some contents
 </div>
 ...
 <div class="customer_review" id="review14" style="display:none;">
   Some other contents
 </div>

您的Javascript看起来像:

var current_id = 0;

function newCustomerReview() {
  // get all review elements
  var reviews = document.getElementsByClassName("customer_review");
  current_id = (current_id < reviews.length) ? current_id++ : current_id = 0;
  for(var i = 0; i < reviews.length; i++) {
    // iterate through every review element
    var myReview = reviews[i];
    // check if it is the new one we want
    if (i == current_id) {
      myReview.setAttribute("style", "display: block;");
      // or just remove style attribute
    }
    else {
      myReview.setAttribute("style", "display: none;");
    }
  }
  setTimeout("newCustomerReview();", 3000);
}

setTimeout("newCustomerReview();", 3000); // to start updating every 3 seconds