html:

<div class="na1">
   <div class="pp">
    <div class="na">
     <img class="dd" src="../img/shouji/1.jpg">
    </div>
    <div class="na">
     <img class="dd" src="../img/shouji/1.jpg">
    </div>
    <div class="na">
     <img class="dd" src="../img/shouji/1.jpg">
    </div>
    <div class="na">
     <img class="dd" src="../img/shouji/1.jpg">
    </div>
   </div>
  </div>

css

.na1 {
 width: 1349px;
 height: 620px;
 overflow: hidden;
}
.dd {
 /* width: 100%; */
 height: 100%;
 margin-left: -586px;
}
.pp {
 width: 5396px;
 height: 620px;
 margin-left: 0px;
}
.aa {
 /* width: 100%; */
 height: 100%;
 margin-left: -586px;
}
 
js
/* 轮播图 */
 var aa=0;
 var waili=document.getElementsByClassName("pp")[0];
 var timer;
 // dingshiqi
 timer=setInterval(function(){
  waili.style.transition="1s";
  aa=aa-1349;
  if (aa<=-4077) {
   waili.style.transition="0s";
   aa=0;
  }
   waili.style.marginLeft=aa+"px";
  },2500)
 })
 
<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<script src="../public/jquery.min.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<style type="text/css">

	.na1 {

		width: 1349px;

		height: 620px;

		overflow: hidden;

	}

	.dd {

		/* width: 100%; */

		height: 100%;

		margin-left: -586px;

	}

	.pp {

		width: 5396px;

		height: 620px;

		margin-left: 0px;

	}

	.aa {

		/* width: 100%; */

		height: 100%;

		margin-left: -586px;

	}

	</style>

	<body>

		<!-- header-->

		<div class="na1">

			<div class="pp">

				<div class="na">

					<img class="dd" src="../img/shouji/1.jpg">

				</div>

				<div class="na">

					<img class="dd" src="../img/shouji/1.jpg">

				</div>

				<div class="na">

					<img class="dd" src="../img/shouji/1.jpg">

				</div>

				<div class="na">

					<img class="dd" src="../img/shouji/1.jpg">

				</div>

			</div>

		</div>

		<!-- 摸快2 -->

	</body>

</html>

<script type="text/javascript">

	// 2.轮播图

	$(function(){

	/* huidingbu */

	 $(window).scroll(function() {

		var hui = $(document).scrollTop();

		// alert(hui);

		// console.log(hui);

		if (hui > 300 ) {

			$(".jiantou").fadeIn();

		} else{

			$(".jiantou").fadeOut();

		}

		})

		$(".jiantou").click(function(){

			$("html,body").animate({

			scrollTop:'0px'},500);

	})

	// 	$(".cent211").mouseover(function(){

	// 		$(this).css("border-right","1px solid grey");

	// 		setTimeout(function(){

	// 			$(".cent211").css("border-right","none");

	// 		},1000);

	// 	});

	// $(".cent311").mouseover(function(){

	// 	$(this).css("border-right","1px solid grey");

	// 	setTimeout(function(){

	// 		$(".cent311").css("border-right","none");

	// 	},1000);

	// });

	/* 轮播图jq */

	/* var aa=0;

	var waili=$(".pp").eq(0);

	var timer;

	// dingshiqi

	timer=setInterval(function(){

		waili.css("transition","1s");

		aa=aa-1349;

		if (aa<=-4077) {

			waili.css("transition","0");

			aa=0;

		}

			waili.css("marginLeft",aa+"px");

	},2500) */

	/* 轮播图 */

	var aa=0;

	var waili=document.getElementsByClassName("pp")[0];

	var timer;

	// dingshiqi

	timer=setInterval(function(){

		waili.style.transition="1s";

		aa=aa-1349;

		if (aa<=-4077) {

			waili.style.transition="0s";

			aa=0;

		}

			waili.style.marginLeft=aa+"px";

	 },2500)

	})

/* 	$(".cent211").mouseover(function(){

		$(this).animate("border-right","1px solid grey").delay(1000).("border-right","none");

	}) */

</script>

　　

简单的 js手写轮播图的更多相关文章

  1. 原生JavaScript（js）手把手教你写轮播图插件（banner）

    ---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...

  2. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  3. js原生实现轮播图效果（面向对象编程）

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

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

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

  5. JS+css3焦点轮播图PC端

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 授人以渔式解析原生JS写轮播图

    需求与分析 需求:循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片.鼠标放到轮播图的图片上时不再自动轮播并且左右箭 ...

  7. JS 实现动态轮播图

    JavaScript实现轮播图思路 + html/css + js源码 整个轮播图的效果是通过js代码,操作dom, 拿到html我们需要的元素,控制整个ul的距离浏览器左边的位置,让排好的图片依次出 ...

  8. 原生JS实现旋转木马轮播图特效

    大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...

  9. JS学习笔记--轮播图效果

    希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...

随机推荐

  1. utmp, wtmp - 登 录 记 录（login records）

    SYNOPSIS[总览] #include DESCRIPTION[描述] utmp 文 件 用 于 记 录 当 前 系 统 用 户 是 哪 些 人. 但 是 实 际 的 人 数 可 能 比 这 个 ...

  2. notepad++ remove duplicate

    step1 to sort and remove space. Since Notepad++ Version 6 you can use this regex in the search and r ...

  3. codeforces1175E Minimal Segment Cover 倍增

    题目传送门 题意:给出n条平行于x轴的线段,q次询问,每次询问一个区间最少要几条线段来覆盖,若不能覆盖则输出-1. 思路:先考虑贪心,必定是先找到,所有左端点小于等于$x$的线段的右端点最大在哪里,然 ...

  4. vue之自定义指令

    1.自定义指令的作用 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍 ...

  5. bzoj1011题解

    [解题思路] 这题解法很多,我也不知道标算是什么..这简直就是大放水啊.. 网上流传的乱搞法,对于小范围内(假设为[1,l]∩N)暴力,大范围内估算. 我写这题时还是写P的?!..但是我看不懂我当时写 ...

  6. 字符串匹配dp+bitset，滚动数组优化——hdu5745(经典)

    bitset的经典优化,即把可行性01数组的转移代价降低 bitset的适用情况,当内层状态只和外层状态的上一个状态相关,并且内层状态的相关距离是一个固定的数,可用bitset,换言之,能用滚动数组是 ...

  7. java之短路与&&和短路或||

    短路的意思就是惰性计算,符号右边的就不进行计算了. ||和&&就是这样,

  8. NX二次开发-清除信息窗口中的内容，退出信息窗口UF_UI_exit_listing_window

    #include <uf.h> #include <uf_ui.h> UF_initialize(); //打开信息窗口 UF_UI_open_listing_window() ...

  9. Centos6.5安装ruby2.2.3

    一.安装库 Yum install –y gcc* openssl* wget 二.安装ruby wget https://cache.ruby-lang.org/pub/ruby/2.2/ruby- ...

  10. Flex birdeye笔记

    1.将官网示例demo运行起来 新建Flex项目,直接将官网src下的demo拷贝到新建的项目的src下  .将官网example-binaries目录下的文件拷贝到新建项目的bin-debug下即可 ...