JD轮播图代码

<!DOCTYPE html>
	<html>
	<head>
	<title>jd网站的轮播图效果</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./css/style.css">
	</head>
	<body>
	<div id="ad">
	<a href="" id="links">
	<img src="" id="image">
	</a>
	<div id="left">
	<
	</div>
	<div id="right">
	>
	</div>
	<div id="number">
	<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	</ul>
	</div>
	</div>
	</body>
	<script type="text/javascript">
	//节点获取
	var image = document.getElementById("image");
	var ad = document.getElementById("ad");
	var left = document.getElementById("left");
	var right = document.getElementById("right");
	var numlist = document.getElementById("number").getElementsByTagName("li");
	var length = numlist.length;
	//初始化
	image.src="./image/ad01.jpg";
	var add=1;
	//鼠标划入ad块的时候才有左右箭头的显示
	ad.onmouseover=function(){
	left.style.display="block";
	right.style.display="block";
	clearInterval(lun);
	}
	ad.onmouseout=function(){
	left.style.display="none";
	right.style.display="none";
	lunbo();
	}
	//点击左右箭头有图片的切换效果
	left.onclick=function(){
	//alert(‘1‘);
	add=add-1;
	if(add<1){
	add=6;
	}
	image.src = "./image/ad0"+add+".jpg";
	var x = add-1;
	for(var i=0;i<length;i++){
	numlist[i].style.background="#3e3e3e";
	if(x==i){
	numlist[i].style.background="#b61b1f";
	}
	}
	}
	right.onclick=function(){
	add=add+1;
	if(add>6){
	add=1;
	}
	image.src = "./image/ad0"+add+".jpg";
	var x = add-1;
	for(var i=0;i<length;i++){
	numlist[i].style.background="#3e3e3e";
	if(x==i){
	numlist[i].style.background="#b61b1f";
	}
	}
	}
	//图片的轮播
	function lunbo(){
	lun = setInterval(function(){
	add=add+1;
	if(add>6){
	add=1
	}
	image.src = "./image/ad0"+add+".jpg";
	var x = add-1;
	for(var i=0;i<length;i++){
	numlist[i].style.background="#3e3e3e";
	if(x==i){
	numlist[i].style.background="#b61b1f";
	}
	}
	},2000);
	}
	lunbo();
	//鼠标滑动过图片切换数字
	for(var i=0;i<length;i++){
	numlist[i].onmouseover=function(){
	add=this.innerHTML;
	image.src="./image/ad0"+add+".jpg";
	var x = add-1;
	for(var i=0;i<length;i++){
	numlist[i].style.background="#3e3e3e";
	if(x==i){
	numlist[i].style.background="#b61b1f";
	}
	}
	}
	}
	</script>
	</html>

时间： 2024-08-11 07:37:41

JD轮播图代码的相关文章

原生js简单轮播图代码

在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

木马轮播图代码Jq

效果图(将就一下) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>木马轮播图</title> 6 <link rel="stylesheet" type="text/css" href="css/css.css"&

纯HTML和CSS实现JD轮播图

博主使用了纯HTML和CSS实现了JD的轮播图,没有加动态效果,主要是使用了定位的知识. ,如图为两个侧边箭头图片. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>LunBo</title> <style> *{ padding: 0; margin: 0; } li{ list-styl

JQ全屏居中轮播图代码

自己写的轮播图代码，如有疑问请留言，图片宽度为1024乘600

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>carouse</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <div

简单的轮播图代码

<html> <script type="text/javascript" src="./jquery.min.js"></script> <body><style type="text/css">.banner{ height:365px; overflow:hidden;}.banner ul{ float:left; position:relative; left:50%; mar

vue轮播图

在公司手机端的vue编写中,需要用到一个轮播图,我一开始的时候使用的时候使用的是想在created中定义一个轮播函数,但是实际上这个轮播函数没有起作用,后面在网上看了一下,看到了网上的轮播图代码,是使用 transition-group来实现的,实践了一遍,现在代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g

js写的简单轮播图

这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放,离开自动播放6.移动到导航上,切换相对应的导航然后贴代码: <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Docume

用原生js封装轮播图

原生js封装轮播图对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不懂的可以直接私信我 slide.js /* * 轮播图 */ function Slide(elem, ms, d, ind){ this.el = elem; this.w = parseInt(getStyle(elem, "width")); this.h = parseInt(ge