图片轮循

最新推荐文章于 2021-07-22 21:14:26 发布

DarLing丶张皇

最新推荐文章于 2021-07-22 21:14:26 发布

阅读量298

点赞数

分类专栏：前端Web JS 文章标签：图片轮循

本文链接：https://blog.csdn.net/qq_42832885/article/details/83784953

版权

JS 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端Web

2 篇文章 0 订阅

订阅专栏

图片轮寻

版权声明：本文为博主原创文章，未经博主允许不得转载。转载联系邮箱：1363119685@qq.com
Copyright © 2018 DAR林克斯保留所有权利

今天呢，给大家带来一个图片轮循的JS，在各大Web页面中都有广泛的应用，希望可以帮助学习前端的小白们有所帮助！如上图所示，我们可以看到，图片会自动左划播放下一张图片，道最后一张又调回第一张图片，左右按钮可以控制左右划动图片。具体怎么实现呢？详情源码见下：

HTML：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>01图片轮询jQuery</title>
		<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
		<script type="text/javascript" src="js/myjs01.js" ></script>
		<link rel="stylesheet" href="css/mycss01.css" />
	</head>
	<body>
		<div id="tplx">
			<div id="tplx-pics">
				<div id="tplx-img"><img src="img/1.jpg"/></div>
				<div id="tplx-qhbtn">
					<div id="go-last"><img src="img/go-last.png"/></div>
					<div id="go-next"><img src="img/go_next.png"/></div>
				</div>
				<div id="tplx-titles">
					<div class="tplx-tit" style="display: block;">巴西训练内马尔受伤 吓坏队友</div>
					<div class="tplx-tit">搜狐直击德国训练 众星拼抢激烈</div>
					<div class="tplx-tit">西班牙备战演功夫足球 哈维蝎子摆尾</div>
					<div class="tplx-tit">印第安美女追捧德国 特色服饰助威抢镜</div>
					<div class="tplx-tit">锐体育：回望1958年世界杯</div>
					<div class="tplx-tit">搜狐视频《世界杯特别报道》发布会众星云集</div>
					<div class="tplx-tit">梅西vsC罗谁能笑傲巴西世界杯</div>
				</div>
			</div>
			<div id="tplx-btns">
				<div class="tplx-btn"style="width: 25px; background-color: #FBC701;"></div>
				<div class="tplx-btn"></div>
				<div class="tplx-btn"></div>
				<div class="tplx-btn"></div>
				<div class="tplx-btn"></div>
				<div class="tplx-btn"></div>
				<div class="tplx-btn"></div>
			</div>
		</div>
	</body>
</html>

CSS:

*{
	margin: 0px;
	padding: 0px;
}
#tplx{
	width: 640px;
	height: 390px;
	background-color: green;
	margin: 50px auto;
	position: relative;
}
#tplx-img, #tplx-img img{
	width: 640px;
	height: 390px;
}
#tplx-qhbtn{
	width: 640px;
	height: 80px;
	position: absolute;
	top: 155px;
}
#go-last,#go-next{
	width: 40px;
	height: 80px;
	background-color: rgba(0,0,0,0.8);
	float: left;
	cursor: pointer;
}
#go-next{
	position: absolute;
	right: 0px;
}
#tplx-titles{
	width: 640px;
	height: 78px;
	background-color: rgba(0,0,0,0.7);
	position: absolute;
	bottom: 0px;
}
.tplx-tit{
	width: 640px;
	height: 44px;
	line-height: 44px;
	text-align: center;
	font-size: 18px;
	color: white;
	display: none;
}
#tplx-btns{
	width: 640px;
	height: 12px;
	position: absolute;
	bottom: 25px;
	text-align: center;
}
.tplx-btn{
	width: 12px;
	height: 12px;
	border-radius: 6px;
	background-color: white;
	display: inline-block;
	margin: 0px 4px;
	cursor: pointer;
}

JavaScript/jQuery

var imgs=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg"];
var lx;
var index=0;

$(document).ready(function(){
	//自动轮询
	lx=setInterval("change()",2000);
	
	//给按钮绑定事件
	$(".tplx-btn").mouseover(function(){
		//获取到按钮的下标
		i=$(".tplx-btn").index($(this));
		index=i;
		index--;
		change();
		clearInterval(lx);
	});
	$(".tplx-btn").mouseout(function(){
		lx=setInterval("change()",2000);
	});
	
	//给上一张按钮绑定事件
	$("#go-last").click(function(){
		index--;
		if(index<0){
			index=imgs.length-1;
		}
		tplx(index);
		clearInterval(lx);
		lx=setTimeout("gun()",5000);
	});
	
	$("#go-next").click(function(){
		index++;
		if(index>=imgs.length){
			index=0;
		}
		tplx(index);
		clearInterval(lx);
		lx=setTimeout("gun()",5000);
	});
});
function change(){
	index++;
	if(index>=imgs.length){
		index=0;
	}
	tplx(index);
}

function tplx(index){
	$("#tplx-img img").attr("src",imgs[index]);
	$(".tplx-tit").css("display","block");
	var $thisTit=$(".tplx-tit").eq(index);
	$(".tplx-tit").not($thisTit).css("display","none");
	
	$(".tplx-btn").eq(index).css("background-color","#FBC701").css("width","25px");
	var $thisBtn=$(".tplx-btn").eq(index);
	$(".tplx-btn").not($thisBtn).css({"background-color":"white","width":"12px"});
}

function gun(){
	lx=setInterval("change()",2000)//此处记得区分setInterval()于setTimeout();不懂的可以去看博主的Window对象文章
}