<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. LeetCode 【47. Permutations II】

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...

  2. [翻译] WCF运行时架构

    原文地址 http://www.cnblogs.com/idior/articles/971252.html 介绍 WCF具有非常易用的编程模型,服务开发者在掌握ABC的概念后可以很容易的使用WCF去 ...

  3. [linux] FastDFS访问文件，400 Bad Request

    linux 安装nginx,FastDFS后,启动访问指定文件出错, 文件名称格式化错误. 解决办法: vi /etc/fdfs/mod_fastdfs.conf 将 url_have_group_n ...

  4. php开发api接口

    做过 API 的人应该了解,其实开发 API 比开发 WEB 更简洁,但可能逻辑更复杂,因为 API 其实就是数据输出,不用呈现页面,所以也就不存在 MVC(API 只有 M 和 C),那么我们来探讨 ...

  5. Symfony2创建基于域名的路由(原创翻译)

    你可以匹配将要来到的请求以HTTP域名的方式 YAML方式 mobile_homepage: path: / host: m.example.com defaults: { _controller: ...

  6. OpenGL 学习

    一.红宝书学习资料汇集 第八版的图书源码 源代码: http://opengl-redbook.com/Code/oglpg-8th-edition.zip 第九版的图书源码 http://www.o ...

  7. datatable list 之前相互转换

    使用 FastMember: IEnumerable<SomeType> data = ... DataTable table = new DataTable(); using(var r ...

  8. 1.注册或登录页面设计：UILabel，UIButton,UITextField

    学习iOS开发已经有一段时日了,之前一直没有系统的对iOS开发的相关知识进行归纳总结,导致很多知识点云里雾里在脑子里形不成iOS开发的思想,现将自己在学习过程中遇到的一些知识进行总结,希望能对iOS初 ...

  9. XE6移动开发环境搭建之IOS篇（8）：在Mac OSX 10.8中安装XE6的PAServer（有图有真相）

    网上能找到的关于Delphi XE系列的移动开发环境的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 安装PAServer ...

  10. .net一次连接执行多条sql语句

    方法一: string SQLString="select 1; select 2;"; using (OdbcConnection connection = new OdbcCo ...