怎么用js和css写一个幻灯片

1.用js制作个最为简单的幻灯片思路,初学者,步骤加代码,详细点,谢谢div+css你至少得会吧?
首先定义一个轮播器大盒子 。设置overflow为hidden 。设置其宽度,高度、position设置为相对
再在里面套一个图片盒子,里面加多个img标签 。float设置为left 。每张照片的大小就是轮播器的大小 。那么在轮播器范围内的img'就会显示出来 。其他的img就因为上面设置的overflow属性而被隐藏了 。position设置为绝对定位 。
js代码方面你在窗口window.onload=function(){
写上一个定时器
设置定时器执行的方法,就是每隔多少秒就把图片盒子里的left属性设置为轮播器大小的--、基本的就出来了 。
其他的代码bug自己完善 。
}
你提问前问题因为更具体点 。代码自己百度,思路给你说了,要是你还要代码只能说明至少你现在不适合干程序设计 。自己不敲代码,光想百度复制粘贴运行没多大用
2.html中使用jQuery和css,js的方法简单说下:
css:
1、css有行内样式、内联样式、外联样式 。当然你还要学会选择器的语法和作用
1.1、行内样式:就是在标签中定义,如<div style="width:300px; height:300px;"></div>
1.2、内联样式:就是在<style type="text/css"></style>;中定义,如:
<head>
<style type="text/css">
div{width:300px;}
</style>
</head>
<div></div>
1.3、外联样式:就是引入外部样式文件,如:
<head>
<link rel="stylesheet" type="text/css" href="http://www.xuexi88.com/zhishi/css/xxx.css" />
</head>
2、js:前提是会js语法
2.1、使用js:
2.1.1、定义:
html文件定义:
<script type="text/javascript">
//js代码
function help(){
//js代码
}
</script>
或者
引入外部js文件:
<script type="text/javascript" src="http://www.xuexi88.com/zhishi/xxx/xxx.js"></script>
2.1.2、使用:<input type="button" value="http://www.xuexi88.com/zhishi/help" onclick="help()"/>
3、jquery使用:
<script type="text/javascript" src="http://www.xuexi88.com/zhishi/jquery.min.js"></script>
以上都需要你学会对css使用,js语法及使用,jquery方法使用有一定了解
建议你看>
<html>
<head>
<style>
img {
display: none;
width: 100px;
height: 100px;
}
input:checked + img {
display: block;
}
input {
position: absolute;
left: -9999px;
}
label {
cursor: pointer;
}
</style>
</head>
<body>
<div id="cont">
<input id="img1" name="img" type="radio" checked="checked">
<img src="http://www.xuexi88.com/zhishi/a.png">
<input id="img2" name="img" type="radio">
<img src="http://www.xuexi88.com/zhishi/b.png">
</div>
<div id="nav">
<label for="img1">;第一张</label>
<label for="img2">;第二张</label>
</div>
</body>
【怎么用js和css写一个幻灯片】</html>;可以这样写,但是不能支持所有浏览器 。
如果想支持所有浏览器,就需要使用js了 。

怎么用js和css写一个幻灯片

文章插图