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="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="xxx/xxx.js"></script>
2.1.2、使用:<input type="button" value="help" onclick="help()"/>
3、jquery使用:
<script type="text/javascript" src="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="a.png">
<input id="img2" name="img" type="radio">
<img src="b.png">
</div>
<div id="nav">
<label for="img1">;第一张</label>
<label for="img2">;第二张</label>
</div>
</body>
</html>;可以这样写,但是不能支持所有浏览器。
如果想支持所有浏览器,就需要使用js了。
转载请注明出处育才学习网 » 怎么用js和css写一个幻灯片