HTML部分:

<div id="banner">
<!--4张滚动的图片-->
<div id="inside">
<img src="../../img/14072415363339_0.jpg"><img
src="../../img/14072415383924_0.jpg" id="img2" /><img
src="../../img/14072415383948_0.jpg" id="img3" /><img
src="../../img/14072415383951_0.jpg" id="img4"/><img
src="../../img/14072415363339_0.jpg" id="img5"/>
</div> <!--4个跳转到相应图片的按钮-->
<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>

CSS部分:

<style type="text/css">
*{
padding: 0px;
margin: 0px;
} #banner{
width: 100%;
overflow: hidden;
white-space: nowrap;
position: relative;
} #banner #inside{
width: 6830px;
position: relative;
left: 50%;
margin-left: -683px;
transition: all 1s ease;
} #banner img{
width: 1366px;
} #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 = (-683)+"px";
break;
case 2:
inside.style.marginLeft = (-683-1366)+"px";
break;
case 3:
inside.style.marginLeft = (-683-1366*2)+"px";
break;
case 4:
inside.style.marginLeft = (-683-1366*3)+"px";
break;
case 5:
inside.style.marginLeft = (-683-1366*4)+"px";
num = 0;
break;
default:
break;
}
},2000);
} function changeBanner(num1){
inside.style.transition = "none";
switch (num1){
case 1:
inside.style.marginLeft = (-683)+"px";
break;
case 2:
inside.style.marginLeft = (-683-1366)+"px";
break;
case 3:
inside.style.marginLeft = (-683-1366*2)+"px";
break;
case 4:
inside.style.marginLeft = (-683-1366*3)+"px";
break;
default:
break;
} num = num1-1; } </script>

原生JS实现banner图的滚动与跳转的更多相关文章

  1. JS 实现banner图的滚动和选择效果

    CSS+JS实现banner图滚动和点击切换 HTML 部分代码: <body> <div id="banner"> <div id="in ...

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

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

  3. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  4. javascript原生js轮播图

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

  5. 原生js轮播图

    //用原生js实现了一个简单的轮播图效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...

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

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

  7. 用require.js封装原生js轮播图

    index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...

  8. 手把手原生js轮播图

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  9. 原生js实现文字无缝向上滚动效果

    在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script> window.onload = roll(50); ...

随机推荐

  1. Git 简单粗暴使用

    1.现在总结一下今天学的两点内容: 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file>,注意,可反复多次使用,添 ...

  2. 10分钟学会在Ubuntu 18.04 LTS上安装NFS服务器和客户端

    https://www.linuxidc.com/Linux/2018-11/155331.htm

  3. [认证授权] 4.OIDC(OpenId Connect)身份认证(核心部分)

    1 什么是OIDC? 看一下官方的介绍(http://openid.net/connect/): OpenID Connect 1.0 is a simple identity layer on to ...

  4. c# 上传图片到一个外链相册服务器

    这里一个免费上传图片的网站:https://imgbb.com 代码: private void post1(string filePath) { try { string fName = new F ...

  5. 前序遍历构造已知二叉树(Java)

    public BiNode createBiTree() { Scanner input = new Scanner(System.in); int k = input.nextInt(); if(k ...

  6. 暂时禁止Cnario Player开机自动启动的办法

    如果暂时不需要播放器开机后启动Cnario Player, 有两种办法 从Windows启动菜单禁用Cnario Player 在Windows的任务管理器中, 找到启动标签栏, 从里面找到Cnari ...

  7. Index-技术学习系列博客

    计算机理论基础系列 B树的插入操作 前端系列 安装nodejs和webpack环境 构建vue项目 Json Web Token VO和DO转换(一) 工具汇总 缓存的实现和使用 框架学习系列 shi ...

  8. 关于解决Tomcat服务器Connection reset by peer 导致的宕机

    org.apache.catalina.connector.ClientAbortException: java.io.IOException: Connection reset by peer at ...

  9. python经典例题100题01

    [程序1] 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? ans = [i*100+j*10+k for i in range(1, 5) for j in ra ...

  10. HF-01

    胡凡 本书在第2章对C语言的语法进行了详细的入门讲解,并在其中融入了部分C+的特性. 第3-5章是 入门部分. 第3章 初步训练读者最基本的编写代码能力: 第4章对 常用介绍,内容重要: 第5章是   ...