花瓣网轮播图效果

最新推荐文章于 2023-01-12 19:19:38 发布

后盾落尘

最新推荐文章于 2023-01-12 19:19:38 发布

阅读量1k

点赞数

分类专栏： WEB开发 JAVASCRIPT 文章标签：博客 html jquery 布局 js

本文链接：https://blog.csdn.net/u013866359/article/details/24382075

版权

WEB开发同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

JAVASCRIPT

2 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>index</title>
		<style>
			body{
				background:#57beb9;
			}
			#main{
				width:920px;
				/*border: 1px solid red;*/
				height:430px;
				overflow:hidden;
				position:relative;
				margin:30px auto;
			}
			#main .box{
				width:820px;
				height:430px;
				box-shadow:0px 0px 5px #ddd;
				margin:0px auto;
				overflow:hidden;
				/*border: 2px solid blue;*/
				position:relative;
			}
			#main .box img{
				width:820px;
				height:430px;
				position:absolute;
				left:0px;
				top:0px;
				opacity:0;
				filter:alpha(opacity=0);
			}
			#main .btnLeft{
				width:35px;
				height:57px;
				position:absolute;
				left:0px;
				top:185px;
				/*border: 1px solid yellow;*/
				background:url(./images/left_ar.png) no-repeat 0px 0px;
			}
			#main .btnRight{
				width:35px;
				height:57px;
				position:absolute;
				right:0px;
				top:185px;
			/*	border: 1px solid yellow;*/
				background:url(./images/right_ar.png) no-repeat 0px 0px;
			}
			#main  .page{
				width:132px;
				height:22px;
				position:absolute;
				bottom:15px;
				right:50px;
			}
			#main  .page a{
				display:inline-block;
				width:22px;
				height:22px;
				background:url(./images/num_grey.png) no-repeat 0px 0px;
				margin:0px 11px;
				float:left;
				color:#FFF;
				text-decoration:none;
				text-align:center;
			}
			#main  .page a.active{
				background:url(./images/num_red.png) no-repeat 0px 0px;
			}
		</style>
		<script src="jquery.js"></script>
		<script>
		   $(function(){
		   	  var apage=$('#main .page a');
		   	  var aimg=$('#main .box img');
		   	  var index=0;
		   	  var asize=aimg.size();
		   	   $('#btnLeft').click(function(){
                   index--;
		   	   	   if(index<0){
		   	   	  	index=asize-1;
		   	   	  	document.title=index;
		   	   	  }
		   	   	  change();
		   	   	})
		   	   $('#btnRight').click(function(){
                   index++;
		   	   	   if(index>asize-1){
		   	   	  	index=0;
		   	   	  	document.title=index;
		   	   	  }
		   	   	  change();
		   	   	})
		   	 apage.click(function(){
                  index=$(this).index();
                  change();
		   	  });
		   	  function change(){
		   	  	  apage.removeClass('active');
		   	  	  apage.eq(index).addClass('active');
		   	  	  aimg.eq(index).siblings().stop().animate({
		   	  	  	  opacity: 0
		   	  	  },300)
		   	  	  aimg.eq(index).stop().animate({
		   	  	  	  opacity: 1
		   	  	  },300)
		   	  }
		   	})
        </script>
	</head>
	<body>
		<div id="main">
			<a class='btnLeft' id="btnLeft" href="javascript:void(0);"> </a>
			<a class='btnRight' id="btnRight" href="javascript:void(0);"> </a> 
			<div class="box">
				<img style="opacity:1;filter:alpha(opacity=100);" src="./images/intro1.jpg"/>				
				<img src="./images/intro2.jpg"/>
				<img src="./images/intro3.jpg"/>
			</div>
			<div class='page'>
				<a  class='active'  href="javascript:void(0);">1</a>
				<a  href="javascript:void(0);">2</a>
				<a href="javascript:void(0);">3</a>
			</div>
		</div>
	</body>
</html>

没有加上定时器效果，只能手动进行图片的切换

后盾落尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
花瓣网轮播图效果

index.html index body{ background:#57beb9; } #main{ width:920px; /*border: 1px solid red;*/ height:430px; overflow:hidden; position:relative; margin:30
复制链接

扫一扫

专栏目录