用JS写一个简单的轮播器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body{
 background: gray;
}
 div{
  width: 300px;height: 400px;
  margin: 0 auto;
  position: relative;
 }
 img{width: 300px;height: 400px;}
 ul{
  margin: 0;padding: 0;
  position: absolute;
  right: -60px;
  top: 0;
 }
 li{
  border: 1px solid black;
  width: 50px;
  height: 40px;
  margin-bottom: 5px;
  list-style-type: none;
 }
 .active{
  background: orange;
 }
 p,span{
  width: 300px;
  height: 40px;
  font-size: 20px;
  font-family: "微软雅黑";
  color: white;
  text-align: center;
  line-height: 40px;
  position: absolute;
  margin: 0;
  background: #000;
 　　filter:alpha(opacity=70);
  -moz-opacity:0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;
 }
 span{
  top:0;
  left: 0;
 }
 p{
  bottom: 0;
 }
</style>
<script>
window.onload = function(){
 var oP = document.getElementsByTagName(‘p‘)[0];　　//getElementsByTagName获得到的元素必须加上索引，不然没效果
 var oSpan = document.getElementsByTagName(‘span‘)[0];
 var oUl = document.getElementsByTagName(‘ul‘)[0];
 var aLi = document.getElementsByTagName(‘li‘);
 var oImg = document.getElementsByTagName(‘img‘)[0];
 
 var aText = [‘美女1‘,‘美女2‘,‘美女3‘,‘美女4‘];
 var aUrl = [‘01.JPG‘,‘02.JPG‘,‘03.JPG‘,‘04.JPG‘];
 //初始化
 var num = 0;
 oP.innerHTML = 1+num+‘/‘+aText.length;
 oImg.src = aUrl[num];
 oSpan.innerHTML = aText[num];
 for(var i=0;i<aText.length;i++){
  aLi[i].index = i;　　//i放在此次，不能放在下面的function
  aLi[i].onclick = function(){
   oImg.src = aUrl[this.index];
   oP.innerHTML = this.index+‘/‘+aText.length;
   oSpan.innerHTML = aUrl[this.index];
   for(var i=0;i<aText.length;i++){　　　　//清空样式
    aLi[i].className = ‘‘;
   }
   this.className = ‘active‘;　　　　//添加样式
  }

}
}
</script>
</head>
 
<body>
    <div>
     <img />
     <span></span>
     <p></p>
     <ul>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
     </ul>
    </div>
</body>
</html>

简化的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body{
 background: gray;
}
 div{
  width: 300px;height: 400px;
  margin: 0 auto;
  position: relative;
 }
 img{width: 300px;height: 400px;}
 ul{
  margin: 0;padding: 0;
  position: absolute;
  right: -60px;
  top: 0;
 }
 li{
  border: 1px solid black;
  width: 50px;
  height: 40px;
  margin-bottom: 5px;
  list-style-type: none;
 }
 .active{
  background: orange;
 }
 p,span{
  width: 300px;
  height: 40px;
  font-size: 20px;
  font-family: "微软雅黑";
  color: white;
  text-align: center;
  line-height: 40px;
  position: absolute;
  margin: 0;
  background: #000;
 　　filter:alpha(opacity=70);
  -moz-opacity:0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;
 }
 span{
  top:0;
  left: 0;
 }
 p{
  bottom: 0;
 }
</style>
<script>
window.onload = function(){
 var oP = document.getElementsByTagName(‘p‘)[0];
 var oSpan = document.getElementsByTagName(‘span‘)[0];
 var oUl = document.getElementsByTagName(‘ul‘)[0];
 var aLi = document.getElementsByTagName(‘li‘);
 var oImg = document.getElementsByTagName(‘img‘)[0];
 
 var aText = [‘美女1‘,‘美女2‘,‘美女3‘,‘美女4‘];
 var aUrl = [‘01.JPG‘,‘02.JPG‘,‘03.JPG‘,‘04.JPG‘];
 //初始化
 var num = 0;
 function fInit(){
  oP.innerHTML = 1+num+‘/‘+aText.length;
  oImg.src = aUrl[num];
  oSpan.innerHTML = aText[num];
  for(var i=0;i<aText.length;i++){
   aLi[i].className = ‘‘;
  }
 }
 fInit()
 for(var i=0;i<aText.length;i++){
  aLi[i].index = i;
  aLi[i].style.cursor = ‘pointer‘;
  aLi[i].onmouseover = function(){
   num = this.index; 　　　　//num放在此次
   fInit();
   this.className = ‘active‘;
  }
 }
}
</script>
</head>
 
<body>
    <div>
     <img />
     <span></span>
     <p></p>
     <ul>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
     </ul>
    </div>
</body>
</html>

时间： 2024-12-30 03:06:42

用JS写一个简单的轮播器的相关文章

使用jQuery写一个简单的轮播图

html代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>轮播图练习</title> <link rel="stylesheet" href="css/css.css" type="text/css"/></head>

Jquery教你写一个简单的轮播.

这个我表示写的不咋地-_-//,但是胜在简单,可优化性不错. 实际上我本来想写个复杂点的结构的,但是最近忙成狗了!!!!所以大家就讲究着看吧 HTML结构 <div class="banner clearfix"> <ul> <li><img src="images/slide/1.png" /></li> <li><img src="images/slide/2.png&quo

分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~) ----------------------------------------------------------------分界线------------------------------

[NodeJS]使用Node.js写一个简单的在线聊天室

声明:教程来自<Node即学即用>.源代码案例均出自此书.博文仅为个人学习笔记. 第一步:创建一个聊天server. 首先,我们先来写一个Server: var net = require('net') var chatServer = net.createServer() chatServer.on('connection',function(client){ client.write('connection~~~\n') client.end() }) chatServer.listen(

自己写的简单的轮播图

代码部分: <!DOCTYPE html> <html> <head> <style type="text/css"> *{margin:0px; padding:0px;} .flash{width:100%; height:400px; overflow:hidden; position:relative;color:#fff;} .flash ul.con li{list-style-type:none;width:100%; he

用JS写一个简单的程序,算出１００中７的倍数的最大值

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> //方法一: var max=1; for(var i=1;i<=100;i++){ if(i%

用JS 写一个简单的程序，切换七彩盒子背景

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .stage{ width: 210px; height: 250px; margin: 50px auto; } #box{ margin-top: 20px; width: 210px; heig

JS写一个简单的程序，输入两个整数，打印这两个数的和，差，积，余数

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="test"  id="n1" value="" /> <input type="test"  id=&

node.js 实现一个简单的登录拦截器

拦截器在web开发中随处可见,比如站点的管理后台,不说所有人都能进入,所以就需要做一个拦截器并友好的跳转到提示页. 下面我们简单实现一种,判断用户是否登录成功,登录不成功的用户自动重定向到登录页面. 首先我们实现一个过滤器 exports.checkAuth=function(req, res, next) {     var token = req.signedCookies.token;     if (token && req.session.user && req.