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. CompletionService：批量执行异步任务

    之前有去了解CompletionService,当时没有做记录,现在再想使用却发现忘记了,果然好记性不如烂笔头. 原文比较简洁,通俗易懂. 转载-原文链接: https://segmentfault. ...

  2. AWS lambda DynamoDB api gateway之间的连接

    创建角色 附加策略 AmazonDynamoDBFullAccess AWSLambdaDynamoDBExecutionRole 创建DynamoDB表 在表的项目中创建内容 this pipi 打 ...

  3. 笔记38 Spring Web Flow——订单流程（定义基本流程）

    做一个在线的披萨订购应用 实际上,订购披萨的过程可以很好地定义在一个流程中.我们首先从 构建一个高层次的流程开始,它定义了订购披萨的整体过程.接下 来,我们会将这个流程拆分成子流程,这些子流程在较低的 ...

  4. C# Func和匿名方法 简单使用

    今天敲代码遇见一个问题,解决中用到了C#的Func和匿名方法,发现挺好用的 定义一个这样的方法可以避免重复写try catch 这里用到了Func<int,string> ,它其实就是一个 ...

  5. php fopen用法以及解释

    $log = fopen('./log.txt','a');//生成一个log.txt文件,a相当于文件的权限 fwrite($log,'成功'."\r\n");//写入文件 mo ...

  6. Python 让输入的密码不在屏幕上显示

    使用getpass模块 #!/usr/bin/env python import getpass username = raw_input("username:") passwor ...

  7. Python 让文件代码支持汉字

    默认使用ASCII编码,改成utf8 #!/usr/bin/env python # -*- coding:utf8 -*- #coding:utf-8

  8. 高可用开源方案Heartbeat vs Keepalived

    转:http://www.kuqin.com/shuoit/20140623/340745.html 最近因为项目需要,简单的试用了两款高可用开源方案:Keepalived和Heartbeat.两者都 ...

  9. Codeforces703D-Mishka and Interesting sum-离线树状数组

    (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 题意:传送门  原题目描述在最下面.  询问一个区间内出现次数为偶数次的数字的异或和. 思路:  先求出区间异或前缀和,其实就是出现次 ...

  10. GO语言range的用法 (2013-08-09 14:08:26)

    range是go语言系统定义的一个函数. 函数的含义是在一个数组中遍历每一个值,返回该值的下标值和此处的实际值. 假如说a[0]=10,则遍历到a[0]的时候返回值为0,10两个值. 下面是一个例子: ...