<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>渐入渐出</title><script src="js/jquery-3.1.1.min.js"></script><script src="js/bootstrap.min.js"></script><!--<link rel="stylesheet" href="css/bootstrap.min.css">--><style> *{ padding: 0; margin: 0; } img{ vertical-align: top; } li{ list-style: none; } .slid{ position: relative; width: 1226px; height: 460px; margin: 100px auto; } .slid li{ position: absolute; top: 0; left: 0; display: none; } .slid span{ display: block; width: 40px; height: 40px; text-align: center; line-height: 40px; font-size: 30px; cursor: pointer; color: white; } .slid span:hover{ background: rgba(0,0,0,.3); transform: scale(1.2); } .pre{ position: absolute; top: 200px; left: 10px; } .next{ position: absolute; top: 200px; right: 10px; } .slid p .cur{ background: grey; } .slid p{ position: absolute; width: 130px; height: 40px; bottom: 30px; right: 20px; background: rgba(0,255,255,.3); } .slid p label{ float: left; width: 12px; height: 12px; border-radius: 50%; background: white; margin: 14px 10px; cursor: pointer; }</style></head><body><div class="slid" id="slid"> <ul> <li><a href="#"><img src="images/mi1.jpg"></a></li> <li><a href="#"><img src="images/mi2.jpg"></a></li> <li><a href="#"><img src="images/mi3.jpg"></a></li> <li><a href="#"><img src="images/mi4.jpg"></a></li> </ul> <span class="pre" id="pre"> < </span> <span class="next" id="next"> > </span> <p id="index"> <label class="cur"></label><label></label><label></label><label></label> </p></div><script> var i=0; var t=0; // 定时器，让图片自动轮播 // $('#slid li').eq(i).fadeIn() $('#slid li').eq(i).show(); function autoPlay(){//函数封装 t=setInterval(function () { i++; if(i>3){ i=0; } $('#slid li').eq(i).fadeIn(1000).siblings().fadeOut(1000); $('#index label').eq(i).addClass('cur').siblings().removeClass('cur'); },3000) } autoPlay();//调用函数 //鼠标移动与移开事件 $('#slid').mouseover(function () { clearInterval(t) }).mouseout(function () { autoPlay(); }); // 左箭头点击 $('#pre').click(function () { i--; if(i<0){ i=3; } $('#slid li').eq(i).fadeIn(1000).siblings().fadeOut(1000); $('#index label').eq(i).addClass('cur').siblings().removeClass('cur'); }) // 右箭头点击 $('#next').click(function () { i++; if(i>3){ i=0; } $('#slid li').eq(i).fadeIn(1000).siblings().fadeOut(1000); $('#index label').eq(i).addClass('cur').siblings().removeClass('cur'); }) // 鼠标移动到下标 $('#index label').mouseover(function () { $(this).addClass('cur').siblings().removeClass('cur'); i=$(this).index(); $('#slid li').eq(i).fadeIn(1000).siblings().fadeOut(1000); })</script></body></html>
