如何利用css+jQuery实现简易的图片轮播效果

炫酷的图片轮播效果如何实现的呢？

首先你要有一些必备的知识点，如： css、html、javascript

废话不多说直接开干：

事先将你要轮播的图片准备好
创建三个文件夹，分别是;css 、html、 images

如下是整体结构图片：
images内部是如下所示:
css内部结构如下：
html内部的结构是：

核心重点来了，完整的代码给大家呈
html代码部分:

<!--此次l轮播效果开发，纯粹是为了分享热爱 -->
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/p.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<!--图片轮播的区域 -->
<div id="k">
   <ul>
     <li>
     <img src="../images/1.jpg"  />
     <p>古寨村</p>
     </li>
     <li class="hide">
     <img src="../images/2.jpg"  />
     <p>雪白山</p>
     </li>
     <li class="hide"><img src="../images/3.jpg" />
     <p>夕阳美</p>
     </li>
  </ul>
  <button id="btn1" onClick="last()">
    <img src="../images/left.jpg" width="100%" height="100%" />
   </button>
   <button id="btn2" onClick="next()">
    <img src="../images/right.jpg" width="100%" height="100%" />
   </button>
</div>
<script>
	var x = 0;    //设置图片变量
	$(document).ready(function(){
		setInterval("next()",5000);
	});
	
	function next(){
		$("li:eq("+x+")").fadeOut(1000);
		if(x == 2)
		{
			x = 0;
		}
		else
		{
			x++;
		}
		$("li:eq("+x+")").fadeIn(1000);
	}
	
	function last(){
		$("li:eq("+x+")").fadeOut(1000);
		if(x==0)
		{
			x=2;
		}
		else
		{
			x--;
		}
		$("li:eq("+x+")").fadeIn(1000);
	}
</script>
</body>
</html>

css代码部分：

@charset "utf-8";
/* CSS Document */
#k{
	width:1000px;
	height:320px;
	padding:0px;
	position:relative;
	margin:0 auto;
}

ul{
	list-style:none;
	position:relative
}

li{
	position: absolute;
	top: 0px;
	left: 0px;
	float: left;
    text-align: center;
}


li img{
	width:1000px;
	height:320px;
}

.hide{
	display:none;
}

p{
	position:absolute;
	top:75%;
	left:0%;
	width:100%;
	background-color: rgb(255,255,255,0.8);
	padding:10px;
	font-family:"楷体";
}


button{
	position:absolute;
	margin:10px;
	border:none;
	outline:none;
	background-color:transparent;
	width:50px;
	height:30px;
}

#btn1{
	top:55%;
	left:0%;
}

#btn2{
	top:55%;
	left:90%;
}

现在就可以去运行html文件了，开不开心呢，若是遇到有些不懂的函数，直接找百度哈，到此分享结束啦啦啦

分享即是热爱，我是逆风，喜欢就转发出去吧。

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qiukui111/article/details/101621844
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-02-13 14:52:26

阅读 ( 691 )