首页 > 代码库 > 图片切换
图片切换
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{ margin: 0; padding: 0;}body{ background-color: #eeeeee;}.warp{ position: relative; width: 500px; height: 300px; margin: 50px auto; overflow: hidden;}.btns{ position: absolute; right: 30px; bottom: 30px; z-index: 2;}.btns li{ display: block; float: left; width: 14px; height: 14px; background-color: #ffffff; border-radius: 7px; margin-left: 5px; font-size: 12px; text-align: center; line-height: 14px; color: red; cursor: pointer;}.btns li.active{ background-color: green;}.box{ width: 1500px; height: 300px; position: absolute; left: 0; top: 0;}.box li{ display: block; width: 500px; height: 300px; float: left;}.box li.no1{background-color: black;}.box li.no2{background-color: orange;}.box li.no3{background-color: pink;}</style></head><body><div class="warp" id="warp"> <ul id="btns" class="btns"> <li class="active">1</li> <li>2</li> <li>3</li> </ul> <ul class="box" id="box"> <li class="no1">1</li> <li class="no2">2</li> <li class="no3">3</li> </ul></div><script src="js/jQuery-v1.8.3.js"></script><script>$(function () { var btns = $(‘#btns li‘), box = $(‘#box‘), warp = $(‘#warp‘), w = 500, iNow = 0. timer = null; function autoMove() { iNow++; if (iNow === btns.length) { iNow = 0; } btns.eq(iNow).addClass(‘active‘).siblings().removeClass(‘active‘); box.stop().animate({left : -w * iNow}); } timer = setInterval(autoMove, 1000); btns.on({ ‘mouseover‘ : function () { clearInterval(timer); var my = $(this), i = my.index(); iNow = i-1; autoMove(); } }); warp.on({ ‘mouseover‘ : function () { clearInterval(timer); }, ‘mouseout‘ : function () { timer = setInterval(autoMove, 1000); } }); });</script></body></html>
图片切换
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。