简单的 js手写轮播图

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>

　　

原文地址：https://www.cnblogs.com/zqy6666/p/11966793.html

时间： 2024-08-11 08:40:08

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

用 jQuery 手写轮播图

先上个效果截图: 主要包含以下功能点: * 1.页面加载完,自动循环翻页* 2.翻页按钮,翻页* 3.定点翻页* 4.翻页时同步圆点状态* 5.鼠标进入,停止自动翻页* 6.快速点击翻页的bug(加 isPaging 标志) 主要包含以下功能点: * 1.页面加载完,自动循环翻页* 2.翻页按钮,翻页* 3.定点翻页* 4.翻页时同步圆点状态* 5.鼠标进入,停止自动翻页* 6.快速点击翻页的bug(加 isPaging 标志) 上代码: <!DOCTYPE html> <html>

第一次尝试自己写轮播图

其实嗯,对于前端我与很多很多想说的话,但是看着种种最后却不知道说什么了,既然这样那就什么都不要说 第一次尝试自己写轮播图,对于初学前端的我来说我感觉我晚了很久了 为什么要模仿写一份出来呢,我也不知道,做个纪念吧 html代码页面 7 <!DOCTYPE html> 8 <html> 9 <head> 10 <meta charset="UTF-8"> 11 <title></title> 12 <link r

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

希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代码 <style> ul, ol { padding:0; margin:0; } li { list-style:none; } #box { width:600px; height:350px; border:10px solid #ccc; margin:0 auto; position:r

原生JS实现简易轮播图

原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = function() { var tab = 0; var loop_imgs = new Array("img/l1.jpg", "img/l2.jpg", "img/l3.jpg", "img/l4.jpg", "img/l5

JS+css3焦点轮播图PC端

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js原生web轮播图</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 list-style: none; 11 -moz-user-select: none;/*文字不可选

JS 实现动态轮播图

JavaScript实现轮播图思路 + html/css + js源码 整个轮播图的效果是通过js代码,操作dom, 拿到html我们需要的元素,控制整个ul的距离浏览器左边的位置,让排好的图片依次出现在相框中,不在相框中的元素会被css中的 overflow : hidden 隐藏掉, 其次,图片是经过处理的 ,正好和我们的相关等宽等高! 动态的创建元素,下面我们会动态创建li,并通过css把它修饰成小按钮格式,其次给小按钮添加点击事件,鼠标经过,离开事件,动态的实现图片的移动, 其实就是根据

原生 js 左右切换轮播图

使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或者留言都可以,这个是用 原生写的 轮播图,样式可以写自己喜欢的样式,什么都不用改,只改变样式就行,页面结构的id 要与js的相对应li随便加.li 随便加的意思就是说你可以加无数个图片.每个li 里装一个图片,或者是其他什么元素, <!doctype html> <html lang=&qu

photoSlider-html5原生js移动开发轮播图-相册滑动插件

简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8">

js实现图片轮播图（一）

一.实现原理 (1)将所有图片放在一个父容器div里面,通过display属性来设置图片的出现与隐藏: (2)轮播图分为手动轮播和自动轮播: 手动轮播的重点是每次点击图片下方的小圆圈,获得它的索引号,并让与之对应索引号的图片显示,并且此时的小圆圈为高亮显示: 自动轮播:利用定时器setInterval(),来每隔一定的时间来播放一次图片. (3)所有的基础知识:dom操作,定时器,事件运用. 二.轮播图页面布局: <div id="content">   <!-- 总