html图片滚动效果
分享一个手动控制图片左右滚动的代码
先说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图片滚动效果的更多相关文章
- 使用JQuery.slideBox实现图片滚动效果
1.下载JQuery.slideBox和jquery插件,并引用 <link href="css/jquery.slideBox.css" rel="stylesh ...
- jquery实现多行文字图片滚动效果
今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function ...
- 点滴积累【JS】---JS小功能(offsetLeft实现图片滚动效果）
效果: 代码: <head runat="server"> <title></title> <style type="text/ ...
- jQuery+CSS实现的图片滚动效果
http://www.helloweba.com/view-blog-139.html
- Expression Blend4经验分享：文字公告无缝循环滚动效果
这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- JQuery图片轮播滚动效果(网页效果--每日一更)
今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...
- 向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 基于html5页面滚动背景图片动画效果
基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="fullpage&q ...
随机推荐
- HDU 2844 Coins（多重背包）
点我看题目 题意 :Whuacmers有n种硬币,分别是面值为A1,A2,.....,An,每一种面值的硬币的数量分别是C1,C2,......,Cn,Whuacmers想买钱包,但是想给人家刚好的钱 ...
- PYTHON多进程样码
敲了一晚上,留个念想. 发现它和LINUX的C编程差不多,就是作了PYTHON化的语法封装. 以后希望有机会能用上.. A,多进程函数化实现 import multiprocessing import ...
- php邮件发送 phpmailer
首先要安装phpmailer开源项目. 将class.phpmailer.php转移到php文件夹下, 编写代码: <?php require("class.phpmailer.php ...
- memcached远程 telnet 无法连接，解决方案
因为默认的Memcached配置,使用了本机ip:127.0.0.1 ,此时利用VI修改下配置 vi /etc/memcached.conf 文件打开后,修改下,把-l前面加入#号注释掉,重启服务器就 ...
- ANDROID_MARS学习笔记_S01原始版_007_Handler及线程的简单使用
一.运行结果 一.代码1.xml(1)activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.c ...
- ArcGIS Engine生成等值线（C#）
原文:ArcGIS Engine生成等值线(C#) 本文介绍c#写的利用ArcGIS Engine生成等值线的方法.c#写的根据雨量站的降雨量值内插出降雨量等值线的功能.做几点说明:根据离散点生成等值 ...
- Android开发UI之布局文件LinearLayout
LinearLayout-线性布局,该布局中的控件按照水平方向排列或者竖直方向排列. 通过属性android:orientation=""决定的,可选值:vertical和hori ...
- BZOJ_[HNOI2008]_Cards_(置换+Burnside引理+乘法逆元+费马小定理+快速幂)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1004 共n个卡片,染成r,b,g三种颜色,每种颜色的个数有规定.给出一些置换,可以由置换得到的 ...
- [swustoj 764] 校门外的树 Plus Plus
校门外的树 Plus Plus(0764) 问题描述 西南某科技大学的校门外长度为 L 的公路上有一排树,每两棵相邻的树之间的间隔都是 1 米.我们可以把马路看成一个数轴,马路的一端在数轴 1 的位置 ...
- C#使用Word中的内置对话框实例
本文实例讲述了C#使用Word中的内置对话框的方法,分享给大家供大家参考.具体实现方法如下: 使用 Microsoft Office Word 时,有时需要显示用户输入对话框.虽然可以创建自己的对话框 ...