首页 > 代码库 > 一个html+css+js的轮播图片 -- 仅供参考

一个html+css+js的轮播图片 -- 仅供参考

2024-08-20 03:04:49   220人阅读

 

 

 

　　好久没打网页程序了，标签和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">&lt;</a>
29     <a href="javascript:;" id ="next" class="arrow">&gt;</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的轮播图片 -- 仅供参考


联系
我们