<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. [hdu 2686]Matrix

    网上说这道题的题解是费用流 我粗粗看了一下数据范围,觉得出题者似乎是让我们用 “大(d)屁(p)” 的样子,为了尊重出题人,我还是写一写吧喵~ 首先,一条回路可以看做是两条路齐头并进,这是 大屁 和 ...

  2. JAVA 对象引用，以及对象赋值

    注:引自http://zwmf.iteye.com/blog/1738574 关键字: java对象 引用 Java对象及其引用 关于对象与引用之间的一些基本概念. 初学Java时,在很长一段时间里, ...

  3. ES(一): 架构及原理

    Elasticsearch 是一个兼有搜索引擎和NoSQL数据库功能的开源系统,基于Java/Lucene构建,可以用于全文搜索,结构化搜索以及近实时分析.可以说Lucene是当今最先进,最高效的全功 ...

  4. Mybatis知识点总结

    ---恢复内容开始--- Mybatis知识点总结 1.#{}和${}的区别是什么? 答:#{}的使用场景:在表的sql映射文件中如下使用: <mapper namespace="co ...

  5. Hadoop学习11--Ha集群配置启动

    理论知识: http://www.tuicool.com/articles/jameeqm 这篇文章讲的非常详细了: http://www.tuicool.com/articles/jameeqm 以 ...

  6. 约瑟夫环（Josehpuse）的模拟

    约瑟夫环问题: 0,1,...,n-1这n个数字排成一个圆圈,从数字0开始每次从这个圆圈里删除第m个数字,求出这个圆圈里剩下的最后一个数字. 这里给出以下几种解法, 1.用队列模拟 每次将前m-1个元 ...

  7. JVM参数（三）打印所有XX参数及值

    本篇文章基于Java 6(update 21oder 21之后)版本, HotSpot JVM 提供给了两个新的参数,在JVM启动后,在命令行中可以输出所有XX参数和值. -XX:+PrintFlag ...

  8. CentOS6.4 安装 erlang

    wget http://www.erlang.org/download/otp_src_17.0.tar.gz -P /usr/local/src/ wget http://www.erlang.or ...

  9. 66. Regular Expression Matching

    Regular Expression Matching Implement regular expression matching with support for '.' and '*'. '.' ...

  10. Django views 中的 shortcut function

    shortcut function都在django.shortcuts这个包中,主要包含有:render(), render_to_response(), redirect(), get_object ...