<style type="text/css">

#datu

{

    width:500px;

    height:400px;

    position:relative;

     margin:auto;

    top:100px;

    border:2px solid #309;

    overflow:hidden;

}

#xiao

{

    width:50px;

    height:100px;

    position:absolute;

    left:0px;

    top:200px;

    z-index:;

     text-align:center; line-height:100px; font-size:100px;

      cursor:pointer;

}

#xiao1

{

    width:50px;

    height:100px;

    position:absolute;

    right:0px;

    top:200px;

        z-index:;

 text-align:center; line-height:100px; font-size:100px;

 cursor:pointer;

}

#ta

{

    position:relative;

    left:0px;

    top:0px;

    transition:0.7s;}

</style>

<body>

<div id="datu" onmouseover="Zhi()" onmouseout="Li()" onclick="Chang()">

    <table id="ta" cellpadding="0" cellspacing="0">

        <tr height="400">

            <td width="500px"><img src="../Documents/未命名站点 2/1.jpg" width="500" /></td>

            <td><img src="../Documents/未命名站点 2/2.jpg"  height="400" width="500"/></td>

            <td><img src="../Documents/未命名站点 2/3.jpg" height="400" width="500"/></td>

            <td><img src="../Documents/未命名站点 2/5.jpg"  height="400"  width="500"/></td>

            <td><img src="../Documents/未命名站点 2/800.jpg" height="400" width="500"/></td>

            <div id="xiao" onclick="zuo()">«</div>

            <div id="xiao1" onclick="you()">»</div>

        </tr>

    </table>

</div>

</body>

</html>

<script>

document.getElementById("ta").style.left="0px";

function Change()

{

    var ta = parseInt(document.getElementById("ta").style.left);

    if(ta>-2000)

    {

        document.getElementById("ta").style.left=(ta-500)+"px";

        ta=ta-500;

    }

    else

    {

        document.getElementById("ta").style.left="0px";

    }

    shi=window.setTimeout("Change()",3000);

}

var shi =window.setTimeout("Change()",3000);

function Zhi()

{

    window.clearTimeout(shi);

}

function Li()

{

    shi=window.setTimeout("Change()",1000);

}

function zuo()

{

    var ta = parseInt(document.getElementById("ta").style.left);

    if(ta<0)

    {

        document.getElementById("ta").style.left=(ta+500)+"px";

        ta=ta+500;

    }

    else

    {

        document.getElementById("ta").style.left="-2000px";

    }

}

function you()

{

    var ta = parseInt(document.getElementById("ta").style.left);

    if(ta>-2000)

    {

        document.getElementById("ta").style.left=(ta-500)+"px";

        ta=ta-500;

    }

    else

    {

        document.getElementById("ta").style.left="0px";

    }

}

</script>

运用CSS和JS写的大图轮播-带箭头的更多相关文章

  1. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  2. js写的简单轮播图

    这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...

  3. 用JS写的简单轮播特效

    效果如下 功能分析 1.每隔1秒换一张图片 2.鼠标移入停止切换.鼠标离开继续切换 3.鼠标移入到数字上面的时候,显示和数字对应的图片,并且停止切换,被选中的数字,背景显示橙色 4.鼠标离开数字,从该 ...

  4. 利用JS做网页特效——大图轮播

    大图轮播完整流程代码操作: <style>            * {                margin: 0px;                padding: 0px;  ...

  5. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  6. [DBW]大图轮播，可通过两种方法实现

    通过在div中加入表格,实现大图轮播,代码如下: 整体的思路: 1.在div中嵌入表格,设置div的宽和高,设置成图片大小,确定其位置,将图片插入表格,超出div部分隐藏 2.在js中定义一个变量接受 ...

  7. JS框架_(Bootstrap.js)实现简单的轮播图

    Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...

  8. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  9. bootstrap大图轮播手机端不能手指滑动解决办法

    网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上 ...

随机推荐

  1. // 开始无限播放 ViewPager

    public class MainActivity extends Activity { private ViewPager vp;    private Handler handler = new ...

  2. checkbox提交多组数据到action

    突然想通过checkbox来提交多组数据到action,一时间想不起来怎么写,到网上流岚大婶们的笔迹之后,有了新发现! 方法一: 在action用一个String类型的变量来接受checkbox传过来 ...

  3. （转）深度学习主机环境配置: Ubuntu16.04+Nvidia GTX 1080+CUDA8.0

      深度学习主机环境配置: Ubuntu16.04+Nvidia GTX 1080+CUDA8.0 发表于2016年07月15号由52nlp 接上文<深度学习主机攒机小记>,这台GTX10 ...

  4. The Run-Time Constant Pool The Constant Pool

    http://docs.oracle.com/javase/specs/jvms/se7/html/jvms-4.html#jvms-4.4 http://docs.oracle.com/javase ...

  5. asp.net Routing 用法

    http://www.cnblogs.com/youring2/archive/2011/07/22/2113595.html asp.net 4.0中提供了Routing 的支持.通过使用routi ...

  6. supersocket+controller+action

    public class MasterServer : SuperSocket.SocketBase.AppServer<MasterSession> { } public class M ...

  7. 打印心形---print 的基础使用

    #!/bin/usr/env python#coding=utf-8'''用学习到的print语句,完成如下图形的打印工作打印心形'''print " *** *** "print ...

  8. <<敏捷开发>>读书笔记

    1.走进敏捷 * 组织成功 增加业务专家,较少bug和测试的交流成本,即使取消不好的技术 首先发布最有价值的特性,时常发布新的版本,即使改进软件 * 技术成功 结对编程,代码审核,确保同一份代码有不同 ...

  9. ORA-12154: TNS:could not resolve the connect identifier specified

    场景: .Net程序无法连接到数据库 现象: 2015/8/26 11:02:03 ORA-12154: TNS:could not resolve the connect identifier sp ...

  10. C Primer Plus(第五版)12

    第 12 章 存储类, 链接和内存管理 在本章中你将学习下列内容 . 关键字: auto, extern, static, register, const, volatile, restricted. ...