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. HttpServletResponse对象介绍

    一.HttpServletResponse对象介绍

  2. c# 将匿名类或者集合转Json格式数据一些方法

    要说写这个功能呢也是因为工作需要,白天呢上班写个Web页面需要ajax请求后台并将数据以Json格式传会前端,由于公司特殊性吧,不能连外网(很苦比).所以只有等到晚上回家上网边查边写! public ...

  3. python + selenium <二>

    应用Webdriver,实现自动化 #coding:gbk from selenium import webdriver import os from selenium.webdriver.suppo ...

  4. 老司机实战Windows Server Docker：1 初体验之各种填坑

    前言 Windows Server 2016正式版发布已经有近半年时间了,除了看到携程的同学分享了一些Windows Server Docker的实践经验,网上比较深入的资料,不管是中文或英文的,都还 ...

  5. Opencv2.4.13 与Visual Studio2013 环境搭建配置

        opencv这个工具来进行图像处理.大致是使用C++语言编写程序实现识别算法的实现,所以首先就要进行opencv与VS环境的配置. Shaine属于那种半路出家之人都算不上的那种,本科期间三四 ...

  6. 实际比较filter2D和imfilter之间的关系

    实际比较filter2D和imfilter之间的关系 ​                  卷积运算是图像处理和增强中经常遇到的一种算法.由于很多优秀的开源算法都是采用matlab编写的,在我改写为c ...

  7. IOS动态自适应标签实现

    先上效果图 设计要求 1.标签的宽度是按内容自适应的 2.一行显示的标签个数是动态的,放得下就放,放不下就换行 3.默认选中第一个 4.至少选中一个标签 实现思路 首先我们从这个效果上来看,这个标签是 ...

  8. C++标准库之queue（各函数及其使用全）

    原创作品,转载请注明出处:http://www.cnblogs.com/shrimp-can/p/5283520.html 一.FIFO队列,即先入先出队列 1.队列的声明 std::deque< ...

  9. elasticsearch 索引 red 状态恢复 green

    方案一 找到状态为 red 的索引 curl -X GET "http://172.xxx.xxx.174:9288/_cat/indices?v=" red open index ...

  10. jquery拖拽插件 tableDnD

    http://www.jb51.net/article/39481.htm http://www.poluoluo.com/jzxy/201307/232615.html