javascript图片轮播特效

最新推荐文章于 2022-04-30 11:19:04 发布

落叶翩翩

最新推荐文章于 2022-04-30 11:19:04 发布

阅读量1.1k

点赞数

分类专栏： web前端文章标签： jquery 图片轮播 javascript

本文链接：https://blog.csdn.net/bolg_hero/article/details/15810249

版权

web前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

下载地址：http://download.csdn.net/detail/yx511500623/6543857

示例:

<html>
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
		var first,last;
		$(document).ready(function(){
			first=$(".item:first");
			last=$(".item:last");
			$(".item:not(:first)").hide();
			$(".slider_img").wrap("<a href='http://baidu.com'></a>");
			fangun();
			initSpan();
		});
		/**
		 *翻滚轮播特效
		*/
		function fangun(){
			var currentItem=$(".item:visible"),nextItem=$(".item:visible").next();
			if(currentItem.is(last)){
				nextItem=first;
			}
			//淡出
			currentItem.fadeOut("slow",function(){
				//淡入
				nextItem.fadeIn("slow",function(){
					setTimeout(fangun,2000);
				});
			});			
		}
		/**
		 *跳转
		*/
		function turnTo(index){
			var currentItem=$(".item:visible"),nextItem=$(".item").eq(index);
			//关闭所有动画
			$.fx.off = true;
			//所有淡出
			$(".item").hide();
			//淡入				
			nextItem.fadeIn("fast",function(){
				$.fx.off = false;
			});

		}
		function initSpan(){
			$(".show_index").each(function(i){
				$(this).val(i);
				console.log(i);
			});
			$(".show_index").click(function(index){
				turnTo($(this).val());
			});
		}
	</script>
	<title>javascript和jquery特效练习</title>
	<style type="text/css">
		.item{
			list-style-type:none;
			display:inline;
		}
		#content{
			margin: auto 0;
		}
		ul{
			margin: auto 0;
			text-align: center;
		}
		/**
			当你定义的CSS中有position属性值为absolute、relative或fixed，用z-index此取值方可生效。
			此属性参数值越大，则被层叠在最上面。
		*/
		.item,#ul,#show{
			position:relative;
		}
		#show{
			z-index:9999;
			bottom: 20px;
		}
		.show_index{
			border: 1px solid  red;		
			cursor: pointer;	
			background: #888888;	
			color:#f00;	
         }
	</style>
</head>
<body>
	<div id="content">
		<ul id="nav">
			<li class="item"><img class="slider_img" src="images/slider1.jpg" alt="slider1.jpg"></li>
			<li class="item"><img class="slider_img" src="images/slider2.jpg" alt="slider2.jpg"></li>
			<li class="item"><img class="slider_img" src="images/slider3.jpg" alt="slider3.jpg"></li>
			<li style="list-style-type:none">
				<div id="show">
					<span class="show_index"> 1 </span>
					<span class="show_index"> 2 </span>
					<span class="show_index"> 3 </span>
				</div>			
			</li>
		</ul>		
	</div>
</body>
</html>

落叶翩翩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript图片轮播特效

下载地址：http://download.csdn.net/detail/yx511500623/6543857示例 var first,last; $(document).ready(function(){ first=$(".item:first"); last=$(".item:last"); $(".item:not(:first)").hi
复制链接

扫一扫