哈哈哈原来使用jQuery+CSS就可以实现图片自动切换轮播效果是那么简单的事情搞了个小米商城官网淡入淡出自动轮播图效果来看看也挺好玩的附上实例完整代码

极客小俊

已于 2024-01-24 12:17:31 修改

阅读量399

点赞数 1

分类专栏：代码实例效果精选文章标签： css jquery javascript 自动轮播图效果代码实例

于 2022-07-09 06:33:15 首次发布

本文链接：https://blog.csdn.net/windowsxp2018/article/details/125688693

版权

jQuery CSS 图片轮播 JavaScript 网页特效

关键词由CSDN通过智能技术生成

代码实例效果精选专栏收录该内容

11 篇文章 2 订阅

订阅专栏

🚀 个人主页 极客小俊
✍🏻 作者简介：web开发者、设计师、技术分享博主
🐋 希望大家多多支持一下, 我们一起学习和进步！😄
🏅 如果文章对你有帮助的话，欢迎评论 💬点赞👍🏻 收藏 📂加关注

在这里插入图片描述

前言 😲

刚刚学了javascript有了一点点小基础之后感觉,原来使用jQuery+CSS就可以实现图片切换轮播效果是那么简单的事情你再也不用使用javascript去写一大堆繁琐的代码了
搞了个小米商城官网淡入淡出轮播图效果来看看其实很简单
学一点jquery你就可以自己造轮子啦!
哈哈哈哈 😃😃😃 怎么不相信吗？看下面的代码吧!

准备工作🧐

肯定是先准备jQuery库文件，没有的朋友去官网下载，说过几十万八遍了哈! 嗯嗯好的! 🤣🤣🤣

然后是准备几张图片。大小你也可以随意! 我这里找的是2452 x 920大小的
如图
在这里插入图片描述
接下来废话不多说直接上代码!

HTML代码结构 🤗

<div id="banner">
<!--图片-->
<div class="pic">
	<img src="img/a.jpg" width="800px" height="300px" alt="" title="" style="display: block;">
	<img src="img/b.jpg" width="800px" height="300px" alt="" title="">
	<img src="img/c.jpg" width="800px" height="300px" alt="" title="">
	<img src="img/d.jpg" width="800px" height="300px" alt="" title="">
	<img src="img/e.jpg" width="800px" height="300px" alt="" title="">
</div>

<div class="btn">
		<ul>
			<li class="active"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
</div>

</div>

CSS样式代码

*{
	margin: 0;
	padding: 0;
}

#banner{
	width: 800px;
	height: 300px;
	margin: 150px auto;
	position: relative;
}

#banner .pic{
	width: 800px;
	height: 300px;
}

#banner .pic>img{
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
}

#banner>.btn{
	width:100px;
	height: 20px;
	position: absolute;
	bottom: 10px;
	left: 50%;
	margin-left: -50px;
}

#banner .btn ul{
	list-style: none;
}

#banner .btn ul li{
	width: 6px;
	height: 6px;
	border: 2px solid #757575;
	border-color: rgba(255,255,255,0.3);
	border-radius: 50%;
	display: inline-block;
	text-align: center;
	margin: 0 3px;
	background: rgba(0,0,0,0.4);
	cursor: pointer;
}

#banner .btn ul li.active{
	 background: rgba(255,255,255,0.4);
	 border-color: rgba(0,0,0,0.4);
}

jQuery代码逻辑

$(function(){
var timer=null;
var  index=0;
$("#banner .btn ul>li").hover(
	function(){
		index=$(this).index();
		$(this).addClass('active').siblings().removeClass('active');
		$("#banner .pic>img").eq(index).stop(true).fadeIn().siblings().stop(true).fadeOut();
	},
	function(){}
);

//自动播放
timer=setInterval(Play,1000);


function Play(){
	index++;
	index%=5;  
	$("#banner .btn ul>li").eq(index).addClass('active').siblings().removeClass('active');
	$("#banner .pic>img").eq(index).stop(true).fadeIn().siblings().stop(true).fadeOut();
}


$("#banner").hover(
	function(){
		clearInterval(timer);
	},
	function(){
		timer=setInterval(Play,1000);
	}
);
})