jquery和js实现banner图切换效果

最新推荐文章于 2025-06-03 17:53:13 发布

原创最新推荐文章于 2025-06-03 17:53:13 发布 · 2.6k 阅读

4 ·

CC 4.0 BY-SA版权

JQuery 同时被 2 个专栏收录

9 篇文章

订阅专栏

Javascript

3 篇文章

订阅专栏

本文详细介绍使用jQuery和原生JavaScript实现轮播图效果的方法，包括图片切换、导航点交互及无缝滚动等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery实现banner图切换效果

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style>
		.banner{width:520px;height:280px;margin:auto;position:relative;overflow:hidden;}
		.banner ul{margin:0;padding:0;overflow:hidden;height:280px;position:absolute;left:0;}
		.banner ul li{float:left;list-style:none;}
		.banner ul li img{display:block;width:520px;}
		.count{position:absolute;left:30%;bottom:20px;}
		.count i{display:block;width:12px;height:12px;background:red;border-radius:100%;float:left;margin:5px;}
		.count .current{background:#fff;}
		.prev,.next{position:absolute;top:100px;width:45px;height:72px;background:rgba(76,76,76,0.3);}
		.prev:hover,.next:hover{background:rgba(76,76,76,1)}
		.prev{left:10px;}
		.next{right:10px;}
		.prev span,.next span{display:block;width:22px;height:36px;margin:20px auto 0;}
		.prev span{background:url(images/left.png) no-repeat center center;background-size:100%;}
		.next span{background:url(images/right.png) no-repeat center center;background-size:100%;}
	</style>
</head>
<body>
<div class="banner">
	<ul>
		<li><a href="javascript:void(0);"><img src="images/banner1.jpg" alt=""></a></li>
		<li><a href="javascript:void(0);"><img src="images/banner2.jpg" alt=""></a></li>
		<li><a href="javascript:void(0);"><img src="images/banner1.jpg" alt=""></a></li>
		<li><a href="javascript:void(0);"><img src="images/banner2.jpg" alt=""></a></li>
		<li><a href="javascript:void(0);"><img src="images/banner1.jpg" alt=""></a></li>
		<li><a href="javascript:void(0);"><img src="images/banner2.jpg" alt=""></a></li>
	</ul>
	<div class="count">
		<i class="current"></i>
		<i></i>
		<i></i>
		<i></i>
		<i></i>
		<i></i>
	</div>
	<a href="javascript:void(0);" class="prev">
		<span></span>
	</a>
	<a href="javascript:void(0);" class="next">
		<span></span>
	</a>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var num=0;
var timer=null;
var $Li=$(".banner ul li");
//鼠标经过清除定时器，鼠标离开执行
$(".banner").hover(function(){
	clearInterval(timer);
},function(){
	timer=setInterval(fnSwitch,3000);
})
//鼠标经过圆点
$(".count i").hover(function(){
	num=$(this).index();
	fnTab();
})
//左按钮无缝切换
$(".prev").click(function(){
	num--;
	if(num==-1){
		num=$Li.length-1;
	}
	fnTab();
})
//右按钮无缝切换
$(".next").click(function(){
	fnSwitch();
})
function fnSwitch(){
	num++;
	if(num==$Li.length){
		num=0;
	}
	fnTab();
}
function fnTab(){
	$Li.eq(num).show().siblings().hide();
	$(".count i").eq(num).addClass("current").siblings().removeClass("current");
}
</script>
</body>
</html>

js实现banner图切换效果

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style>
		.banner{width:520px;height:280px;margin:auto;position:relative;overflow:hidden;}
		.banner ul{margin:0;padding:0;overflow:hidden;height:280px;position:absolute;left:0;top:0;}
		.banner ul li{float:left;list-style:none;width:520px;}
		.banner ul li img{display:block;}
		.count{position:absolute;left:30%;bottom:20px;}
		.count i{display:block;width:12px;height:12px;background:red;border-radius:100%;float:left;margin:5px;}
		.count .current{background:#fff;}
		.prev,.next{position:absolute;top:100px;width:45px;height:72px;background:rgba(76,76,76,0.3);}
		.prev:hover,.next:hover{background:rgba(76,76,76,1)}
		.prev{left:10px;}
		.next{right:10px;}
		.prev span,.next span{display:block;width:22px;height:36px;margin:20px auto 0;}
		.prev span{background:url(images/left.png) no-repeat center center;background-size:100%;}
		.next span{background:url(images/right.png) no-repeat center center;background-size:100%;}
	</style>
</head>
<body>
<div class="banner" id="banner">
	<ul>
		<li><a href="javascript:void(0);"><img src="images/banner1.jpg" alt=""></a></li>
		<li><a href="javascript:void(0);"><img src="images/banner2.jpg" alt=""></a></li>
		<li><a href="javascript:void(0);"><img src="images/banner1.jpg" alt=""></a></li>
		<li><a href="javascript:void(0);"><img src="images/banner2.jpg" alt=""></a></li>
		<li><a href="javascript:void(0);"><img src="images/banner1.jpg" alt=""></a></li>
		<li><a href="javascript:void(0);"><img src="images/banner2.jpg" alt=""></a></li>
	</ul>
	<div class="count" id="count">
		<i class="current"></i>
		<i></i>
		<i></i>
		<i></i>
		<i></i>
		<i></i>
	</div>
	<a href="javascript:void(0);" class="prev" id="prev">
		<span></span>
	</a>
	<a href="javascript:void(0);" class="next" id="next">
		<span></span>
	</a>
</div>
<!--<script src="js/js.js"></script>-->
<script type="text/javascript">
	var oBanner=document.getElementById("banner");
	var oUl=oBanner.getElementsByTagName("ul")[0];
	var aLi=oUl.getElementsByTagName("li");
	var oCount=document.getElementById("count");
	var aI=oCount.getElementsByTagName("i");
	var oPrev=document.getElementById("prev");
	var oNext=document.getElementById("next");
	var iWidth=aLi[0].offsetWidth;
	var iLen=aLi.length;
	oUl.style.width=iWidth*iLen+"px";
	var num=0;
	for(var i=0;i<aI.length;i++){
		aI[i].index=i;
		aI[i].onclick=function(){
			for(var i=0;i<aI.length;i++){
				aI[i].className="";
			}
			this.className="current";
			//oUl.style.left=-this.index*iWidth+"px";
			starMove(oUl,{left:-this.index*iWidth});
		}
	}
	oPrev.onclick=function(){
		num--;
		if(num==-1){
			num=iLen-1;
		}
		fnTab();
	}
	oNext.onclick=function(){
		num++;
		if(num==iLen){
			num=0;
		}
		fnTab();
	}
	function fnTab(){
		for(var i=0;i<aI.length;i++){
			aI[i].className="";
		}
		aI[num].className="current";
		starMove(oUl,{left:-num*iWidth});
	}
//运动函数
function starMove(obj,json,fn){
	clearInterval(obj.timer);
	var iCur=0;
	var iSpeed=0;
	obj.timer=setInterval(function(){
		var onOff=true;
		for(var attr in json){
			//获取目标点的值
			var iTarget=json[attr];
			//获取当前attr属性值
			if(attr=='opacity'){
				iCur=Math.round(getstyle(obj,'opacity')*100);
			}else{
				iCur=parseInt(getstyle(obj,attr));
			}
			//速度缓冲
			iSpeed=(iTarget-iCur)/8;
			iSpeed=iSpeed>0 ? Math.ceil(iSpeed):Math.floor(iSpeed);
			
			if(iCur!=iTarget){
				onOff=false;
				if(attr=='opacity'){
					obj.style.opacity=(iCur+iSpeed)/100;
					obj.style.filter='alpha(opacity='+(iCur+iSpeed)+')';
				}else{
					obj.style[attr]=iCur+iSpeed+'px';
				}
			}
		}
		if(onOff){
			clearInterval(obj.timer);
			fn && fn.call(obj);   //call 改变this的指向
		}
	},30)
}
//兼容不同浏览器获取行间样式
function getstyle(obj,attr){
	if (obj.currentStyle) {
		return obj.currentStyle[attr];  //标准浏览器不兼容
	} else {
		return getComputedStyle(obj,false)[attr]; //IE7，IE8下不兼容
	}
	//return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}



</script>
</body>
</html>