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. css垂直居中设置

    转载自大佬的文章:纯css实现垂直居中的几种方法(https://www.cnblogs.com/hutuzhu/p/4450850.html) 总结得很棒,有好几种方法自己没用过的,拷贝过来给自己看 ...

  2. Jmeter-Json提取器、用户定义变量配置

    一.Jmeter用户定义的变量,一般用于配置全局变量 1.选择用户定义的变量菜单 2.配置需要的用户定义变量 这里我添加常用的localhost和port 3.如何使用 需要使用${...}进行引用 ...

  3. Eureka配置详解（转）

    Eureka客户端配置       1.RegistryFetchIntervalSeconds 从eureka服务器注册表中获取注册信息的时间间隔(s),默认为30秒 2.InstanceInfoR ...

  4. API Gateway和Route 53及CloudFront的连携使用

    API Gateway部署出来之后的url网址对于普通用户并不友好,所以肯定是需要一个正常的域名来作为url进行访问. 主要有以下几点, API Gateway可以自定义域名 自定义的域名要从Rout ...

  5. Batch - 忽略FORFILES “no files found” error

    ref:https://stackoverflow.com/questions/16820681/suppress-forfiles-no-files-found-error Solution: Th ...

  6. struts2-convention-plugin零配置

    零配置的意思并不是说没有配置,而是通过约定大于配置的方式,大量通过约定来调度页面的跳转而使得配置大大减少. <?xml version="1.0" encoding=&quo ...

  7. 【缓存】缓存穿透、缓存雪崩、key重建方案

    一.缓存穿透预防及优化 缓存穿透是指查询一个根本不存在的数据,缓存层和存储层都不会命中,但是出于容错的考虑,如果从存储层查不到数据则不写入缓存层,如图 11-3 所示整个过程分为如下 3 步: 缓存层 ...

  8. 【转载】带你吃透RTMP

    RTMP协议是Real Time Message Protocol(实时信息传输协议)的缩写,它是由Adobe公司提出的一种应用层的协议,用来解决多媒体数据传输流的多路复用(Multiplexing) ...

  9. SCP-bzoj-1000

    项目编号:bzoj-1000 项目等级:Keter 项目描述: 鉴于该项目的奇特性质,任何拥有Administrator以下权限者均不予查看项目描述.如有违反,将导致AwD成功突破Site bzoj收 ...

  10. 一句话下载总结(用于后渗透上传payload)

    利用ftp来下载payload文件 echo open 192.168.1.1 21> ftp.txt echo ftp>> ftp.txt echo bin >> ft ...