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. 1432: [ZJOI2009]Function

    1432: [ZJOI2009]Function Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 710  Solved: 528[Submit][Stat ...

  2. 算法模板——sap网络最大流 3（递归+邻接表）

    实现功能:同前 程序还是一如既往的优美,虽然比起邻接矩阵的稍稍长了那么些,不过没关系这是必然,但更重要的一个必然是——速度将是一个质的飞跃^_^(这里面的point指针稍作了些创新——anti指针,这 ...

  3. [设计模式] Iterator - 迭代器模式：由一份奥利奥早餐联想到的设计模式

    Iterator - 迭代器模式 目录 前言 回顾 UML 类图 代码分析 抽象的 UML 类图 思考 前言 这是一包奥利奥(数组),里面藏了很多块奥利奥饼干(数组中的元素),我将它们放在一个碟子上慢 ...

  4. Jmeter接口压力测试

    SOAP百科:Soap简单对象访问协议,是交换数据的一种协议规范,是一种轻量的.简单的.基于XML(标准通用标记语言下的一个子集)的协议,它被设计成在WEB上交换结构化的和固化的信息.webServi ...

  5. linux apache添加多站点配置（Ubuntn和Centos）

     Linux Apache 多站点配置 Centos 配置方式: 找到 /etc/httpd/conf/http.conf 添加监听端口,eg: Listen 89 虚拟机配置,一个端口对应一个 &l ...

  6. Shell中的算术运算(译)

    算术运算 尽管Shell中的变量被缺省地看做是string类型,而非number,但是Shell本身仍然支持算术运算.主要有以下5种方式. 1. declare 2. expr $ z=5 $ z=` ...

  7. 自动化测试工具Appium环境搭建

    Appium是一个开源.跨平台的测试框架,可以用来测试原生及混合的移动端应用.Appium支持IOS.Android及FirefoxOS平台.Appium使用WebDriver的json wire协议 ...

  8. layer插件

    最近在做公司的官网,其中有用到layer这款插件,以前没有接触过,不过学下来觉得好用好学.下面分享一下我的学习心得. layer是web弹出层组件.在官网下载好layer后,把他部署到你的项目文件中( ...

  9. IOS动态自适应标签实现

    先上效果图 设计要求 1.标签的宽度是按内容自适应的 2.一行显示的标签个数是动态的,放得下就放,放不下就换行 3.默认选中第一个 4.至少选中一个标签 实现思路 首先我们从这个效果上来看,这个标签是 ...

  10. Ef+T4模板实现代码快速生成器

    转载请注明地址:http://www.cnblogs.com/cainiaodage/p/4953601.html 效果如图,demo(点击demo可下载案例) 项目结构如图 T4BLL添加BLL.t ...