<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. nunjucks.js模板渲染

    直接用 script 引入文件: <script src="nunjucks.js"></script> 是使用 render 来直接渲染文件,这种方式支持 ...

  2. mysql数据库设计

    2.MySQL之选择字段数据类型 1.http://blog.itpub.net/29660208/viewspace-1208352/ 3.http://www.cnblogs.com/HondaH ...

  3. FineUI中Newtonsoft.Json版本报错解决办法

    1.清空bin下的Newtonsoft.Json.dll 2.使用Nuget安装最新版本的Newtonsoft.Json.dll,安装脚本为 Install-Package Newtonsoft.Js ...

  4. Docker之Web-UI

    DockerUI 不支持多主机Command: docker run -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock dock ...

  5. Squid

    事件:由于我们在运维过程中需要升级或安装新的开源软件或组件时,相关的依赖包或基础包非常非常多. 因安全限制,对于没有访问internet权限的服务器,在执行安装或升级过程中就非常容易出错. 所以我们需 ...

  6. loose coupling之函数签名

    当函数的参数有多个时(比如多于4个),可以考虑将这些参数组织放入一个class(struct),然后函数参数就减少为一个. 1.以class instance来穿参数,可以很容易在各个函数之间传递参数 ...

  7. Android 扫一扫----ZXing 的使用

    1. 首先现在ZXing的lib 2. 在Android Studio集成ZXing. public void scan(View view){ startActivityForResult(new ...

  8. C#特性学习笔记一

    元数据,就是C#中封装的一些类,无法修改.类成员的特性被称为元数据中的注释. 1.什么是特性   1)属性与特性的区别 属性(Property):属性是面向对象思想里所说的封装在类里面的数据字段,Ge ...

  9. IOS开发-本地通知

    // 注册 发送通知的方法 -(void)pushNotfation{ //--------------初始化本地通知 alloc init 虽然是UI控件 但继承NSObject UILocalNo ...

  10. winform基本控件----按钮

    这次来引用一个我们上课时候老师给的一个实验内容,来说一下winform程序设计中的按钮控件的使用.下面是我们老师给的实验内容. 实验目的: 掌握Winform的开发环境. 掌握窗体的创建和基本方法. ...