这篇文章主要为大家介绍了 javascript 实现图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
效果图:
具体代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style type="text/CSS">
- *{
- margin: 0;
- padding: 0;
- }
- .wrap{
- width: 510px;
- margin: 0 auto;
- overflow: hidden;
- position: relative;
- }
- .caktye{
- width: 9999px;
- overflow: hidden;
- position: relative;
- left: 0;
- }
- .main{
- text-align: center;
- position: absolute;
- bottom: 10px;
- /*border: 1px solid red;*/
- left: 35%;
- }
- .main button{
- width: 25px;
- height: 25px;
- text-align: center;
- line-height: 25px;
- border-radius: 25px;
- display: inline-block;
- border: none;
- }
- .active{
- background-color: yellow;
- }
- .caktye a{
- float: left;
- }
- .caktye img {
- display: block;
- width:510px;
- }
- #prevBtn{
- display: block;
- position: absolute;
- left: 5px;
- bottom: 45%;
- width: 15px;
- height: 15px;
- /*overflow: hidden;*/
- border-left: 5px solid ;
- border-top: 5px solid ;
- border-color: rgba(255,255,255,0.5);
- -webkit-transform: rotate(45deg);
- transform: rotate(-45deg);
- }
- #nextBtn{
- display: block;
- position: absolute;
- right: 5px;
- bottom: 45%;
- width: 15px;
- height: 15px;
- /*overflow: hidden;*/
- border-right: 5px solid;
- border-top: 5px solid;
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
- border-color: rgba(255,255,255,0.5);
- /*background-color: rgba(255,255,255,0.8);*/
- }
- </style>
- </head>
- <body>
- <div class="wrap">
- <div class="caktye" id="inner">
- <a href="###"><img src="img/1.jpg"></a>
- <a href="###"><img src="img/2.jpg"></a>
- <a href="###"><img src="img/3.jpg"></a>
- <a href="###"><img src="img/4.jpg"></a>
- <a href="###"><img src="img/5.jpg"></a>
- <a href="###"><img src="img/1.jpg"></a>
- </div>
- <div class="main">
- <button class="active">1</button>
- <button>2</button>
- <button>3</button>
- <button>4</button>
- <button>5</button>
- </div>
- <div>
- <a href="###" id="prevBtn"></a>
- <a href="###" id="nextBtn"></a>
- </div>
- </div>
- <script type="text/javascript">
- var innerList = document.getElementById("inner");
- var btnList = document.getElementsByTagName("button");
- var perWidth = inner.children[0].offsetWidth;
- var prevBtn = document.getElementById("prevBtn");
- var nextBtn = document.getElementById("nextBtn");
- // var imgList = inner.getElementsByTagName("img");
- // var perWidth = imgList[0].offsetWidth;
- var timer = 0;
- var timer1 = 0;
- var index =0;
- var runFlag = true; //设置一个动画是否走完的标志位
- for(var i = 0; i < btnList.length; i++) {
- btnList[i].index = i;
- btnList[i].onclick = function() {
- index = this.index;
- tab();
- }
- }
- function tab() {
- var start = inner.offsetLeft;
- var end = - perWidth * index;
- var change = end - start;
- var t = 0;
- var maxT = 30;
- clearInterval(timer1);
- timer1 = setInterval(function() {
- t++;
- if(t >= maxT) {
- clearInterval(timer1);
- // alert("停下来了");
- runFlag = true;
- }
- inner.style.left = change/maxT * t + start + "px";
- if(index == btnList.length && t >= maxT) {
- inner.style.left = 0;
- }
- },30)
- // inner.style.left = - perWidth * index + "px";
- for(var j = 0; j < btnList.length; j++) {
- btnList[j].className = "";
- }
- if(index >= btnList.length) {
- btnList[0].className = "active";
- }else {
- btnList[index].className = "active";
- }
- }
- function xunhuan(){
- index++;
- if(index>btnList.length){
- index=1;
- }
- // inner.style.left = - perWidth * index + "px";
- tab();
- }
- var timer =setInterval(xunhuan,5000);
- inner.onmouseover =function(){
- clearInterval(timer);
- }
- inner.onmouseout =function(){
- timer = setInterval(xunhuan,5000);
- }
- function next() {
- index++;
- if(index > btnList.length) {
- index = 1;
- }
- tab();
- }
- function prev() {
- index--;
- if(index < 0 ) {
- index = btnList.length - 1;
- inner.style.left = - btnList.length * perWidth + "px";
- console.log(index);
- }
- tab();
- }
- //下一张
- nextBtn.onclick = function() {
- clearInterval(timer);
- if(runFlag) {
- next();
- }
- runFlag = false;
- }
- //上一张
- prevBtn.onclick = function() {
- clearInterval(timer);
- if(runFlag) {
- prev();
- }
- runFlag = false;
- }
- </script>
- </body>
- </html>
希望本文所述对大家学习 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0409/267486.html