CSS+JS实现banner图滚动和点击切换

HTML 部分代码：

<body>

<div id="banner">

　　<div id="inside"><img src="img/banner1.png" id="img1" /><img src="img/banner2.png" id="img2" /><img src="img/banner3.png" id="img3" /><img src="img/banner4.png" id="img4" /><img src="img/banner1.png" id="img5" />

</div>

<ul id="bannerNum">

　　<li onclick="changeBanner(1)">1</li>

　　<li onclick="changeBanner(2)">2</li>

　　<li onclick="changeBanner(3)">3</li>

　　<li onclick="changeBanner(4)">4</li>

</ul>

</div>

</body>

CSS代码：

<style type="text/css">

*{

padding: 0px;

margin: 0px;

}

#banner{

width: 100%;

overflow: hidden;

white-space: nowrap;

position: relative;

}

#banner #inside{

width: 9600px;

position: relative;

left: 50%;

margin-left: -960px;

transition: all 1s ease;

}

#banner img{

width: 1920px;

}

#bannerNum{

padding: 0px;

list-style: none;

overflow: hidden;

width: 160px;

position: absolute;

bottom: 30px;

right: 50px;

}

#bannerNum li{

width: 30px;

height: 30px;

background-color: white;

text-align: center;

line-height: 30px;

margin: 0px 5px;

float: left;

cursor: pointer;

}

</style>

JS 部分代码：

<script>

　　var num = 1;

　　var inside;

　　window.onload = function(){

　　inside = document.getElementById("inside");

　　var interval = setInterval(function(){

　　　　inside.style.transition = "all 1s ease";

　　　　num++;

　　　　switch (num){

　　　　case 1:

　　　　inside.style.transition = "none";

　　　　inside.style.marginLeft = (-960)+"px";

　　　　break;

　　　　case 2:

　　　　inside.style.marginLeft = (-960-1920)+"px";

　　　　break;

　　　　case 3:

　　　　inside.style.marginLeft = (-960-1920*2)+"px";

　　　　break;

　　　　case 4:

　　　　inside.style.marginLeft = (-960-1920*3)+"px";

　　　　break;

　　　　case 5:

　　　　inside.style.marginLeft = (-960-1920*4)+"px";

　　　　num = 0;

　　　　break;

　　　　default:

　　　　break;

　　　　}

　　　　},2000);

　　}

　　function changeBanner(num1){

　　　　inside.style.transition = "none";

　　　　switch (num1){

　　　　case 1:

　　　　inside.style.marginLeft = (-960)+"px";

　　　　break;

　　　　case 2:

　　　　inside.style.marginLeft = (-960-1920)+"px";

　　　　break;

　　　　case 3:

　　　　inside.style.marginLeft = (-960-1920*2)+"px";

　　　　break;

　　　　case 4:

　　　　inside.style.marginLeft = (-960-1920*3)+"px";

　　　　break;

　　　　default:

　　　　break;

　　　　}

　　num = num1-1;

　　}

</script>

JS 实现banner图的滚动和选择效果的更多相关文章

  1. 原生JS实现banner图的滚动与跳转

    HTML部分: <div id="banner"> <!--4张滚动的图片--> <div id="inside"> < ...

  2. 如何使用JS实现banner图滚动

    通过JS实现banner图的滚动主要是定时器的应用 先新建好banner图的几张图片,最后一张与第一张用同一个,保证滚动的不间断 改好样式,需注意所有图片要在同行显示,否则不能向左滚动 声明一个函数, ...

  3. 原生态JS实现banner图的常用所有功能

    虽然,用jQuery实现banner图的各种效果十分简单快捷,但是我今天用css+js代码实现了几个banner图的常用功能,效果还不错. 此次,主要想实现以下功能: 1. banner图循环不间断切 ...

  4. JS实现banner图轮换

    方法一: <!--灰色背景代码替换图片--> <!DOCTYPE html><html> <head> <meta charset="U ...

  5. 使用JS实现图片轮播滚动跑马灯效果

    我的第一篇文章.哈哈.有点小鸡冻.  之前在百度搜索"图片轮播"."图片滚动",结果都是那种可以左右切换的.也是我们最常见的那种.可能是搜索 关键字的问题吧. ...

  6. JS写四个图片滚动显示的效果

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

  7. jquery自定义banner图滚动插件---（解决最后一张图片倒回第一张图片的bug）

    banner图的滚动效果动画 最近做项目中banner滚动的时候遇到了一个小bug,当banner滚动到最后一张图再跳回第一张图时, 会出现默认的倒回第一张图的过渡效果,看了几个插件都是这样,所以自定 ...

  8. JQuery实现banner图滚动

      前  言           jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是 ...

  9. JQuery自定义插件详解之Banner图滚动插件

      前  言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...

随机推荐

  1. MVC+Spring.NET+NHibernate .NET SSH框架整合

    在JAVA中,SSH框架可谓是无人不晓,就和.NET中的MVC框架一样普及.作为一个初学者,可以感受到.NET出了MVC框架以后太灵活了(相比之前的web Form),嗯,关于.NET中的MVC框架我 ...

  2. Java Reference 源码分析

    @(Java)[Reference] Java Reference 源码分析 Reference对象封装了其它对象的引用,可以和普通的对象一样操作,在一定的限制条件下,支持和垃圾收集器的交互.即可以使 ...

  3. golang socket 分析

    socket:tcp/udp.ip构成了网络通信的基石,tcp/ip是面向连接的通信协议 要求建立连接时进行3次握手确保连接已被建立,关闭连接时需要4次通信来保证客户端和,服务端都已经关闭 在通信过程 ...

  4. 安装node配置环境变量，解决某组件（如cordova，webpack等）“不是内部命令”问题

    安装cordova之后,控制台输入cordova -v之后,一直提示不是内部命令,查了很久入了很多坑之后,终于配置正确~记录一下~ 1.安装node,我的安装路径为D:\frontend\nodejs ...

  5. git pull错误记录及解决

    执行操作:$ git pull 返回错误: error: RPC failed; result=7, HTTP code = 0 fatal: The remote and hung up unexp ...

  6. 机器学习:Python实现最小均方算法(lms)

    lms算法跟Rosenblatt感知器相比,主要区别就是权值修正方法不一样.lms采用的是批量修正算法,Rosenblatt感知器使用的 是单样本修正算法.两种算法都是单层感知器,也只适用于线性可分的 ...

  7. 深入PHP变量存储结构 标签： PHP存储

    1.深入PHP变量存储结构 标签: PHP存储  分类: 编程语言(10)  首先声明,我并没有去读PHP的源码,只是对于PHP的有时候诡异的表现感兴趣,找了一下开发人员laruence的博客结合PH ...

  8. String 类的实现（2）深度拷贝详解

    我们已经知道了浅拷贝存在的问题,即多次析构同一空间.这个问题是类的成员函数引起的,就是前面浅拷贝里相当于编译器自动合成的函数,确切的说,浅拷贝里的问题是由隐士拷贝构造函数和隐士赋值运算符引起的. 拷贝 ...

  9. 老李分享：QTP的录制原理以及实现

    老李分享:QTP的录制原理以及实现   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9088 ...

  10. Hybris license过期的解决办法

    license过期编译是可以通过的,但是启动服务会报错: LICENSE VERIFICATION HAS FAILED! Your demo/develop license has expired, ...