方法一：

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

<!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. Digital Tutors - Introduction to Scripting Shaders in Unity 学习笔记

    1. Overview 2. Understanding Shader definition:code that define what the material can do in the envi ...

  2. 每天一个Linux命令 8

    yum 光盘yum源搭建好处:不需要上网,省去许多网络yum源下载所需的时间,安装速度会大大增加.缺点:yum源不一定是最新的 1.打开虚拟机,加载光盘镜像,进入Linux系统,挂载光盘.2. 让网络 ...

  3. struts2(一) struts2入门

    首先推荐一本书,虽然我还没看过,但是我以后肯定会看的,<Struts+技术内幕>提取密码:kg6w .现在只是停留在会使用struts2的层次,自己也想继续深入研究,但是感觉自己的知识面还 ...

  4. ANdrod Studio查看Sha1的方法

    在用Studio做开发中,有时候根据业务需求,需要集成一些SDk,举个例子,百度的鹰眼定位,当然还有很多,在创建项目的时候需要输入sha1值,这个sha1值的获取有多种方式,我记得百度有个检测,就可以 ...

  5. RxJava Map操作详解

    2016-06-06 RxJava是最近两年火起来的一个框架,核心是异步,但是对于我来说印象最深的是响应式编程的思想.最近刚好想把自己的项目改成用RxJava实现,所以就研究了下.抛物线和大头鬼两位大 ...

  6. mysql语句sum求和为null的问题

    select sum(price) as price from order where status='SUCCESS'; 如果price对应的所有的值为0,那么算出来的和为null: 可以采用ifn ...

  7. USB PE

    To put WinPE on a USB Stick, you must first make it bootable. Warning: This will destroy all the dat ...

  8. 深入浅出数据结构C语言版（5）——链表的操作

    上一次我们从什么是表一直讲到了链表该怎么实现的想法上:http://www.cnblogs.com/mm93/p/6574912.html 而这一次我们就要实现所说的承诺,即实现链表应有的操作(至于游 ...

  9. ios 个推推送集成

    个推推送总结: 个推第三方平台官网地址:http://www.getui.com/cn/index.html 首先去官网注册账号,创建应用,应用的配置信息,创建APNs推送证书上传 P12证书(开发对 ...

  10. NOI全国赛(1998)——围巾裁剪

    裁缝有一块非常珍贵的丝绸围巾.可惜的是,围巾的某些部分已经被蛀虫给咬坏了.裁缝当然不愿意就这么把围巾给丢了,于是,他想把围巾给裁成两块小围巾送给他的两个女儿.自然,两块小围巾的面积之和越大越好.  这 ...