分享一个手动控制图片左右滚动的代码

先说html部分，建立一个层，写出他的样式，层中在建立一个小一点的层用来存放需要滚动的图片，小层两边再建两个小层用来存放控制图片左右滚动的按钮。代码如下：

样式表：

<style>

.a

{ width:1100px; height:215px; position:absolute; top:280px; left:9%;  overflow:hidden; border-radius:10px}

.a1

{ width:2640px; height:165px; position:absolute; top:25px;background:#666; transition:1s }

.i1

{ width:35px; height:60px; position:absolute; top:77.5px; left:25px;}

.i2

{ width:35px; height:60px; position:absolute; top:77.5px; right:25px;}

</style>

Body部分;

<body>

<div class="a">

<div id="yidong" class="a1" style="background:url(../web/picture/ts/35.jpg); left:0px;"></div>

<div class="i1"><img src="../web/picture/ts/37.png" width="35" style="opacity:0.3" onclick="zuoyi()"/></div>

<div class="i2"><img src="../web/picture/ts/36.png" width="35" style="opacity:0.3" onclick="youyi()"/></div>

</div>

</body>

最后我们写他的javascri部分：

<script>

var nb=7

function zuoyi()

{

var arr=new Array()

arr[0]="-1540px"

arr[1]="-1320px"

arr[2]="-1100px"

arr[3]="-880px"

arr[4]="-660px"

arr[5]="-440px"

arr[6]="-220px"

arr[7]="0px"

var left=document.getElementById("yidong")

nb--

if(nb>=0)

{

left.style.left=arr[nb]

}

else

{

nb=7

left.style.left=arr[nb]

}

}

function youyi()

{

var arr=new Array()

arr[0]="-1540px"

arr[1]="-1320px"

arr[2]="-1100px"

arr[3]="-880px"

arr[4]="-660px"

arr[5]="-440px"

arr[6]="-220px"

arr[7]="0px"

var right=document.getElementById("yidong")

nb++

if(nb<=7)

{

right.style.left=arr[nb]

}

else

{

nb=0

right.style.left=arr[nb]

}

}

</script>

好啦，完活，小伙伴们可以去尝试一下了。

html图片滚动效果的更多相关文章

  1. 使用JQuery.slideBox实现图片滚动效果

    1.下载JQuery.slideBox和jquery插件,并引用 <link href="css/jquery.slideBox.css" rel="stylesh ...

  2. jquery实现多行文字图片滚动效果

    今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function ...

  3. 点滴积累【JS】---JS小功能(offsetLeft实现图片滚动效果）

    效果: 代码: <head runat="server"> <title></title> <style type="text/ ...

  4. jQuery+CSS实现的图片滚动效果

    http://www.helloweba.com/view-blog-139.html

  5. Expression Blend4经验分享：文字公告无缝循环滚动效果

    这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...

  6. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  7. JQuery图片轮播滚动效果(网页效果--每日一更)

    今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...

  8. 向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

随机推荐

  1. linux 性能分析常规逻辑和手段总结

    一. 追查cpu占用较高的进程(线程)  1 . 如何查找出当前系统中占用cpu或者内存最高的进程? ps aux |sort -rn -k 3 |head -n3 查找出当前系统中cpu资源占用前三 ...

  2. nginx 配置的server_name参数(转)

    转自:http://www.sklinux.com/373 nginx中的server_name指令主要用于配置基于名称虚拟主机. 一 匹配顺序,server_name指令在接到请求后的匹配顺序如下: ...

  3. [jobdu]孩子们的游戏(圆圈中最后剩下的数)

    这道题就是典型的约瑟夫环问题.http://blog.csdn.net/wuzhekai1985/article/details/6628491 一开始想了一下用数组来做,就是模拟方法,同时记录一下是 ...

  4. USB Type-C，接口上的大统一？

    这款 24-pin 连接器的机械设计反应了设计人员从 Micro-B 连接器上获得的历史教训,它无需确定插入的正反方向并可实现 10000 次的插拔.使用者再也不需要担心“哪头上,哪头下”,因为 US ...

  5. Django单元测试(二)------测试工具

    The test client test client是一个python类,来模拟一个简单的“哑”浏览器,允许你来测试你的view函数.你可以使用test client完成下列事情: 1.模拟&quo ...

  6. Drawable(1)各种Drawable Resource介绍

    简介 Drawable Resources(可绘资源) 是一系列可以在屏幕上被绘制的资源文件,它不只是图片,可以是 xml文件,在xml文件中配置各种绘制参数. 常见Drawable Resource ...

  7. 关于捕获键盘信息的processDialogkey方法

    在一些控件里的keydown方法,没有办法捕获所有的按键消息 比如自己写一个窗体控件库,继承了UserControl 但是没有办法捕获一些键,比如方向键等 所以必须重载 processDialogke ...

  8. TortoiseSVN设置比较工具为BeyondCompare

    1.  "C:\Beyond Compare 4\BCompare.exe" %base %mine /title1=%bname /title2=%yname /leftread ...

  9. 我的第一个Spring程序

    1.程序结构 2.各个文件 ByeService.java package com.service; public class ByeService { private String name; pu ...

  10. Apache虚拟主机(vhost)配置教程

    使用apache来配置虚拟主机,在单一系统上运行多个网站. 现在很多linux主机使用apache作为web服务器的,大部分是基于这个原理来配置虚拟主机的. 下面就windows下以apache 2. ...