这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要分享了基于 js 实现的轮播效果的实例代码,具有一定的参考价值,下面跟着小编一起来看下吧
- <!--图片轮播 Start-->
- <div class="pics-ul">
- <div class="pics-ulleft">
- <ul id="allImg">
- <li>
- <img src="img/img01.png" />
- </li>
- <li>
- <img src="img/img2.jpg" />
- </li>
- <li>
- <img src="img/img1.jpg" />
- </li>
- <li>
- <img src="img/img3.jpg" />
- </li>
- <li>
- <img src="img/img4.jpg" />
- </li>
- </ul>
- <a name="btn" id="prev" class="prev" style="display: block;">
- </a>
- <a name="btn" id="next" class="next" style="display: block;">
- </a>
- <ul id="btn" class="pagination">
- <li class="hover">
- <a href="#0">
- 1
- </a>
- </li>
- <li>
- <a href="#1">
- 2
- </a>
- </li>
- <li>
- <a href="#2">
- 3
- </a>
- </li>
- <li>
- <a href="#3">
- 4
- </a>
- </li>
- <li>
- <a href="#4">
- 5
- </a>
- </li>
- </ul>
- </div>
- <div class="pics-ulright">
- <img src="img/imgright.png" />
- </div>
- </div>
- <!--图片轮播 End-->
js
- /*图片轮播*/
- var but1 = document.getElementById("prev");
- var abtn = document.getElementById("btn").getElementsByTagName("li"); //获取所有的按钮
- var lis = document.getElementById('allImg').getElementsByTagName('li');
- var but2 = document.getElementById("next");
- var index = 0;
- var timer = null;
- but2.onclick = function() {
- index++;
- if (index > lis.length - 1) {
- index = 0;
- }
- setImg(index);
- }
- but1.onclick = function() {
- index--;
- if (index < 0) {
- index = lis.length - 1;
- }
- setImg(index);
- }
- function changeImg() {
- if (index == lis.length - 1) { //当到最后一张图片时
- index = 0
- } else {
- index++; //图片索引发生改变
- }
- setImg(index);
- }
- function setImg(index) {
- for (j = 0; j < lis.length; j++) {
- lis[j].style.display = "none";
- }
- lis[index].style.display = "block";
- //按钮的样式要与图片对应
- for (var i = 0; i < abtn.length; i++) {
- abtn[i].className = ""
- }
- abtn[index].className = "hover";
- }
- //自动切换
- timer = setInterval(changeImg, 3000);
- //按钮
- for (var i = 0; i < abtn.length; i++) {
- (function() {
- var p = i
- abtn[p].onclick = function() {
- index = p;
- setImg(index);
- }
- })();
- }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0528/329076.html