一个html+css+js的轮播图片 -- 仅供参考
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个html+css+js的轮播图片 -- 仅供参考相关的知识，希望对你有一定的参考价值。
好久没打网页程序了，标签和css 之类都忘的跟空白一样，花几天时间把丢掉的东西给捡起来。
附上 html+css+js 代码
html：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>轮播图片</title> 6 <link href="css/css.css" rel="stylesheet" type="text/css" /> 7 <script src="js/js.js" type="text/javascript"></script> 8 </head> 9 10 <body> 11 <div id="container"> 12 <div id="list" style="left: -600px;"> 13 <img src="images/5.jpg" alt="1"/> 14 <img src="images/1.jpg" alt="1"/> 15 <img src="images/2.jpg" alt="2"/> 16 <img src="images/3.jpg" alt="3"/> 17 <img src="images/4.jpg" alt="4"/> 18 <img src="images/5.jpg" alt="5"/> 19 <img src="images/1.jpg" alt="5"/> 20 </div> 21 <div id="buttons"> 22 <span index ="1" class="on"></span> 23 <span index ="2"></span> 24 <span index ="3"></span> 25 <span index ="4"></span> 26 <span index ="5"></span> 27 </div> 28 <a href="javascript:;" id ="prev" class="arrow"><</a> 29 <a href="javascript:;" id ="next" class="arrow">></a> 30 </div> 31 </body> 32 </html>
CSS：
1 /* CSS Document */ 2 /* 3 图片轮播效果 4 */ 5 *{ margin:0; padding:0; text-decoration:none;} 6 body{ padding:20px;} 7 8 #container{ width:800px; height:400px; /*border: 0px solid #333;*/ overflow:hidden; position:relative;} 9 #list{ width:5600px; height:400px; position:absolute; z-index: 1;} 10 #list img{ float: left; width:800px; height:400px;} 11 #buttons { position:absolute; height:10px; width:100px; z-index: 2; bottom: 20px; left:250px;} 12 #buttons span{ cursor:pointer; float:left; border: 1px solid #FFF; width:10px ; height:10px; border-radius: 50% ; background:#333; margin-right: 5px;} 13 #buttons .on{ background:orangered;} 14 .arrow { cursor:pointer ; display:none; line-height: 39px; text-align:center; font-size:36px; font-weight:bold; width:40px; height:40px; position:absolute; z-index: 2; top:180px; background-color:#CCC; color:#fff;} 15 .arrow:hover { background-color:#F90;} 16 #container:hover .arrow{ display: block;} 17 #prev{ left: 20px;} 18 #next{ right: 20px; }
JS:
1 // JavaScript Document 2 3 window.onload = function(){ 4 var container = document.getElementById(‘container‘); 5 var list = document.getElementById(‘list‘); 6 var buttons = document.getElementById(‘buttons‘).getElementsByTagName(‘span‘); 7 var prev = document.getElementById(‘prev‘); 8 var next = document.getElementById(‘next‘); 9 var index = 1; /*控制圆点*/ 10 var animated = false; /*控制动画*/ 11 var timer; 12 13 /*显示按钮*/ 14 function showButton(){ 15 for(var i = 0; i < buttons.length; i++){ 16 if(buttons[i].className == ‘on‘){ 17 buttons[i].className = ‘‘; 18 break; 19 } 20 } 21 buttons[index -1].className = ‘on‘; 22 } 23 /*实现轮播*/ 24 function animate(offset){ 25 animated = true; /*开始动画*/ 26 var newLeft = parseInt(list.style.left) + offset; 27 var time = 700; /*位移总时间*/ 28 var interval = 10; /*位移间隔时间*/ 29 var speed = offset/(time / interval); /*每次位移量*/ 30 31 function go(){ 32 if((speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)){ 33 list.style.left = parseInt(list.style.left) + speed + ‘px‘; 34 setTimeout(go, interval); /*定时器*/ 35 }else{ 36 animated = false; /*停止动画*/ 37 38 list.style.left = newLeft + ‘px‘; 39 /*实现无限轮播*/ 40 if(newLeft > -800) 41 { 42 list.style.left = -4000 + ‘px‘; 43 } 44 if(newLeft < -4000) 45 { 46 list.style.left = -800 + ‘px‘; 47 } 48 } 49 } 50 go(); /*调用自身实现*/ 51 } 52 /*自动播放*/ 53 function play(){ 54 timer = setInterval(function(){ 55 next.onclick(); 56 },3000); /*3000相当于3秒*/ 57 58 } 59 /*停止自动播放*/ 60 function stop(){ 61 clearInterval(timer); 62 } 63 /*鼠标在图外触发自动播放*/ 64 container.onmouseout = play; 65 /*鼠标在图外触发停止播放*/ 66 container.onmouseover = stop; 67 /**/ 68 play(); 69 70 71 next.onclick = function(){ 72 if(index == 5) 73 { 74 index = 1; 75 } 76 else { 77 index += 1; 78 } 79 showButton(); 80 if(!animated) 81 { 82 animate(800); 83 } 84 } 85 prev.onclick = function() 86 { 87 if(index == 1) 88 { 89 index = 5; 90 } 91 else{ 92 index -= 1; 93 } 94 showButton(); 95 if(!animated) 96 { 97 animate(-800); 98 } 99 } 100 101 /*图片随圆点移动*/ 102 for(var i = 0; i < buttons.length; i++) 103 { 104 buttons[i].onclick = function(){ 105 if(this.className == ‘on‘) 106 { 107 return; 108 } 109 var newIndex = parseInt(this.getAttribute(‘index‘)); 110 var offset = -800 * (newIndex - index); 111 animate(offset); 112 index = newIndex; 113 showButton(); 114 } 115 } 116 }
心情低沉，只因有放不下的东西。感觉很累很累--
以上是关于一个html+css+js的轮播图片 -- 仅供参考的主要内容，如果未能解决你的问题，请参考以下文章