简单的 js手写轮播图

html:

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;
}

/* 轮播图 */
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手写轮播图的更多相关文章

原生JavaScript（js）手把手教你写轮播图插件（banner）
---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...
原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
js原生实现轮播图效果（面向对象编程）
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播点击左右箭头按钮无缝轮播点击数字按钮切换图片分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
JS+css3焦点轮播图PC端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
授人以渔式解析原生JS写轮播图
需求与分析需求:循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片.鼠标放到轮播图的图片上时不再自动轮播并且左右箭 ...
JS 实现动态轮播图
JavaScript实现轮播图思路 + html/css + js源码整个轮播图的效果是通过js代码,操作dom, 拿到html我们需要的元素,控制整个ul的距离浏览器左边的位置,让排好的图片依次出 ...
原生JS实现旋转木马轮播图特效
大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...
JS学习笔记--轮播图效果
希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...

随机推荐

47-Ubuntu-系统信息-2-df和du查看磁盘和目录空间占用
序号命令作用 01 df -h disk free 显示磁盘剩余空间;-h以人性化的方式显示文件大小 02 du -h [目录名] disk usage 显示目录下的文件大小注:显示磁盘信息的时 ...
2018湘潭大学程序设计竞赛【E】
题目链接:https://www.nowcoder.com/acm/contest/105/E 题意:给你美食种类和查询次数,告诉你美味度和价格,给你固定钱数,问你最多能吃到多少美味度的食物.(X真是 ...
js 正则替换的使用方法
function compress(source) { const keys = {}; ⇽--- 存储目标key source.replace( /([^=&]+)=([^&]*)/ ...
delphi xe10 获取屏幕截图
//截取屏幕图片 function MakeScaleScreenshot(Sender: TControl): TBitmap; function GetScreenScale: Single; v ...
单独编译和使用webrtc音频回声消除模块(附完整源码+测试音频文件)
单独编译和使用webrtc音频降噪模块(附完整源码+测试音频文件) 单独编译和使用webrtc音频增益模块(附完整源码+测试音频文件) 说实话很不想写这篇文章,因为这和我一贯推崇的最好全部编译并使用w ...
tarjan强连通分量（模板）
#include<iostream> #include<cstdio> using namespace std; const int MAXN = 10005; struct ...
Java-Class-@I：org.springframework.web.bind.annotation.RestController
ylbtech-Java-Class-@I:org.springframework.web.bind.annotation.RestController 1.返回顶部 2.返回顶部 1. pack ...
微信-小程序-开发文档-服务端-模板消息：templateMessage.deleteTemplate
ylbtech-微信-小程序-开发文档-服务端-模板消息:templateMessage.deleteTemplate 1.返回顶部 1. templateMessage.deleteTemplate ...
scrapy-redis分布式爬取tencent社招信息
scrapy-redis分布式爬取tencent社招信息什么是scrapy-redis 目标任务安装爬虫创建爬虫编写 items.py 编写 spiders/tencent.py 编写 pip ...
Invalid Rom
问题描述原因说明这多半是因为单片机超频被锁,就是HSE_VALUE设置的与实际值不一致,容易造成这个问题. 解放方法 1. 先正确配置 HSE_VLAUE, 看HSE_VALUE 修改问题. 2. ...

简单的 js手写轮播图

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

随机推荐

热门专题