JQuery实现图片的动态切换

最新推荐文章于 2024-09-15 08:00:00 发布

ZXLS-ZMR

最新推荐文章于 2024-09-15 08:00:00 发布

阅读量836

点赞数 1

分类专栏： web前端文章标签： html JQuery web前端

本文链接：https://blog.csdn.net/chj_zmr/article/details/46382323

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

好久没写博客了，一直搞web前端。在搞项目的时候使用了大量的JQuery。现在购物网站，使用JQuery来显示图片的轮换很常见。这个经常用来推销广告。

这个实现很简单。主要是把css调好，用JQuery中animate来是实现自定义动画就可以了。以下代码仅供参考。

注意：需要下载JQuery.js导入到项目中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*,body{
				margin: 0px;
				padding: 0px;
			}
			img{
				width:200px;
				height:200px;
			}
			ul{
				position: relative;
				width:600%;
				height: 200px;
			}
			ul li{
				float:left;
				list-style-type: none;
			}
			#imge_container{
				overflow: hidden;
				width: 200px;
				height: 200px;
				border: 1px solid black;
				border-radius: 5px;
			}
			#number{
				position: absolute;
				width: 200px;
				top: 170px;
				cursor: pointer;
			}
			#numble_list{
				position: relative;
				display: inline-block;
				width: auto;
				height: 20px;
			}
			.count{
				border: 1px solid black;
				margin-right: 5px;
				width: 20px;
				height: 20px;
				text-align: center;
				border-radius: 10px;
			}
			.count:hover{
				background-color: #3399CC;
			}
		</style>
		<script type="text/javascript" src="JQuery/jquery-1.8.0.js" ></script>
		<script>
			Move={
				index:1,
				width:200,
				movePic:function(){
					var that=this;
				    function move(){
				    	var	obj=$(".pic").eq(that.index);
						var current_left=that.index*that.width;
						var total=$(".pic").children().length;
						$("#img_list").animate({
							"left":-current_left+"px"
						});
						that.index++;
						if(that.index>=total) that.index=0;
				    }
					setInterval(move,5000);
				},
				changeTo:function(x){
					x-=1;
					var current_left=x*this.width;
					$("#img_list").animate({
						"left":-current_left+"px"
					},"easing-in");
					this.index=x;
				}
			};
			function changeTo(index){
				if(Move){
					Move.changeTo(index);
				}
			}
			$(document).ready(function(){
				var total=$(".pic").children().length;
				var left=200-26*total;
				$("#numble_list").css("left",left+"px");
				for(var i=1;i<=total;i++){
					$("#numble_list").append("<li><div class='count' οnclick='changeTo(this.innerHTML)'>"+i+"</div></li>");
				}
				Move.movePic();
				$("#imge_container").hover(function(){
					$("#number").css("display","block");
				},function(){
					$("#number").css("display","none");
				});
			});
		</script>
	</head>
	<body>
		<div id="imge_container">
			<ul id="img_list">
				<li class="pic"><img src="087.png"></li>
				<li class="pic"><img src="background-image.jpg"></li>
				<li class="pic"><img src="html5/Koala.jpg"></li>
				<li class="pic"><img src="html5/loginPic.jpg"></li>
				<li class="pic"><img src="背景.jpg"></li>
			</ul>
			<div id="number" style="display: none;">
				<ul id="numble_list"></ul>
			</div>
		</div>
	</body>
</html>