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. Hibernate优缺点

    下面就Hibernate优缺点分别进行简单的阐述.1.Hibernate优点:(1)对象/关系数据库映射(Basic O/R Mapping)它使用时只需要操纵对象,使开发更对象化,抛弃了数据库中心的 ...

  2. node删除当前文件底下全部文件的正确姿势

    今天在项目上犯了一个很愚蠢的错误 执行如下,结果删除掉了项目根目录底下的所有配置文件,导致本地虚拟机挂掉,这次多一个/的给我教训真是莫大的...哎 正确的姿势为:

  3. 启动tomcat直接报错：org.apache.tomcat.util.digester.Digester startElement

    今天很奇怪,自己手动搭建了一个ssm(spring+springmvc+mybatis)的项目,然后添加到tomcat下,启动直接报错: 2017-3-19 9:24:47 org.apache.to ...

  4. JavaEE开发基于Eclipse的环境搭建以及Maven Web App的创建

    本篇博客就完整的来聊一下如何在Eclipse中创建的Maven Project.本篇博客是JavaEE开发的开篇,也是基础.本篇博客的内容干货还是比较多的,而且比较实用,并且都是采用目前最新版本的工具 ...

  5. 新手向:Java基础知识

    Java 接口 接口(英文:Interface),在JAVA编程语言中是一个抽象类型,是抽象方法的集合,接口通常以interface来声明.一个类通过继承接口的方式,从而来继承接口的抽象方法. 接口并 ...

  6. 【读书笔记】-- 你不知道的JavaScript

    <你不知道的JavaScript>是一个不错的JavaScript系列书,书名可能有些标题党的意思,但实符其名,很多地方会让你有耳目一新的感觉. 1.typeof null === &qu ...

  7. jQuery获取Select选择的Text和 Value(转，待测试确认)

    在自己写的第一个小项目的省市区联动的时候需要用到select,找到这篇文章.实在是觉得太好了,忍不住转过来.待日后测试后再修改整理次文章. 下面是文章原文 jQuery获取Select选择的Text和 ...

  8. C++ 拷贝构造函数、拷贝赋值运算符、析构函数

    每一次都会忘,做个笔记吧.想到哪里写到哪里. 拷贝构造函数 第一个参数必须是自身类类型的引用,且任何额外参数都有默认值.(为什么必须是引用?见后解释) 合成拷贝构造函数:如果我们没有为一个类定义拷贝构 ...

  9. Android -- 贝塞尔曲线公式的推导

    1,最近看了几个不错的自定义view,发现里面都会涉及到贝塞尔曲线知识,深刻的了解到贝塞尔曲线是进阶自定义view的一座大山,so,今天先和大家来了解了解. 2,贝塞尔曲线作用十分广泛,简单举几个的栗 ...

  10. MongoDB Sharding

    sharding集群中的组件: 1.mongos:router,可以通过keepalived实现高可用. 2.config server:元数据服务器,这里要借助zookeeper存放配置信息. 3. ...