JD轮播图代码

最新推荐文章于 2024-08-15 08:55:57 发布

weixin_30546189

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量84

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/chaofei/p/5762748.html

版权

<!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.οnmοuseοver=function(){
	left.style.display="block";
	right.style.display="block";
	clearInterval(lun);
	}
	ad.οnmοuseοut=function(){
	left.style.display="none";
	right.style.display="none";
	lunbo();
	}
	//点击左右箭头有图片的切换效果
	left.οnclick=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.οnclick=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].οnmοuseοver=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>

转载于:https://www.cnblogs.com/chaofei/p/5762748.html

weixin_30546189

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JD轮播图代码

<!DOCTYPE html> <html> <head> <title>jd网站的轮播图效果</title> <meta charset="utf-8"> <link rel="stylesheet" type="te...
复制链接

扫一扫