京东网轮播图效果(能自动轮播)

最新推荐文章于 2020-05-06 04:41:24 发布

后盾落尘

最新推荐文章于 2020-05-06 04:41:24 发布

阅读量1k

点赞数 1

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

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

版权

WEB开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
	*{
		padding: 0px;
		margin: 0px;
	}
	#box{
		margin: 30px auto;
		/*border: 2px solid red;*/
		height: 240px;
		width: 670px;
		overflow: hidden;
		position: relative;
	}
	#box img{
		width:670px;
		height:240px;
		position:absolute;
		left:0px;
		top:0px;
		opacity:0;
		filter:alpha(opacity=0);
	}
	.main .page{
		height: 30px;
		width: 190px;
		z-index: 10;
		position: absolute;
		top: 208px;
		left: 480px;
	}
	.main  .page a{
				display:inline-block;
				width:22px;
				height:22px;
				line-height: 22px;
				background:url(./images/num_grey.png) no-repeat 0px 0px;
				margin:0px 4px;
				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="./js/jquery.js"></script>
<script type="text/javascript">
  window.onload = function(){
  	 var box = document.getElementById('box');
  	 var img= box.getElementsByTagName('img');
  	 var a= document.getElementsByTagName('a');
  	 var c=0;
     function run(){

         c++;
            if(c==6){
       	    c=0;
         }
       for(var i=0;i<7;i++){
             if(i==c){
             	   img[i].style.opacity= 1;
             	   a[i].className='active';
          }else{
             	   img[i].style.opacity= 0;
                 a[i].className+='no';
           }
      }

     }

  	var timer=setInterval(run,1000);
   $(function(){
        var apage=$('.main .page a');
        var aimg=$('#box img');
        var index=0;
        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="box">
   <img style="opacity:1;filter:alpha(opacity=100);" src="./images/1.jpg" alt="" />	
   <img src="./images/2.jpg" alt="" />	
   <img src="./images/3.jpg" alt="" />	
   <img src="./images/4.jpg" alt="" />	
   <img src="./images/5.jpg" alt="" />
   <img src="./images/6.jpg" alt="" />
   </div>
   <div class="main">
   <p 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>
   	<a href="javascript:void(0);">4</a>
   	<a href="javascript:void(0);">5</a>
   	<a href="javascript:void(0);">6</a>
   </p>	
</div>
</body>
</html>