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. 第十一篇 session和cookie自动登录机制

    session和cookie的作用和区别可以在网上查到,这里简单说下,我们使用的http协议本身是种无状态的协议,就是说web服务器接收到浏览器的请求,会直接返回相应内容,并不会检查是哪个浏览器,即浏 ...

  2. yum处理损坏的包依赖关系

    有时在安装多个软件包时,某个包的软件依赖关系可能会被另外一个包的安装覆盖掉.这叫做损坏的包依赖关系(broken dependency). 如果系统出现问题,可以先尝试: yum clean all ...

  3. 从零开始搭建系统1.3——Tomcat安装及配置

    首先安装jdk,手动解压JDK的压缩包,然后设置环境变量 1.卸载自带openjdk 查询OpenJDK rpm -qa|grep java 批量卸载所有名字包含jdk的已安装程序.命令行: rpm  ...

  4. Echart中X轴数据过多时横向拉动展示

    chart.setOption( { tooltip: { trigger: 'axis' }, toolbox: { feature: { saveAsImage: {} } }, grid: { ...

  5. bootstrap 基础模板相关信息

    <!DOCTYPE html> <html> <head> <title></title> <link rel="style ...

  6. tesseract-ocr,tesseract,pytesseract在windows下怎么安装

    废话不多说,直接介绍如何下载安装tesseract-OCR以及pytesseract和PIL资源 文末百度网盘都有Tesseract是一个开源的OCR引擎,能识别100多种语言(中,英,韩,日,德,法 ...

  7. Perl 数组应用详解(push, pop, shift, unshift)

    Perl的数组操作有四大常用函数: push:从数组的末尾加入元素.pop :从数组的末尾取出元素 shift: 从数组的开头取出元素unshift:从数组的开头加入元素 1.push #!/usr/ ...

  8. 把Debian 设置中文环境

    要支持区域设置,首先要安装locales软件包: apt-get install locales 然后配置locales软件包: dpkg-reconfigure locales 在界面中钩选上“zh ...

  9. web开发者性能优化工具（一）

    web开发者性能优化工具 1   数据包嗅探器(在性能优化时,查看页面(包括页面中全部资源)的加载过程) HttpWatch (http://www.httpwatch.com/) 把网络流量用图形的 ...

  10. Android Telephony分析(三) ---- RILJ详解

    前言 本文主要讲解RILJ工作原理,以便更好地分析代码,分析业务的流程.这里说的RILJ指的是RIL.java (frameworks\opt\telephony\src\java\com\andro ...