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

随机推荐

Qt入门（5）——用Qt控件创建一个电话本界面
具体实现步骤: 一.首先用 Qt Designer 创建一个两张图的对话框,分别保存为listdialog.ui和editdialog.ui文件要注意其中各个空间对应的名称修改好二.新建一个Qt应 ...
将vs2012建的项目转换为vs2010项目
vs2012建的项目vs2010打不开,但vs2010的项目vs2012能打开,所以我觉得vs2012没有对解决方案进行重大的调整,尝试修改了一下.sln文件,使用vs2010就能打开了,方法如下: ...
Java_XML操作
xml的写: code: import java.io.File; import java.io.StringWriter; import javax.xml.parsers.DocumentBuil ...
hibernate 一对多操作（级联操作）
一对多级联操作 1. 级联保存复杂写法 Company company = new Company(); company.setcName("Hello"); company. ...
iOS UITableView 修改滚动条颜色默认选中第一条
//隐藏 self.tableView.showsVerticalScrollIndicator = NO; //修改颜色 self.tableView.indicatorStyle=UIScroll ...
带有中文的url和NSString中文的转换
NSString *url = @"http://tw.news.yahoo.com/麵包魂東京吸睛-粉絲包圍導演-061222049.html"; NSLog(@"ur ...
【爬虫问题】爬取tv.sohu.com的页面, 提取视频相关信息
尝试解决下面的问题问题: 爬取tv.sohu.com的页面, 提取视频相关信息,不可用爬虫框架完成何为视频i关信息?属性有哪些? 需求: 做到最大可能的页面覆盖率 *使用httpClient 模拟 ...
DB2 错误编码查询（一）（转）
size=medium][/size]本节列示 SQLSTATE 及其含义.SQLSTATE 是按类代码进行分组的:对于子代码,请参阅相应的表. 表 2. SQLSTATE 类代码类代码含义要获得 ...
iOS 捕获系统外异常
iOS 捕获系统外异常太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议转载请保留此句:太 ...
命令行修改linux系统IP
修改配置文件/etc/sysconfig/network-scrips/ifcfg-eth0.因为机子启动的时候加载的就是这个文件的配置参数.对这个文件进行修改: [root@localhost ...

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

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

随机推荐

热门专题