方法一：

<!--灰色背景代码替换图片-->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<div>
<div>
<img src="../img/110.jpg" width="970" height="280" id="img" />
</div>
</div>

<script type="text/javascript">
var curIndex=0;
var arr=new Array();
arr[0]="../img/111.jpg";
arr[1]="../img/112.jpg";
arr[2]="../img/110.jpg";

setInterval(function(){
var img=document.getElementById("img");
if (curIndex==arr.length-1) {
curIndex=0;
} else {
curIndex+=1;
}
img.src=arr[curIndex];
} ,3000);

</script>
</body>
</html>

方法二：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<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>

<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>

</head>

<body>

<div id="banner">
<div id="inside"><img src="../img/110.jpg" id="img1" /><img src="../img/111.jpg" id="img2" /><img src="../img/112.jpg" id="img3" /><img src="../img/111.jpg" id="img4" /><img src="../img/110.jpg" 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>
</html>

JS实现banner图轮换的更多相关文章

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

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

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

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

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

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

  4. 原生JS实现banner图的滚动与跳转

    HTML部分: <div id="banner"> <!--4张滚动的图片--> <div id="inside"> < ...

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

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

  6. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

  7. 这是假的JS——利用CSS Animation实现banner图非交互循环播放

    话不多说,先来张html和css代码截图~ 注意事项: 1.如果想在每张图前进行停顿,可以在keyframes中的每一步前加上一小段与下一张相同的代码: 2.如果想要在实现无违和感的最后一张与第一张的 ...

  8. 使用CSS3中的input标签与lable标签组合实现banner图的切换

    在做网页时,我们经常可以碰到banner图的切换.对于那些JS薄弱的同学来说,这就很尴尬了.今天,我来告诉大家如何使用CSS做出banner图切换的效果. 这里,用到了lable标签与input的组合 ...

  9. 最简单实用的JQuery实现banner图中的text打字动画效果！！！

    下面,就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果,最简单实用的方法(鉴于代码量较小,就内嵌在一个HTML文件中了): 首先,我们要在header导入一个jQuery,并新建 ...

随机推荐

  1. 【webpack】-- 样式加载

    加载css需要用到css-loader和style-loader css-loader将@import 和 url 处理成正规的ES6 import ,如果@import指向的是一个外部资源,css- ...

  2. UIImagePickerController拍照/相册/录像/本地视频

    1.导入系统库 #import <MobileCoreServices/MobileCoreServices.h> 2.遵守协议 <UIImagePickerControllerDe ...

  3. 485. Max Consecutive Ones

    题目 Given a binary array, find the maximum number of consecutive 1s in this array. Example 1: Input: ...

  4. Internal Server Error with LAMP

    文章出自:http://blog.csdn.net/lipei1220/article/details/8186406 我的问题:  500  添加 .htaccess 后刷新网页就出现错误. 原因为 ...

  5. PDO（20161107）

    PDO MySQLI是针对MySQL数据库扩展的,是专门访问MySQL数据库的 PDO是一个数据库访问的一个扩展类,通过一个类访问多个数据库,就是一个数据访问抽象层,把类结合在一块了 可以访问别的数据 ...

  6. 来谈一谈------JavaScript对象

    1.window常用的属性: ①history ②location 2.history对象的方法: ①back() ②forward() ③go() 3.location对象的属性: ①host() ...

  7. springmvc基础学习2---简单配置文件

    1:web文件 2:spring-mvc.xml配置文件

  8. web CSS的知识- 关于后代选择器，子选择器，兄弟选择器的使用

    1. 后代选择器官方解释:后代选择器可以选择作为某元素后代的元素.理解:选择某一标签的后代中,所有的此标签标记例:ul em {color:red;}就是选择,h1标签后代中中,所有的em.代码如下: ...

  9. Centos7配置文件共享服务器SAMBA三步曲（转）

    1.安装 yum install samba samba-client samba-common -y 2.配置 备份已有配置 mv /etc/samba/smb.conf /etc/samba/sm ...

  10. javascript . 04 匿名函数、递归、回调函数、对象、基于对象的javascript、状态和行为、New、This、构造函数／自定义对象、属性绑定、进制转换

    匿名函数:   没有名字的函数,函数整体加小括号不报错, 函数调用 : a:直接调用 (function (){函数体}) ( ) ; b:事件绑定 document.onlick = functio ...