jquery实现图片切换

最新推荐文章于 2022-11-10 08:56:30 发布

笨-大叔

最新推荐文章于 2022-11-10 08:56:30 发布

阅读量609

点赞数

分类专栏： jquery 文章标签：图层切换 jquery js web前端开发

本文链接：https://blog.csdn.net/u014703834/article/details/39050297

版权

jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

记得先前用js实现了图片的切换，但是显示效果显示的很生硬，使用jQuery这种生硬得到了很好的缓解。但是由于技术问题，我写的效果虽然得到了一定的改善，可还是没有达到理想的效果。下面便是菜鸟代码，有很多不足有待改善，希望各位大神多多指导。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>show</title>
		<meta name="author" content="Administrator" />
		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
		<!-- Date: 2014-09-04 -->
		<style type="text/css">
			body {margin:0;padding:0;}img{border:none;}
			.banner{margin:0 auto;width:1002px;height:520px;background:#123555;position: relative;}
			.banner span{width:1002px;height: 520px;}
			.banner span img{width:1002px;height: 520px;}
			.hide{display: none;}
			.left,.right{width:64px;height:64px;top:208px;display:none;cursor:pointer;position:absolute;}
			.left{left:5px;}
			.right{right: 5px;}
			.explain{width:100%;height:40px;top:480px;text-align:center;background:#000000;position:absolute; }
			.explain ul{margin:0;padding:0;}
			.explain ul li{width:24px;height:40px;list-style:none;cursor:pointer;display:inline-block;background:url(images/triggers.png) no-repeat 6px 14px;}
			.explain .bannerNow{background:url(images/triggers_cur.png)  no-repeat 6px 14px;}
		</style>
		<script type="text/javascript">
$(document).ready(function(){
	//隐藏或者显示箭头
	$(".banner").mousemove(function(){
		$(".left,.right").css("display","block");
	});
	$(".banner").mouseout(function(){
		$(".left,.right").css("display","none");
	});
	//自动循环条件，hover()事件，mousemov和mouseout方法的结合
	var canLoop=true;
	$(".banner").hover(function(){
		canLoop=false;	
	},function(){
		canLoop = true;
	});
	var imgs=$(".banner span");
	var imgsIndex=0;
	//自动循环
	var loop=setInterval(plays, 5000);
	function plays(){
		if(canLoop){//判断条件
			imgsIndex=++imgsIndex;//imgsIndex++是错误的。
			if(imgsIndex>imgs.length-1){
				imgsIndex=0;
			}
			changeImg(imgsIndex);
		}}
	$(".left").click(function(){
		imgsIndex=--imgsIndex;
		if(imgsIndex<0){
			imgsIndex=imgs.length-1;
		}
		changeImg(imgsIndex);
	});
	$(".right").click(function(){
		imgsIndex=++imgsIndex;
		if(imgsIndex>imgs.length-1){
			imgsIndex=0;
		}
		changeImg(imgsIndex);
	});
	$('.explain ul li').click(function() {
		imgsIndex = $('.explain ul li').index($(this));
		changeImg(imgsIndex);
	});
});
function changeImg(index){
	//stop(),停止动画.animate(css，time).
	$(".banner span").hide().stop().animate({"filter":"alpha(opacity=0),","opacity":"0"},2000).eq(index).show().animate({"filter":"alpha(opacity=1),","opacity":"1"},2000);
	$(".explain ul li").eq(index).addClass("bannerNow").siblings().removeClass("bannerNow");  
}
		</script>
	</head>
	<body>
		<div class="banner">
			<span><a href="#"><img src="images/1.jpg"></a></span>
			<span class="hide"><a href="#"><img src="images/2.jpg"></a></span>
			<span class="hide"><a href="#"><img src="images/3.jpg"></a></span>
			<span class="hide"><a href="#"><img src="images/4.jpg"></a></span>
			<span class="hide"><a href="#"><img src="images/5.jpg"></a></span>
			<div class="left"><img src="images/left.png"></div>
			<div class="right"><img src="images/right.png"></div>
			<div class="explain">
				<ul>
					<li class="bannerNow"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
	</body>
</html>

源文件源代码免费下载地址：http://download.csdn.net/detail/u014703834/7862627