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. Web导出EXCEL

    前台(客户端)导出EXCEL: 单纯的JS能够导出Excel的,一般都需要调用客户端所安装的Office Excel组件(COM接口)来完成这个工作. http://www.stepday.com/t ...

  2. Codeforces Round #323 (Div. 1) A. GCD Table

    A. GCD Table time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  3. [笔记]一个测试浏览器对html5支持的网站

    用需要测试的浏览器打开这个地址:http://html5test.com/

  4. VS2013编译GLUI

    vs自带的OpenGL为1.1版本,太老了. 1,编译glut https://www.opengl.org/resources/libraries/glut/glut37.zip 查看生成路径,可以 ...

  5. good bye 2015 B - New Year and Old Property

    题意:统计在n,m之间的数的二进制表示形式只有一个零的数目. 位运算模拟+dfs #include<iostream> #include<string> #include< ...

  6. openssl生成RSA格式,并转为pkcs8格式

    原文地址:http://www.thinkingquest.net/articles/391.html?utm_source=tuicool 支付宝接口开发相关:openssl 加密工具 支付宝“手机 ...

  7. 深入研究 Mini ASP.NET Core(迷你 ASP.NET Core),看看 ASP.NET Core 内部到底是如何运行的

    前言 几年前,Artech 老师写过一个 Mini MVC,用简单的代码告诉读者 ASP.NET MVC 内部到底是如何运行的.当时我研究完以后,受益匪浅,内心充满了对 Artech 老师的感激,然后 ...

  8. 作业二、comp和swap函数

    一.swap函数的代码及运行情况 1.代码 #include<stdio.h> int main() { void swap(int *m,int *n); int a,b; int *p ...

  9. GB GBRT XgBoost

    https://blog.csdn.net/github_38414650/article/details/76061893 https://www.cnblogs.com/wxquare/p/554 ...

  10. git基础介绍

    git基础介绍 这是git操作的基础篇,是以前的写的操作文档,就没有进行手打,直接把图片贴进来了,你们担待哈,有不正确的地方可以指正出来,我将在第一时间去修改,多谢哈! 一.文件状态:git系统的文件 ...