用js 做大图轮播方法（一）
//html部分
<div id="wrap">
<div id="slider">
<a target="_blank" href="#"><img class="tu" src="../img/tu1.jpg" /></a>
<a target="_blank" href="#"><img id="second" /></a>
<a target="_blank" href="#"><img id="third" /></a>
<a target="_blank" href="#"><img id="four" /></a>
</div>
<ul id="ui">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
//css 部分
<style type="text/css">
#wrap
{
height: 500px;
width: 500px;
overflow: hidden;
position: relative;
overflow: hidden;
}
#wrap ul
{
list-style: none;
position: absolute;
top: 455px;
left: 332px; }
#wrap li
{
margin-left:2px;
opacity:0 .3;
filter: alpha(opacity=30);
text-align: center;
line-height: 30px;
font-size: 20px;
height: 30px;
width: 30px;
background-color: #fff;
float: left;
border-radius:3px;
cursor:pointer;
}
#slider
{
position: absolute;
top: 0px;
left: 0px;
}
#slider img
{
float: left;
border: none;
}
.tu{
height: 500px;
width: 500px;
}
#ui{
z-index:;
}
//js 部分
<script type="text/javascript">
window.onload = function () {
flag = 0;
obj1 = document.getElementById("slider");
obj2 = document.getElementsByTagName("li");
obj2[0].style.backgroundColor = "#666666";
//默认被选中颜色
time = setInterval("turn();", 2000);
obj1.onmouseover = function () {
clearInterval(time);
}
obj1.onmouseout = function () {
time = setInterval("turn();", 2000);
} for (var num = 0; num < obj2.length; num++) {
obj2[num].onmouseover = function () {
turn(this.innerHTML);
clearInterval(time);
}
obj2[num].onmouseout = function () {
time = setInterval("turn();", 2000);
}
}
//延迟加载图片，演示的时候，使用本地图片
//上线后请改为二级域名提供的图片地址
document.getElementById("second").src = "../img/tu2.jpg";
document.getElementById("second").width ="500";
document.getElementById("second").height ="500"; //使用图片宽660，高550
document.getElementById("third").src = "../img/tu3.jpg";
document.getElementById("third").width ="500";
document.getElementById("third").height ="500";
document.getElementById("four").src = "../img/tu4.jpg";
document.getElementById("four").width ="500";
document.getElementById("four").height ="500";
}
function turn(value) {
if (value != null) {
flag = value - 2;
}
if (flag < obj2.length - 1)
flag++;
else
flag = 0;
obj1.style.top = flag * (-500) + "px";
for (var j = 0; j < obj2.length; j++) {
obj2[j].style.backgroundColor = "#ffffff";
}
obj2[flag].style.backgroundColor = "#666666";
}
</script>
//源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS幻灯代码</title>
<script type="text/javascript">
window.onload = function () {
flag = 0;
obj1 = document.getElementById("slider");
obj2 = document.getElementsByTagName("li");
obj2[0].style.backgroundColor = "#666666";
//默认被选中颜色
time = setInterval("turn();", 2000);
obj1.onmouseover = function () {
clearInterval(time);
}
obj1.onmouseout = function () {
time = setInterval("turn();", 2000);
} for (var num = 0; num < obj2.length; num++) {
obj2[num].onmouseover = function () {
turn(this.innerHTML);
clearInterval(time);
}
obj2[num].onmouseout = function () {
time = setInterval("turn();", 2000);
}
}
//延迟加载图片，演示的时候，使用本地图片
//上线后请改为二级域名提供的图片地址
document.getElementById("second").src = "../img/tu2.jpg";
document.getElementById("second").width ="500";
document.getElementById("second").height ="500"; //使用图片宽660，高550
document.getElementById("third").src = "../img/tu3.jpg";
document.getElementById("third").width ="500";
document.getElementById("third").height ="500";
document.getElementById("four").src = "../img/tu4.jpg";
document.getElementById("four").width ="500";
document.getElementById("four").height ="500";
}
function turn(value) {
if (value != null) {
flag = value - 2;
}
if (flag < obj2.length - 1)
flag++;
else
flag = 0;
obj1.style.top = flag * (-500) + "px";
for (var j = 0; j < obj2.length; j++) {
obj2[j].style.backgroundColor = "#ffffff";
}
obj2[flag].style.backgroundColor = "#666666";
}
</script>
<style type="text/css">
#wrap
{
height: 500px;
width: 500px;
overflow: hidden;
position: relative;
overflow: hidden;
}
#wrap ul
{
list-style: none;
position: absolute;
top: 455px;
left: 332px; }
#wrap li
{
margin-left:2px;
opacity:0 .3;
filter: alpha(opacity=30);
text-align: center;
line-height: 30px;
font-size: 20px;
height: 30px;
width: 30px;
background-color: #fff;
float: left;
border-radius:3px;
cursor:pointer;
}
#slider
{
position: absolute;
top: 0px;
left: 0px;
}
#slider img
{
float: left;
border: none;
}
.tu{
height: 500px;
width: 500px;
}
#ui{
z-index: 999;
} </style>
</head>
<body>
<div id="wrap">
<div id="slider">
<a target="_blank" href="#"><img class="tu" src="../img/tu1.jpg" /></a>
<a target="_blank" href="#"><img id="second" /></a>
<a target="_blank" href="#"><img id="third" /></a>
<a target="_blank" href="#"><img id="four" /></a>
</div>
<ul id="ui">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
// 效果预览
用js 做大图轮播方法（一）的更多相关文章
- 用JS做图片轮播
脚本之家 首页应用手游攻略教程 ﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效 js 图片轮播(5张图片) 作者:m ...
- js做的轮播图
以下那些注释呢,都是要靠自己理解才是最重要的, <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- 利用JS做网页特效——大图轮播
大图轮播完整流程代码操作: <style> * { margin: 0px; padding: 0px; ...
- [DBW]大图轮播，可通过两种方法实现
通过在div中加入表格,实现大图轮播,代码如下: 整体的思路: 1.在div中嵌入表格,设置div的宽和高,设置成图片大小,确定其位置,将图片插入表格,超出div部分隐藏 2.在js中定义一个变量接受 ...
- 纯原生JS大图轮播
CSS部分: CSS: <style type="text/css"> #banner { position: relative; width: 500px; heig ...
- CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- 原生js实现无缝轮播
原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...
- bootstrap大图轮播手机端不能手指滑动解决办法
网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上 ...
随机推荐
- 一道面试题与Java位操作 和 BitSet 库的使用
前一段时间在网上看到这样一道面试题: 有个老的手机短信程序,由于当时的手机CPU,内存都很烂.所以这个短信程序只能记住256条短信,多了就删了. 每个短信有个唯一的ID,在0到255之间.当然用户可能 ...
- Missing Ranges 解答
Question Given a sorted integer array where the range of elements are in the inclusive range [lower, ...
- HDU4432 Sum of Divisors
涉及知识点: 1. 进制转换. 2. 找因子时注意可以降低复杂度. Sum of divisors Time Limit: 2000/1000 MS (Java/Others) Memory L ...
- [每日一题] 11gOCP 1z0-053 :2013-09-30 ASMCMD.......................................................8
转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/12206095 正确答案:BCD 为了使ASM文件管理更简单,Oracle提供了一个命令实用 ...
- Beanstalkd介绍
特征 优先级:任务 (job) 可以有 0~2^32 个优先级, 0 代表最高优先级,beanstalkd 采用最大最小堆 (Min-max heap) 处理任务优先级排序, 任何时刻调用 reser ...
- (转)20 个大大节省你时间的 HTML5 开发工具
Rendera 如果你希望有个环境可以测试.浏览和体验各种不同的 CSS/HTML 和 JavaScript 代码,Rendera 为你提供了实时的运行结果.类似 RunJS. Patternizer ...
- JS~模拟表单在新窗口打开,避免广告拦截
说起广告拦截,这应该是浏览器的一个特性,它会将window.open产生的窗口默认为一个广告,将它进行拦截,但有时,这不是我们所希望的,有时,我们就是需要它在客户端的浏览器上弹出一个新窗口,以展示数据 ...
- javascript--瀑布流
简单瀑布流代码实现 html代码例如以下 <!DOCTYPE html> <html> <head> <meta http-equiv="Conte ...
- 重学《C#高级编程》（继承）
前两天重新看了<C#高级编程>里的第四章:继承与第六章:数组.OOP三大特性:封装,继承,多态,个人感觉继承是实现多态的基础,包括以后接触的设计模式,都是继承特性的衍生. 继承特性有两种, ...
- 网站项目后台的目录命名为admin后，网页莫名其妙的变样了
这是我的第一篇博客文章,与其说是分享经验,倒不如说是求助 最近因为要完成一个课程设计,在拿一个现成的项目过来改,要用到select下拉菜单,可是发觉怎么我的这个下拉菜单怎么变样了 刚开始它是这样的 感 ...