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. 3407: [Usaco2009 Oct]Bessie's Weight Problem 贝茜的体重问题

    3407: [Usaco2009 Oct]Bessie's Weight Problem 贝茜的体重问题 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit:  ...

  2. 雪花降落CAEmitterLayer粒子效果

    CAEmitterLayer 实现雪花效果   首先需要导入#import <QuartzCore/QuartzCore.h>   /**在iOS 5中,苹果引入了一个新的CALayer子 ...

  3. mybatis 使用@Select 注解，因为字符编码不一致导致mybatis 报错

    使用 mybatis 的@Select 注解, @Select({ "<script>select " + ALL_COLUMNS + " from &quo ...

  4. 给IIS添加网站配置权限

    1.新建一个网站,填好名字,路径和主机名端口等等 2.为网站添加一个用户 3.用户隶属于Guests,和IIS_IUSRS 4.把网站的完全控制权限赋给刚才的用户. 在网站右键--编辑权限--安全 或 ...

  5. Django ORM模型的一点体会

    作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁转载. 使用Python的Django模型的话,一般都会用它自带的ORM(Object-relational ma ...

  6. C++标准库之vector（各函数及其使用全）

    原创作品,转载请注明出处:http://www.cnblogs.com/shrimp-can/p/5280566.html iterator类型: iterator:到value_type的访问,va ...

  7. datagrid-detailview.js easyui表格嵌套

    datagrid-detailview.js easyui表格嵌套

  8. SharePoint 配置传出电子邮件设置

    1. 环境参数说明 A) Windows Server 2012 R2 B) SharePoint 2016 C) 第三方邮件服务器(smtp.3th.com - 有负载均衡,即对应多个IP服务器) ...

  9. bootstrap-typeahead自动补充

    官方文档:https://github.com/bassjobsen/Bootstrap-3-Typeahead 这个是基于bootstrap的typeahead与基于jquery的jquery-Ty ...

  10. Fiddler抓取https原理？

    参考:http://blog.csdn.net/xoopx/article/details/51577039 首先fiddler截获客户端浏览器发送给服务器的https请求, 此时还未建立握手.第一步 ...