首页 > 代码库 > JQuery实现图片轮播效果源码
JQuery实现图片轮播效果源码
======================整体结构========================
<div class="banner"> <ul class="banner-imgs"> <li class="banner-img"> <a href="#"><img src="#" alt="" /></a> </li> <li class="banner-img"> <a href="#"><img src="#" alt="" /></a> </li> <li class="banner-img"> <a href="#"><img src="#" alt="" /></a> </li> <li class="banner-img"> <a href="#"><img src="#" alt="" /></a> </li> <li class="banner-img"> <a href="#"><img src="#" alt="" /></a> </li> </ul> <div class="banner-btns"> <button class="banner-btn-left"><</button> <button class="banner-btn-right">></button> </div> <ul class="banner-items"> <li class="banner-item"></li> <li class="banner-item"></li> <li class="banner-item"></li> <li class="banner-item"></li> <li class="banner-item"></li> </ul></div>
======================滚动轮播========================
<style type="text/css"> body { background: #424242; } * { padding: 0px; border: 0px; margin: 0px; outline: none; list-style: none; text-decoration: none; } .banner { /*此处调整尺寸*/ width: 800px; height: 378px; margin: 100px auto; position: relative; overflow: hidden; } .banner .banner-imgs { width: 500%; height: 100%; position: absolute; } .banner .banner-imgs .banner-img { width: 20%; height: 100%; float: left; } .banner .banner-imgs .banner-img img { width: 100%; height: 100%; } .banner .banner-btns { width: 100%; position: absolute; top: 45%; } .banner .banner-btns button { padding: 5px; background: rgba(0, 0, 0, 0.4); text-align: center; color: white; font-size: 34px; font-family: "微软雅黑"; } .banner .banner-btns button:hover { background: rgba(0, 0, 0, 0.5); } .banner .banner-btns .banner-btn-left { float: left; } .banner .banner-btns .banner-btn-right { float: right; } .banner .banner-items { width: 100px; position: absolute; /*设置按钮位置*/ top: 10%; right: 5%; } .banner .banner-items .banner-item { width: 10px; height: 10px; margin: 5px; background: white; opacity: 0.6; border-radius: 5px; box-shadow: 0 0 5px black; cursor: pointer; float: left; } </style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var $banner = $(".banner .banner-imgs"); var $imgs = $(".banner .banner-imgs .banner-img"); var $btnL = $(".banner .banner-btns .banner-btn-left"); var $btnR = $(".banner .banner-btns .banner-btn-right"); var $items = $(".banner .banner-items .banner-item"); var index = 0; $items.eq(0).css("opacity", "1"); $btnL.click(function() { imgAnimator(false); }); $btnR.click(function() { imgAnimator(true); }); $items.click(function() { imgAnimator(true, $items.index($(this))); }); function imgAnimator(toNext, select) { var temp = 0; if(select != null) { temp = select; } else if(toNext == true) { temp = ($imgs.length + index + 1) % $imgs.length; } else { temp = ($imgs.length + index - 1) % $imgs.length; } var position = temp * -($banner.outerWidth() / 5); $banner.stop(); $banner.animate({ "left": position + "px" }, "fast", function() { index = temp; $items.css("opacity", "0.5"); $items.eq(index).css("opacity", "1"); }); } });
<!doctype html><html> <head> <meta charset="utf-8"> <title>滚动轮播</title> <style type="text/css"> body { background: #424242; } * { padding: 0px; border: 0px; margin: 0px; outline: none; list-style: none; text-decoration: none; } .banner { /*此处调整尺寸*/ width: 800px; height: 378px; margin: 100px auto; position: relative; overflow: hidden; } .banner .banner-imgs { width: 500%; height: 100%; position: absolute; } .banner .banner-imgs .banner-img { width: 20%; height: 100%; float: left; } .banner .banner-imgs .banner-img img { width: 100%; height: 100%; } .banner .banner-btns { width: 100%; position: absolute; top: 45%; } .banner .banner-btns button { padding: 5px; background: rgba(0, 0, 0, 0.4); text-align: center; color: white; font-size: 34px; font-family: "微软雅黑"; } .banner .banner-btns button:hover { background: rgba(0, 0, 0, 0.5); } .banner .banner-btns .banner-btn-left { float: left; } .banner .banner-btns .banner-btn-right { float: right; } .banner .banner-items { width: 100px; position: absolute; /*设置按钮位置*/ top: 10%; right: 5%; } .banner .banner-items .banner-item { width: 10px; height: 10px; margin: 5px; background: white; opacity: 0.6; border-radius: 5px; box-shadow: 0 0 5px black; cursor: pointer; float: left; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var $banner = $(".banner .banner-imgs"); var $imgs = $(".banner .banner-imgs .banner-img"); var $btnL = $(".banner .banner-btns .banner-btn-left"); var $btnR = $(".banner .banner-btns .banner-btn-right"); var $items = $(".banner .banner-items .banner-item"); var index = 0; $items.eq(0).css("opacity", "1"); $btnL.click(function() { imgAnimator(false); }); $btnR.click(function() { imgAnimator(true); }); $items.click(function() { imgAnimator(true, $items.index($(this))); }); function imgAnimator(toNext, select) { var temp = 0; if(select != null) { temp = select; } else if(toNext == true) { temp = ($imgs.length + index + 1) % $imgs.length; } else { temp = ($imgs.length + index - 1) % $imgs.length; } var position = temp * -($banner.outerWidth() / 5); $banner.stop(); $banner.animate({ "left": position + "px" }, "fast", function() { index = temp; $items.css("opacity", "0.5"); $items.eq(index).css("opacity", "1"); }); } }); </script> </head> <body> <div class="banner"> <ul class="banner-imgs"> <li class="banner-img"> <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/mi5-shenruliaojie.jpg" alt="" /></a> </li> <li class="banner-img"> <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone-mimax/shenruliaojie.jpg" alt="" /></a> </li> <li class="banner-img"> <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/note3-shenruliaojie.jpg" alt="" /></a> </li> <li class="banner-img"> <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3s-shenruliaojie.jpg" alt="" /></a> </li> <li class="banner-img"> <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3x-shenruliaojie.jpg" alt="" /></a> </li> </ul> <div class="banner-btns"> <button class="banner-btn-left"><</button> <button class="banner-btn-right">></button> </div> <ul class="banner-items"> <li class="banner-item"></li> <li class="banner-item"></li> <li class="banner-item"></li> <li class="banner-item"></li> <li class="banner-item"></li> </ul> </div> </body></html>
======================渐变轮播========================
<style type="text/css"> body { background: #424242; } * { padding: 0px; border: 0px; margin: 0px; outline: none; list-style: none; text-decoration: none; } .banner { /*此处调整尺寸*/ width: 800px; height: 378px; margin: 100px auto; position: relative; /*overflow: hidden;*/ } .banner .banner-imgs { width: 100%; height: 100%; background: white; } .banner .banner-imgs .banner-img { width: 100%; height: 100%; position: absolute; display: none; z-index: 0; opacity: 0; } .banner .banner-imgs .banner-img img { width: 100%; height: 100%; } .banner .banner-btns { width: 100%; z-index: 50; position: absolute; top: 45%; } .banner .banner-btns button { padding: 5px; background: rgba(0, 0, 0, 0.4); text-align: center; color: white; font-size: 34px; font-family: "微软雅黑"; } .banner .banner-btns button:hover { background: rgba(0, 0, 0, 0.5); } .banner .banner-btns .banner-btn-left { float: left; } .banner .banner-btns .banner-btn-right { float: right; } .banner .banner-items { width: 100px; z-index: 50; position: absolute; /*设置按钮位置*/ top: 10%; right: 5%; } .banner .banner-items .banner-item { width: 10px; height: 10px; margin: 5px; background: white; opacity: 0.6; border-radius: 5px; box-shadow: 0 0 5px black; cursor: pointer; float: left; } </style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var $banner = $(".banner .banner-imgs"); var $imgs = $(".banner .banner-imgs .banner-img"); var $btnL = $(".banner .banner-btns .banner-btn-left"); var $btnR = $(".banner .banner-btns .banner-btn-right"); var $items = $(".banner .banner-items .banner-item"); var lastIndex = 0; var showIndex = 0; $imgs.eq(0).css("opacity", "1"); $imgs.eq(0).css("z-index", "20"); $imgs.eq(0).css("display", "block"); $items.eq(0).css("opacity", "1"); $btnL.click(function() { imgAnimator(false); }); $btnR.click(function() { imgAnimator(true); }); $items.click(function() { imgAnimator(true, $items.index($(this))); }); function imgAnimator(toNext, select) { if(select != null) { showIndex = select; } else if(toNext == true) { showIndex = ($imgs.length + lastIndex + 1) % $imgs.length; } else { showIndex = ($imgs.length + lastIndex - 1) % $imgs.length; } $items.css("opacity", "0.5"); $items.eq(showIndex).css("opacity", "1"); var $hideImg = $imgs.eq(lastIndex); var $showImg = $imgs.eq(showIndex); $showImg.css("display", "block"); $hideImg.css("z-index", 10); $showImg.css("z-index", 20); $showImg.animate({ "opacity": "1" }, "slow", function() { $hideImg.css({ "z-index": "0", "display": "none", "opacity": "0" }); }) lastIndex = showIndex; } }); </script>
<!doctype html><html> <head> <meta charset="utf-8"> <title>渐变轮播</title> <style type="text/css"> body { background: #424242; } * { padding: 0px; border: 0px; margin: 0px; outline: none; list-style: none; text-decoration: none; } .banner { /*此处调整尺寸*/ width: 800px; height: 378px; margin: 100px auto; position: relative; /*overflow: hidden;*/ } .banner .banner-imgs { width: 100%; height: 100%; background: white; } .banner .banner-imgs .banner-img { width: 100%; height: 100%; position: absolute; display: none; z-index: 0; opacity: 0; } .banner .banner-imgs .banner-img img { width: 100%; height: 100%; } .banner .banner-btns { width: 100%; z-index: 50; position: absolute; top: 45%; } .banner .banner-btns button { padding: 5px; background: rgba(0, 0, 0, 0.4); text-align: center; color: white; font-size: 34px; font-family: "微软雅黑"; } .banner .banner-btns button:hover { background: rgba(0, 0, 0, 0.5); } .banner .banner-btns .banner-btn-left { float: left; } .banner .banner-btns .banner-btn-right { float: right; } .banner .banner-items { width: 100px; z-index: 50; position: absolute; /*设置按钮位置*/ top: 10%; right: 5%; } .banner .banner-items .banner-item { width: 10px; height: 10px; margin: 5px; background: white; opacity: 0.6; border-radius: 5px; box-shadow: 0 0 5px black; cursor: pointer; float: left; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var $banner = $(".banner .banner-imgs"); var $imgs = $(".banner .banner-imgs .banner-img"); var $btnL = $(".banner .banner-btns .banner-btn-left"); var $btnR = $(".banner .banner-btns .banner-btn-right"); var $items = $(".banner .banner-items .banner-item"); var lastIndex = 0; var showIndex = 0; $imgs.eq(0).css("opacity", "1"); $imgs.eq(0).css("z-index", "20"); $imgs.eq(0).css("display", "block"); $items.eq(0).css("opacity", "1"); $btnL.click(function() { imgAnimator(false); }); $btnR.click(function() { imgAnimator(true); }); $items.click(function() { imgAnimator(true, $items.index($(this))); }); function imgAnimator(toNext, select) { if(select != null) { showIndex = select; } else if(toNext == true) { showIndex = ($imgs.length + lastIndex + 1) % $imgs.length; } else { showIndex = ($imgs.length + lastIndex - 1) % $imgs.length; } $items.css("opacity", "0.5"); $items.eq(showIndex).css("opacity", "1"); var $hideImg = $imgs.eq(lastIndex); var $showImg = $imgs.eq(showIndex); $showImg.css("display", "block"); $hideImg.css("z-index", 10); $showImg.css("z-index", 20); $showImg.animate({ "opacity": "1" }, "slow", function() { $hideImg.css({ "z-index": "0", "display": "none", "opacity": "0" }); }) lastIndex = showIndex; } }); </script> </head> <body> <div class="banner"> <ul class="banner-imgs"> <li class="banner-img"> <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/mi5-shenruliaojie.jpg" alt="" /></a> </li> <li class="banner-img"> <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone-mimax/shenruliaojie.jpg" alt="" /></a> </li> <li class="banner-img"> <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/note3-shenruliaojie.jpg" alt="" /></a> </li> <li class="banner-img"> <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3s-shenruliaojie.jpg" alt="" /></a> </li> <li class="banner-img"> <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3x-shenruliaojie.jpg" alt="" /></a> </li> </ul> <div class="banner-btns"> <button class="banner-btn-left"><</button> <button class="banner-btn-right">></button> </div> <ul class="banner-items"> <li class="banner-item"></li> <li class="banner-item"></li> <li class="banner-item"></li> <li class="banner-item"></li> <li class="banner-item"></li> </ul> </div> </body></html>
JQuery实现图片轮播效果源码
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。