轮播图(jquery)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="fk.css" rel="stylesheet" type="text/css" /> <script src="../1.10.2.jquery.min.js"></script> </head> <body> <div id="fk"> <!--img[src=img/$.jpg]*6--> <img src="img/1.jpg" alt="" style="display: block;"/> <img src="img/2.jpg" alt="" /> <img src="img/3.jpg" alt="" /> <img src="img/4.jpg" alt="" /> <img src="img/5.jpg" alt="" /> <img src="img/6.jpg" alt="" /> <ul> <li style="background: #A52A2A;"></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> <script> // 如果使用jQuery, // 移入事件建议写成mouseenter // 移出事件建议写成mouseleave var c=0; function autorun(){ c++; c=c==6?0:c; // 让c号元素显示,兄弟元素隐藏 $("#fk img").eq(c).fadeIn(200).siblings('img').fadeOut(200); // 让c号li变红,兄弟li变灰色 $("#fk ul li").eq(c).css('background','#a10000').siblings('li').css('background','#ddd'); } var timer=setInterval(autorun,1000) $("#fk").mouseenter(function(){ // 清理定时器 clearInterval(timer); }) $("#fk").mouseleave(function(){ timer=setInterval(autorun,1000) }) // 给小圆点加鼠标移入事件 $("#fk ul li").mouseenter(function(){ // 获得移入的li的序号 c=$(this).index(); // 让c号元素显示,兄弟元素隐藏 $("#fk img").eq(c).fadeIn(200).siblings('img').fadeOut(200); // 让c号li变红,兄弟li变灰色 $("#fk ul li").eq(c).css('background','#a10000').siblings('li').css('background','#ddd'); }) </script> </html>
css代码
*{ margin: 0; padding: 0; } #fk{ width: 1200px; height: 535px; position: relative; border: 4px solid palevioletred; margin: 0 auto; } #fk img{ position: absolute; left: 0; top: 0; display: none; } #fk ul{ position: absolute; left: 528px; bottom: 23px; } #fk ul li{ width: 12px; height: 12px; background: #ddd; list-style: none; float: left; margin-right: 8px; border-radius: 50%; }