js实现京东轮播图效果

时间：2021-05-26

本文实例为大家分享了js实现京东轮播图效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body,ul,li{padding:0;margin:0;} li{list-style-type:none;} .wrap{ position:relative; width:480px; height:260px; margin:100px auto; } .wrap>ul>li{position:absolute;display:none;} .wrap img{width:480px;height:260px;} .wrap li:first-child{display:block;} .arrow{ width:480px; height:60px; position:absolute; top:50%; margin-top:-30px; display:none; } .arrow>span{ font-size:24pt; line-height:60px; display:inline-block; width:36px; background-color:#CEE5E8; text-align:center; cursor:pointer; opacity:0.5; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; color:black; } .wrap:hover .arrow{ display:block; } .arrow>span:last-child{ float:right; } </style></head><body><div class="wrap"> <!--图片部分--> <ul> <li> <a href="javascript:void(0)"> <img src="images/1.jpg"/> </a> </li> <li> <a href="javascript:void(0)"> <img src="images/2.jpg"/> </a> </li> <li> <a href="javascript:void(0)"> <img src="images/3.jpg"/> </a> </li> <li> <a href="javascript:void(0)"> <img src="images/4.jpg"/> </a> </li> </ul> <!--按钮部分--> <div class="arrow"> <span><</span> <span>></span> </div></div></body><script src="jquery-1.12.0.min.js"></script><script> $(function(){ var count = 0; function change() { count++; if( count == $(".wrap>ul>li").length){ count = 0; } $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut(); } var myTimer = setInterval(change,4000); function reRun(){ myTimer = setInterval(change,4000); } $(".arrow>span").eq(0).click(function(){ clearInterval(myTimer); count--; if( count == -1){ count = $(".wrap>ul>li").length - 1; } $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut(); setTimeout(reRun,0); }); $(".arrow>span").eq(1).click(function(){ clearInterval(myTimer); count++; if( count == $(".wrap>ul>li").length){ count = 0; } $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut(); setTimeout(reRun,0); }); });</script></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章