| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <script src="jQuery.min.js"></script> | |
| <style> | |
| *{ | |
| margin: 0; | |
| padding: 0; | |
| } | |
| ul,li{ | |
| list-style: none; | |
| } | |
| #wrap{ | |
| width: 735px; | |
| height: 350px; | |
| margin: 0 auto; | |
| background:0; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| #wrap ul{ | |
| height: 350px; | |
| position: absolute; | |
| left:0; | |
| top:0; | |
| } | |
| #wrap ul li{ | |
| position: absolute; | |
| top:0; | |
| left:0; | |
| width: 735px; | |
| height: 350px; | |
| } | |
| #wrap ul li img{ | |
| width: 735px; | |
| height: 350px; | |
| } | |
| #wrap ol{ | |
| position: absolute; | |
| bottom: 20px; | |
| z-index: 20; | |
| } | |
| #wrap ol li{ | |
| float:left; | |
| width: 15px; | |
| height: 15px; | |
| background-color: yellow; | |
| border-radius: 50%; | |
| margin-right: 15px; | |
| cursor:pointer; | |
| } | |
| #wrap ol li.active{ | |
| background: blue; | |
| } | |
| #btnArr{ | |
| width:100%; | |
| height: 40px; | |
| position: absolute; | |
| top:50%; | |
| z-index: 20; | |
| } | |
| #leftBtn,#rightBtn{ | |
| width: 20px; | |
| height: 40px; | |
| text-align: center; | |
| background: #ccc; | |
| position: absolute; | |
| font-family: ‘宋体‘; | |
| font-size:25px; | |
| line-height: 39px; | |
| } | |
| #rightBtn{ | |
| right: 0px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="wrap"> | |
| <!-- ul>li*3>a>img --> | |
| <ul id="ul"> | |
| <li><a href="#"><img src="img/14.jpg" ></a></li> | |
| <li><a href="#"><img src="img/6.jpg" ></a></li> | |
| <li><a href="#"><img src="img/7.jpg" ></a></li> | |
| <li><a href="#"><img src="img/8.jpg" ></a></li> | |
| <li><a href="#"><img src="img/9.jpg" ></a></li> | |
| </ul> | |
| <ol> | |
| <li class="active"></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| </ol> | |
| <div id="btnArr"> | |
| <div id="leftBtn"><</div> | |
| <div id="rightBtn">></div> | |
| </div> | |
| </div> | |
| <script> | |
| $(function(){ | |
| //设置ul的宽度 | |
| // $(‘#wrap ul‘).css(‘width‘,$(‘#wrap ul li‘).eq(0).width()*$(‘#wrap ul li‘).length); | |
| $(‘#wrap ul li‘).eq(0).css({‘zIndex‘:10}); | |
| var num =0; | |
| //排序 ，显示当前图片和小方块 | |
| function show(){ | |
| $(‘#wrap ul li‘).eq(num).animate({‘opacity‘:1,"z-index":10}).siblings(‘li‘).animate({‘opacity‘:0,‘z-index‘:10-num}); | |
| //当前加类名 ，其余的删除 | |
| $("#wrap ol li").eq(num).addClass(‘active‘).siblings(‘li‘).removeClass(‘active‘); | |
| } | |
| //自动轮播 | |
| function autoplay(){ | |
| num++; | |
| if(num>$(‘#wrap ul li‘).length-1){ | |
| num = 0; | |
| } | |
| //显示第一张 | |
| show(); | |
| } | |
| //设置定时器 轮播开始 | |
| var timer = setInterval(function(){ | |
| autoplay(); | |
| },1000) | |
| //点击右侧按钮 | |
| $(‘#rightBtn‘).click(function(){ | |
| autoplay(); | |
| }) | |
| //点击左侧按钮 | |
| $(‘#leftBtn‘).click(function(){ | |
| num--; | |
| if(num<0){ | |
| num = $(‘#wrap ul li‘).length-1; | |
| } | |
| show(); | |
| }) | |
| //鼠标移上去 ，清除定时器 显示按钮 | |
| $(‘#wrap‘).mouseover(function(){ | |
| $(‘#btnArr‘).show(); | |
| clearInterval(timer); | |
| }) | |
| //鼠标移出，重新设置定时器 隐藏按钮 | |
| $(‘#wrap‘).mouseout(function(){ | |
| $(‘#btnArr‘).hide(); | |
| timer = setInterval(autoplay,1000); | |
| }) | |
| //鼠标经过小方块 | |
| //绑定事件 | |
| //排他思想 | |
| $(‘#wrap ol li‘).click(function(){ | |
| if(!$(‘#wrap ul‘).is(‘:animated‘)){//ul如果没有处在动画的状态 | |
| var ind = $(‘#wrap ol li‘).index(this);//获取选中li的角标 | |
| //当前的透明度为1 z-index为15 | |
| //其他的为0 z-index为10-ind | |
| $(‘#wrap ul li‘).eq(ind).animate({‘opacity‘:1,"z-index":10}).siblings(‘li‘).animate({‘opacity‘:0,‘z-index‘:10-ind}); | |
| //当前加类名 ，其余的删除 | |
| $(this).addClass(‘active‘).siblings(‘li‘).removeClass(‘active‘); | |
| } | |
| }) | |
| }) | |
| //设置定时器 | |
| // timer = setInterval(function (){ | |
| // $(‘#rightBtn‘).click(); | |
| // },3000); | |
| </script> | |
| </body> | |
|
</html> 效果如下:
|
原文：https://www.cnblogs.com/zykzyk/p/11390786.html
