js实现简单轮播效果

来源：互联网发布：激战2呆萌夏尔捏脸数据编辑：程序博客网时间：2024/06/03 21:57

html：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <link href="css/carousel.css" rel="stylesheet" type="text/css"></head><body>  <div id="wrap">    <ul id="banner">      <li><img src="images/one.jpg"></li>      <li><img src="images/two.jpg"></li>      <li><img src="images/three.jpg"></li>      <li><img src="images/four.jpg"></li>      <li><img src="images/five.jpg"></li>      <li><img src="images/six.jpg"></li>    </ul>    <ol id="number">      <li class="on">1</li>      <li>2</li>      <li>3</li>      <li>4</li>      <li>5</li>      <li>6</li>    </ol>  </div></body><script src="js/carousel.js"></script></html>

css：

*{  margin: 0;  padding: 0;  list-style: none;}#wrap{  position: relative;  width: 80%;  height: 300px;  overflow: hidden;  margin: 0 auto;  cursor: pointer;}#wrap ul{  position: absolute;  width: 100%;}#wrap ul li img{  width: 100%;  height: 300px;}#wrap ol{  position: absolute;  margin: 250px 50px;}#wrap ol li{  float: left;  margin-left: 5px;  width: 20px;  height: 20px;  line-height: 20px;  text-align: center;  background: #ccc;  color: #000;  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  border-radius: 10px;  cursor: pointer;}#wrap ol li.on, #wrap ol li:hover{  background: #d4660f;  color: #fff;}

js：

window.onload = function () {  var wrap = document.getElementById('wrap');  var banners = document.getElementById('banner').getElementsByTagName('li');  var numbers = document.getElementById('number').getElementsByTagName('li');  var timer = null;  var index = 0;  // 调用自动播放函数，每两秒执行一次  timer = setInterval(autoPlay, 2000);  // 鼠标滑过图片时停止轮播  wrap.onmouseover = function(){    clearInterval(timer);  };  // 鼠标离开图片时继续轮播  wrap.onmouseout = function(){    timer = setInterval(autoPlay, 2000)  };  // 遍历所有数字点击时切换到对应的图片  for(var i = 0; i < numbers.length; i++){    numbers[i].onclick = function(){      clearInterval(timer);      index = this.innerText - 1;      changeBanner(index);    }  }  // 自动轮播  function autoPlay(){    index ++;    if(index >= banners.length){      index = 0;    }    changeBanner(index)  }  // 定义图片切换  function changeBanner(curIndex){    for(var i = 0; i < banners.length; i++){      banners[i].style.display = 'none';      numbers[i].className = '';    }    banners[curIndex].style.display = 'block';    numbers[curIndex].className = 'on';  }};

阅读全文

1 0