web端轮播图

最新推荐文章于 2024-06-06 20:04:13 发布

加油挣米粒呀

最新推荐文章于 2024-06-06 20:04:13 发布

阅读量1.3k

点赞数 1

文章标签： js jquery css html

本文链接：https://blog.csdn.net/qq_45147812/article/details/106012031

版权

文章目录

原生JS编写

function getStyle(obj,name){
	if(window.getComputedStyle){
		return getComputedStyle(obj,null)[name];
	}else{
		return obj.currentStyle[name];
	}
}

function move(obj,attr,target,speed,callback){
	clearInterval(obj.timer);
	var current = parseInt(getStyle(obj,attr));
	if(current>target){
		speed=-speed;
	}
	obj.timer=setInterval(function(){
		var oldValue = parseInt(getStyle(obj,attr));
		var newValue = oldValue + speed;
		if(speed<0&&newValue<target||speed>0&&newValue>target){
			newValue =target;//超过边界了就放到边界上
		}
		obj.style[attr]=newValue+"px";
		if(newValue==target){
			clearInterval(obj.timer);
			callback&&callback();
		}
	},30);
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0 auto;
				padding: 0;
			}
			
			#outer{
				width: 500px;
				height: 400px;
				background-color: rgba(240,255,255,0.5) ;
				margin: 50px auto;
				position: relative;
				overflow: hidden;
				
			}
			#imgList{
				list-style: none;
				position: absolute;
			}
			
			#imgList li{
				float: left;
			}
			
			#nav{
				position: absolute;
				bottom: 20px;
				left: 200px;	
			}
			#nav a{
				float: left;
				width: 15px;
				height: 15px;
				background-color: darkgrey;
				margin: 0 5px ;
				opacity: 0.5;
			}
			img{
				width: 500px;
				height: 400px;
			}
			
		</style>
		<script src="js/tools.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var timer;
			var index =0;

			window.onload=function(){
				imgList =document.getElementById("imgList");
				imgArr = document.getElementsByTagName("img");				
				nav = document.getElementById("nav");
				outer = document.getElementById("outer");
			
				allA =document.getElementsByTagName("a");
//				alert(parseInt(getStyle(imgArr[0],"width"))*imgArr.length+"px");
				imgList.style.width=(parseInt(getStyle(imgArr[0],"width"))+10)*imgArr.length+"px";

				nav.style.left=(outer.offsetWidth-nav.offsetWidth)/2;

				allA[index].style.backgroundColor="black";
				for(var i=0;i<allA.length;i++){
					allA[i].num=i;
					allA[i].onclick=function(){
						clearInterval(timer);
						index=this.num;
						setA();
						//alert(index);
						move(imgList,"left",-500*index,20,function(){
							autoChange();
						});
					};
				}
				autoChange();
				
			}
			function setA(){
				if(index>=imgArr.length-1){
					index=0;
					imgList.style.left=0;
				}
				for(var i=0;i<allA.length;i++){
					allA[i].style.backgroundColor="";
					allA[index].style.backgroundColor="black";
				}
			}
			function autoChange () {
				timer = setInterval(function(){
					index++;
					index=index%imgArr.length;
					move(imgList,"left",-500*index,20,function(){
						setA();
					});
				},3000);
			}
		</script>
	</head>
	<body>
		<div id="outer">
			<ul id="imgList">
				<li><img src="img/1.jpg"></li>
				<li><img src="img/2.jpg"></li>
				<li><img src="img/3.jpg"></li>
				<li><img src="img/4.jpg"></li>
				<li><img src="img/5.jpg"></li>
				<li><img src="img/1.jpg"></li>
			</ul>
			<div id="nav">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
		</div>
	</body>
</html>

效果图
在这里插入图片描述

jQuery编写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0 auto;
				padding: 0;
			}
			
			#outer{
				width: 500px;
				height: 400px;
				background-color: rgba(240,255,255,0.5) ;
				margin: 50px auto;
				position: relative;
				overflow: hidden;
				
			}
			#imgList{
				list-style: none;
				position: absolute;
				background-color: #000000;
			}
			#imgList li{
				float: left;
			}
			
			img{
				width: 500px;
				height: 400px;
			}
			
		</style>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				var $imgList =$("#imgList");
				var $imgArr = $("img");				
				var $outer = $("#outer");
				var imgArrWidth = parseInt($imgArr.width());
				var wid = (imgArrWidth)*$imgArr.length;

				$imgList.css({
					width:wid
				});
				var offset = 0;
				var timer;
				function autoShow(){
					timer = setInterval(function(){
						offset -= 10;
						console.log(wid);
						
						if(offset<=(-wid+imgArrWidth)){
							offset=0;
						}
						$imgList.css("marginLeft",offset);
					},50);
				}
				autoShow();
				$("li").hover(function(){
					clearInterval(timer);
					$(this).siblings().fadeTo(100,0.5);
					$(this).fadeTo(100,1);
				},function(){
					autoShow();
					$("li").fadeTo(100,1);
				})
			});

		</script>
	</head>
	<body>
		<div id="outer">
			<ul id="imgList">
				<li><img src="img/1.jpg"></li>
				<li><img src="img/2.jpg"></li>
				<li><img src="img/3.jpg"></li>
				<li><img src="img/4.jpg"></li>
				<li><img src="img/5.jpg"></li>
				<li><img src="img/1.jpg"></li>
			</ul>
		</div>
	</body>
</html>

鼠标移入，未移入的图片被蒙版蒙住
在这里插入图片描述

移动web版轮播图（可触屏拖动）

			<!-- 轮播图 -->
			<div class="banner">
				<ul class="bannerImg clearfix">
					<li>
						<a href="javascript:;">
							<img src="./img/l1.jpg" alt="" />
						</a>
					</li><li>
						<a href="javascript:;">
							<img src="./img/l2.jpg" alt="" />
						</a>
					</li><li>
						<a href="javascript:;">
							<img src="./img/l3.jpg" alt="" />
						</a>
					</li><li>
						<a href="javascript:;">
							<img src="./img/l4.jpg" alt="" />
						</a>
					</li><li>
						<a href="javascript:;">
							<img src="./img/l5.jpg" alt="" />
						</a>
					</li><li>
						<a href="javascript:;">
							<img src="./img/l6.jpg" alt="" />
						</a>
					</li>
				</ul>
				<ul class="bannerIndicator">
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>

.banner{
	width: 100%;
	overflow: hidden;
	position: relative;
}
.bannerImg{
	/* 实际开发轮播图数量不固定 */
	/* width: 800%; */
	/* 添加默认偏移 */
	/* transform: translateX(-12.5%); */
	position: relative;
	/* left: -100%; */
}
.bannerImg>li{
	/* width: 12.5%; */
	float: left;
}
.bannerImg>li img{
	width: 100%;
	display: block;
}
.bannerIndicator{
	width: 128px;
	height: 10px;
	position: absolute;
	left: 50%;
	bottom: 5px;
	transform: translateX(-50%);
}
.bannerIndicator>li{
	width: 6px;
	height: 6px;
	border-radius: 3px;
	border: 1px solid white;
	float: left;
	margin-left: 10px;
}
.bannerIndicator>li:first-of-type{
	margin-left: 0;
}
.bannerIndicator>li.active{
	background-color: #FFFFFF;
}

window.onload=function(){
	setBanner();
}
	function setBanner(){
	// 设置修改轮播图的页面结构
	// 在开始位置添加原始的最后一张图片，在结束位置添加原始的第一张图片
	var banner = document.querySelector(".jd_banner");
	var imgBox= banner.querySelector("ul:first-of-type");
	var firstImg=imgBox.querySelector("li:first-of-type");
	var lastImg=imgBox.querySelector("li:last-of-type");
	imgBox.appendChild(firstImg.cloneNode(true));//复制一个最后元素
	imgBox.insertBefore(lastImg.cloneNode(true),imgBox.firstChild);//将最后一个元素赋值一份放在最前面
	//设置页面样式，不能在css中写死
	var lis = imgBox.querySelectorAll("li");
	var count=lis.length;
	// alert(count)
	var bannerWidth = banner.offsetWidth;
	imgBox.style.width=count*bannerWidth+"px";
	for(let i=0;i<lis.length;i++){
		lis[i].style.width=bannerWidth+"px";
		// console.log(lis[i].style.width)
	}
	var index=1;
	imgBox.style.left=-bannerWidth+"px";
	// 当屏幕大小变化时，应实时监听
	window.onresize=function(){
		bannerWidth = banner.offsetWidth;
		imgBox.style.width=count*bannerWidth+"px";
		for(let i=0;i<lis.length;i++){
			lis[i].style.width=bannerWidth+"px";
		}
		imgBox.style.left=(-index*bannerWidth)+"px";
	}
	//实现点标记
	function setIndicator(index){
		var indicators =banner.querySelector("ul:last-of-type").querySelectorAll("li");
		for(let i=0;i<indicators.length;i++){
			indicators[i].classList.remove("active");
		}
		indicators[index-1].classList.add("active");
	}
	
	// 实现自动轮播
	var autobannerTimer;
	startAutoBanner();
	function startAutoBanner(){
		autobannerTimer=setInterval(function(){
			// index=(index++)%count;
			index++;
			// 添加过度效果
			imgBox.style.transition="left 0.5s ease-in-out"
			imgBox.style.left=(-index*bannerWidth)+"px";
			//判断是否到了最后一张
			setTimeout(function(){
				if(index==count-1){
					index=1;
					imgBox.style.transition="none"
					imgBox.style.left=(-bannerWidth)+"px";
				}
			},500);
		},2000);
	}
	
	
	//实现手动轮播
	var startX,moveX,distanceX;
	var isEnd=true;
	imgBox.addEventListener("touchstart",function(e){
		startX=e.targetTouches[0].clientX;
		clearInterval(autobannerTimer);
	});
	imgBox.addEventListener("touchmove",function(e){
		if(isEnd==true){
			moveX=e.targetTouches[0].clientX;
			distanceX=moveX-startX;
			console.log(imgBox.style.left);
			imgBox.style.transition="none"//为了保证效果正常，不会有延迟等不流畅的现象
			imgBox.style.left=(-index*bannerWidth+distanceX)+"px";
		}
	});
	imgBox.addEventListener("touchend",function(e){
		isEnd=false;
		if(Math.abs(distanceX)>100){
			if(distanceX>0){
				//上一张
				index--;
			}else{
				index++
			}
			imgBox.style.transition="left 0.5s ease-in-out";
			imgBox.style.left=-index*bannerWidth+"px";
		}else if(Math.abs(distanceX)>0){//做回弹操作
			imgBox.style.transition="left 0.5s ease-in-out";
			imgBox.style.left=-index*bannerWidth+"px";
		}
		distanceX=0;
		moveX=0;
		startX=0;
	});
	imgBox.addEventListener("webkitTransitionEnd",function(){
		//如果到了最后一张则回到第一张，到第一张则回到最后一张
		if(index==count-1){
			index=1;
			imgBox.style.transition="none";
			imgBox.style.left=-index*bannerWidth+"px";
		}else if(index==0){
			index=count-2;
			imgBox.style.transition="none";
			imgBox.style.left=-index*bannerWidth+"px";
		}
		setIndicator(index)
		setTimeout(function(){
			isEnd=true;
			clearInterval(autobannerTimer);
			startAutoBanner();
		},500)
	})
}

加油挣米粒呀

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
web端轮播图

function getStyle(obj,name){ if(window.getComputedStyle){ return getComputedStyle(obj,null)[name]; }else{ return obj.currentStyle[name]; }}function move(obj,attr,target,speed,callback){ clearInterval(obj.timer); var current = parseInt(getStyle(
复制链接

扫一扫