用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 都不生效,也找不到原因是什么,目前在网上 ...

随机推荐

poj 3232 Accelerator
http://poj.org/problem?id=3232 题意:有一个含有n辆车的车队,当前距离终点的距离已知,有m个加速器,每个加速器在一个时刻只能给一辆车用,一旦使用就会使得其速度由1变成k, ...
手机低端市场，联发科 vs 高通
联发科(MTK) 是山寨机的源头,我过去曾经鄙视他,现在来了180度转弯. 其实联发科是台湾的上市公司,手机如此复杂的东西,当年联发科能把基础的手机做出来,而后小山寨厂改改外形,配件就能出若干款手机 ...
计算新浪Weibo消息长度
此文为计算新浪Weibo的消息长度的方法. 就是 (发言请遵守社区公约,还可以输入119字). var getMessageLength = (function() { var byteLength ...
City Tour
Description Alice想要从城市A出发到城市B,由于Alice最近比较穷(不像集训队陈兴老师是个rich second),所以只能选择做火车从A到B.不过Alice很讨厌坐火车,火车上人比 ...
《深度解析SDN》学习小结
SDN(软件定义网络),顾名思义,通过软件来控制或驱动整个网络.SDN的核心概念有两个,第一是转发面与控制面的分离:第二是开放的可编程接口.另外,SDN强调集中式控制,通过软件来控制整个网络,但这并不 ...
linux mysql默认安装在哪个目录
MySQL安装完成后不象SQL Server默认安装在一个目录,它的数据库文件.配置文件和命令文件分别在不同的目录,了解这些目录非常重要,尤其对于Linux的初学者,因为 Linux本身的目录结构就比 ...
Hibernate Validation使用示例及讲解
Hibernate Validation使用示例及讲解时间 -- :: ITeye-博客原文 http://wdmcygah.iteye.com/blog/2174680 主题 Java 在项目开 ...
go语言的安装和配置，以及包引用
1.下载和安装首先大家可以去官网下载 http://golang.org/dl/ 如果官网你看不懂的话,可以到这里下载: http://golangtc.com/download ,这里也提供了百度 ...
Oracle_Q&A_03
1.先导入SQL文件执行语句查看表信息 select * from student;--学生信息--(stunum,stuname,classid)select * from class;--班级信 ...
(转)OS X Mountain Lion 系统配置 Apache+Mysql+PHP 详细教程
如果你是一名 Web 开发者,很多时候都需要在本地搭建服务器测试环境,比如 Apache+Mysql+PHP 这样的环境.事实上 Mac OS X 中想要搭建这样的环境很简单,本文我们就会将详细的教程 ...

用js 做大图轮播方法（一）

用js 做大图轮播方法（一）的更多相关文章

随机推荐

热门专题