<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. ES TIPS

    1,Testing Analyzers Especially when you are new to Elasticsearch, it is sometimes difficult to under ...

  2. Pandas中DateFrame修改列名

    Pandas中DateFrame修改列名 在做数据挖掘的时候,想改一个DataFrame的column名称,所以就查了一下,总结如下: 数据如下: >>>import pandas ...

  3. HTML5外包

    北京动点飞扬软件 从事html5外包业务五年,是国内第一家以HTML5移动平台.手机平台项目外包业务为主的正规软件团队, 欢迎联系 QQ:372900288 电话:13911652504 我们现已发展 ...

  4. bzoj1513: [POI2006]Tet-Tetris 3D

    Description Task: Tetris 3D "Tetris" 游戏的作者决定做一个新的游戏, 一个三维的版本, 在里面很多立方体落在平面板,一个立方体开始落下直到碰上一 ...

  5. .Net 请求Web接口Post和Get方法

    #region web服务请求 get post static string DefaultUserAgent = "www.zhiweiworld.com"; public st ...

  6. 在windows上安装scikit-learn开发环境

    操作系统:Windows 10 64位 1.安装python 前往https://www.python.org/downloads/下载对应操作系统的版本,笔者下载了32位的python 2.7.13 ...

  7. 阿里 classloader

    http://blog.csdn.net/scythe666/article/details/51956047

  8. Codeforces 723d [暴力dfs]

    /* 不要低头,不要放弃,不要气馁,不要慌张. 题意: 给n,m和k,n和m为所给矩阵的高和宽.k是要求最多剩下的湖的数量. 在所给的矩阵中,*代表陆地,.代表水. 湖的定义是一片连续的水(上下左右四 ...

  9. [CF148E] Porcelain (分组背包)

    题目链接:http://codeforces.com/problemset/problem/148/E 题目大意:有n组数据,每次可以从任意一组的两端取出1个数,问你取m个数最大能组成多少? 思路:先 ...

  10. apache配置Options详解

    http://www.365mini.com/page/apache-options-directive.htm Options指令是Apache配置文件中一个比较常见也比较重要的指令,Options ...