原生JS实现banner图的滚动与跳转
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图的滚动与跳转的更多相关文章
- JS 实现banner图的滚动和选择效果
CSS+JS实现banner图滚动和点击切换 HTML 部分代码: <body> <div id="banner"> <div id="in ...
- 如何使用JS实现banner图滚动
通过JS实现banner图的滚动主要是定时器的应用 先新建好banner图的几张图片,最后一张与第一张用同一个,保证滚动的不间断 改好样式,需注意所有图片要在同行显示,否则不能向左滚动 声明一个函数, ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- javascript原生js轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生js轮播图
//用原生js实现了一个简单的轮播图效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...
- 原生态JS实现banner图的常用所有功能
虽然,用jQuery实现banner图的各种效果十分简单快捷,但是我今天用css+js代码实现了几个banner图的常用功能,效果还不错. 此次,主要想实现以下功能: 1. banner图循环不间断切 ...
- 用require.js封装原生js轮播图
index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- 手把手原生js轮播图
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- 原生js实现文字无缝向上滚动效果
在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script> window.onload = roll(50); ...
随机推荐
- Git 简单粗暴使用
1.现在总结一下今天学的两点内容: 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file>,注意,可反复多次使用,添 ...
- 10分钟学会在Ubuntu 18.04 LTS上安装NFS服务器和客户端
https://www.linuxidc.com/Linux/2018-11/155331.htm
- [认证授权] 4.OIDC(OpenId Connect)身份认证(核心部分)
1 什么是OIDC? 看一下官方的介绍(http://openid.net/connect/): OpenID Connect 1.0 is a simple identity layer on to ...
- c# 上传图片到一个外链相册服务器
这里一个免费上传图片的网站:https://imgbb.com 代码: private void post1(string filePath) { try { string fName = new F ...
- 前序遍历构造已知二叉树(Java)
public BiNode createBiTree() { Scanner input = new Scanner(System.in); int k = input.nextInt(); if(k ...
- 暂时禁止Cnario Player开机自动启动的办法
如果暂时不需要播放器开机后启动Cnario Player, 有两种办法 从Windows启动菜单禁用Cnario Player 在Windows的任务管理器中, 找到启动标签栏, 从里面找到Cnari ...
- Index-技术学习系列博客
计算机理论基础系列 B树的插入操作 前端系列 安装nodejs和webpack环境 构建vue项目 Json Web Token VO和DO转换(一) 工具汇总 缓存的实现和使用 框架学习系列 shi ...
- 关于解决Tomcat服务器Connection reset by peer 导致的宕机
org.apache.catalina.connector.ClientAbortException: java.io.IOException: Connection reset by peer at ...
- python经典例题100题01
[程序1] 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? ans = [i*100+j*10+k for i in range(1, 5) for j in ra ...
- HF-01
胡凡 本书在第2章对C语言的语法进行了详细的入门讲解,并在其中融入了部分C+的特性. 第3-5章是 入门部分. 第3章 初步训练读者最基本的编写代码能力: 第4章对 常用介绍,内容重要: 第5章是 ...