=====================基本结构=====================
<div class="carousel" style="width: 800px;height: 378px;"> <ul class="carousel-imgs"> <li> <a href="#"><img src="picture.jpg" alt="" /></a> </li> <li> <a href="#"><img src="picture.jpg" alt="" /></a> </li> <li> <a href="#"><img src="picture.jpg" alt="" /></a> </li> <li> <a href="#"><img src="picture.jpg" alt="" /></a> </li> <li> <a href="#"><img src="picture.jpg" alt="" /></a> </li> </ul> <div class="carousel-btns"> <button type="button" class="carousel-btn-left"><</button> <button type="button" class="carousel-btn-right">></button> </div> </div>
这是轮播图的HTML基本结构,只需要做细微调整即可使用。1、替换carousel-imgs中的图像地址 2、为图像添加超链接 3、指定 DIV.carousel 的大小(默认宽800 高378)
有了轮播图的基本结构,还需要引入相应的样式和效果,这里提供两种基础的轮播图效果,滚动轮播和渐变轮播。
=====================效果引入=====================
滚动轮播图:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
.carousel { width: 800px; height: 378px; padding: 0px; margin: 0px auto; position: relative; overflow: hidden; } .carousel-imgs { width: 500%; height: 100%; padding: 0px; margin: 0px; list-style: none; position: absolute; } .carousel-imgs li { width: 20%; height: 100%; float: left; } .carousel-imgs a { text-decoration: none; } .carousel-imgs img { width: 100%; height: 100%; } .carousel-btns { width: 100%; position: absolute; top: 45%; } .carousel-btns button { border: 0px; outline: none; padding: 5px; background: rgba(0, 0, 0, 0.4); text-align: center; color: white; font-size: 34px; font-family: "microsoft yahei"; } .carousel-btns button:hover { background: rgba(0, 0, 0, 0.5); } .carousel-btn-left { float: left; } .carousel-btn-right { float: right; }
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
function carousel(left, top) { /* 获取元素对象 */ var $carousel = $(".carousel"); var $imgs = $(".carousel-imgs li"); var $btnL = $(".carousel-btn-left"); var $btnR = $(".carousel-btn-right"); /* 创建导航按钮 */ var $item_group = $("<ul></ul>"); $item_group.attr("class", "carousel-items"); $imgs.each(function() { $item_group.append("<li></li>"); }); $carousel.append($item_group); /* 样式初始化 */ $item_group.css({ "padding": "0px", "margin": "0px", "list-style": "none", "width": "100px", "position": "absolute", "left": left, "top": top }); $item_group.children().css({ "width": "10px", "height": "10px", "padding": "0px", "margin": "5px", "background": "white", "opacity": "0.6", "border-radius": "5px", "box-shadow": "0 0 5px black", "cursor": "pointer", "float": "left" }); var index = 0; // 初始展示位置 var $items = $(".carousel-items li"); $items.eq(index).css("background", "gray"); /* 按钮点击动作 */ $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) { index = select; } else if(toNext == true) { index = ($imgs.length + index + 1) % $imgs.length; } else if(toNext == false) { index = ($imgs.length + index - 1) % $imgs.length; } $items.css("background", "white"); $items.eq(index).css("background", "grey"); var position = index * -($imgs.outerWidth()); $imgs.parent().animate({ "left": position + "px" }, "fast"); } }
渐变轮播图:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
.carousel { width: 800px; height: 378px; padding: 0px; margin: 0 auto; position: relative; } .carousel-imgs { width: 100%; height: 100%; padding: 0px; margin: 0px; list-style: none; background: white; } .carousel-imgs li { width: 100%; height: 100%; position: absolute; z-index: 0; opacity: 0; } .carousel-imgs a { text-decoration: none; } .carousel-imgs img { width: 100%; height: 100%; } .carousel-btns { width: 100%; z-index: 50; position: absolute; top: 45%; } .carousel-btns button { border: 0px; outline: none; padding: 5px; background: rgba(0, 0, 0, 0.4); text-align: center; color: white; font-size: 34px; font-family: "microsoft yahei"; } .carousel-btns button:hover { background: rgba(0, 0, 0, 0.5); } .carousel-btn-left { float: left; } .carousel-btn-right { float: right; }
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
function carousel(left, top) { /* 获取元素对象 */ var $carousel = $(".carousel"); var $imgs = $(".carousel-imgs li"); var $btnL = $(".carousel-btn-left"); var $btnR = $(".carousel-btn-right"); /* 创建导航按钮 */ var $item_group = $("<ul></ul>"); $item_group.attr("class", "carousel-items"); $imgs.each(function() { $item_group.append("<li></li>"); }); $carousel.append($item_group); /* 样式初始化 */ $item_group.css({ "padding": "0px", "margin": "0px", "list-style": "none", "width": "100px", "z-index": "50", "position": "absolute", "left": left, "top": top }); $item_group.children().css({ "width": "10px", "height": "10px", "padding": "0px", "margin": "5px", "background": "white", "opacity": "0.6", "border-radius": "5px", "box-shadow": "0 0 5px black", "cursor": "pointer", "float": "left" }); /* 初始展示位置 */ var index = 0; var $items = $(".carousel-items li"); $items.eq(index).css("background", "gray"); $imgs.eq(index).css("opacity", "1"); $imgs.eq(index).css("z-index", "20"); /* 按钮点击动作 */ $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) { index = select; } else if(toNext == true) { index = ($imgs.length + index + 1) % $imgs.length; } else if(toNext == false) { index = ($imgs.length + index - 1) % $imgs.length; } $items.css("background", "white"); $items.eq(index).css("background", "grey"); $imgs.eq(index).css("z-index", 20); $imgs.eq(index).animate({ "opacity": "1" }, "slow", function() { $imgs.css("z-index", "0"); $imgs.css("opacity", "0"); $imgs.eq(index).css("z-index", 10); $imgs.eq(index).css("opacity", "1"); }); } }
由于轮播图的效果是依靠JQuery实现的,所以一定要在引入效果之前引入JQuery。
启用效果需要手动初始化,在基本结构之后添加 <script>carousel("10%", "10%");</script> 注册动画效果。
carousel 接受两个参数用于对切换控件进行定位,第一个参数为相对轮播图左侧距离,第二个参数为相对轮播图顶部距离。
=====================轮播示例=====================
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滚动轮播图</title> <style type="text/css"> .carousel { width: 800px; height: 378px; padding: 0px; margin: 0px auto; position: relative; overflow: hidden; } .carousel-imgs { width: 500%; height: 100%; padding: 0px; margin: 0px; list-style: none; position: absolute; } .carousel-imgs li { width: 20%; height: 100%; float: left; } .carousel-imgs a { text-decoration: none; } .carousel-imgs img { width: 100%; height: 100%; } .carousel-btns { width: 100%; position: absolute; top: 45%; } .carousel-btns button { border: 0px; outline: none; padding: 5px; background: rgba(0, 0, 0, 0.4); text-align: center; color: white; font-size: 34px; font-family: "microsoft yahei"; } .carousel-btns button:hover { background: rgba(0, 0, 0, 0.5); } .carousel-btn-left { float: left; } .carousel-btn-right { float: right; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> function carousel(left, top) { /* 获取元素对象 */ var $carousel = $(".carousel"); var $imgs = $(".carousel-imgs li"); var $btnL = $(".carousel-btn-left"); var $btnR = $(".carousel-btn-right"); /* 创建导航按钮 */ var $item_group = $("<ul></ul>"); $item_group.attr("class", "carousel-items"); $imgs.each(function() { $item_group.append("<li></li>"); }); $carousel.append($item_group); /* 样式初始化 */ $item_group.css({ "padding": "0px", "margin": "0px", "list-style": "none", "width": "100px", "position": "absolute", "left": left, "top": top }); $item_group.children().css({ "width": "10px", "height": "10px", "padding": "0px", "margin": "5px", "background": "white", "opacity": "0.6", "border-radius": "5px", "box-shadow": "0 0 5px black", "cursor": "pointer", "float": "left" }); var index = 0; // 初始展示位置 var $items = $(".carousel-items li"); $items.eq(index).css("background", "gray"); /* 按钮点击动作 */ $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) { index = select; } else if(toNext == true) { index = ($imgs.length + index + 1) % $imgs.length; } else if(toNext == false) { index = ($imgs.length + index - 1) % $imgs.length; } $items.css("background", "white"); $items.eq(index).css("background", "grey"); var position = index * -($imgs.outerWidth()); $imgs.parent().animate({ "left": position + "px" }, "fast"); } } </script> </head> <body style="background-color: #424242; padding-top: 100px;"> <div class="carousel" style="width: 800px;height: 378px;"> <ul class="carousel-imgs"> <li> <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/mi5-shenruliaojie.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone-mimax/shenruliaojie.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/note3-shenruliaojie.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3s-shenruliaojie.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3x-shenruliaojie.jpg" alt="" /></a> </li> </ul> <div class="carousel-btns"> <button type="button" class="carousel-btn-left"><</button> <button type="button" class="carousel-btn-right">></button> </div> </div> <script> /* 启用轮播图效果 */ carousel("43%", "71%"); </script> </body> </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>渐变轮播图</title> <style type="text/css"> .carousel { width: 800px; height: 378px; padding: 0px; margin: 0 auto; position: relative; } .carousel-imgs { width: 100%; height: 100%; padding: 0px; margin: 0px; list-style: none; background: white; } .carousel-imgs li { width: 100%; height: 100%; position: absolute; z-index: 0; opacity: 0; } .carousel-imgs a { text-decoration: none; } .carousel-imgs img { width: 100%; height: 100%; } .carousel-btns { width: 100%; z-index: 50; position: absolute; top: 45%; } .carousel-btns button { border: 0px; outline: none; padding: 5px; background: rgba(0, 0, 0, 0.4); text-align: center; color: white; font-size: 34px; font-family: "microsoft yahei"; } .carousel-btns button:hover { background: rgba(0, 0, 0, 0.5); } .carousel-btn-left { float: left; } .carousel-btn-right { float: right; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> function carousel(left, top) { /* 获取元素对象 */ var $carousel = $(".carousel"); var $imgs = $(".carousel-imgs li"); var $btnL = $(".carousel-btn-left"); var $btnR = $(".carousel-btn-right"); /* 创建导航按钮 */ var $item_group = $("<ul></ul>"); $item_group.attr("class", "carousel-items"); $imgs.each(function() { $item_group.append("<li></li>"); }); $carousel.append($item_group); /* 样式初始化 */ $item_group.css({ "padding": "0px", "margin": "0px", "list-style": "none", "width": "100px", "z-index": "50", "position": "absolute", "left": left, "top": top }); $item_group.children().css({ "width": "10px", "height": "10px", "padding": "0px", "margin": "5px", "background": "white", "opacity": "0.6", "border-radius": "5px", "box-shadow": "0 0 5px black", "cursor": "pointer", "float": "left" }); /* 初始展示位置 */ var index = 0; var $items = $(".carousel-items li"); $items.eq(index).css("background", "gray"); $imgs.eq(index).css("opacity", "1"); $imgs.eq(index).css("z-index", "20"); /* 按钮点击动作 */ $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) { index = select; } else if(toNext == true) { index = ($imgs.length + index + 1) % $imgs.length; } else if(toNext == false) { index = ($imgs.length + index - 1) % $imgs.length; } $items.css("background", "white"); $items.eq(index).css("background", "grey"); $imgs.eq(index).css("z-index", 20); $imgs.eq(index).animate({ "opacity": "1" }, "slow", function() { $imgs.css("z-index", "0"); $imgs.css("opacity", "0"); $imgs.eq(index).css("z-index", 10); $imgs.eq(index).css("opacity", "1"); }); } } </script> </head> <body style="background-color: #424242; padding-top: 100px;"> <div class="carousel" style="width: 800px;height: 378px;"> <ul class="carousel-imgs"> <li> <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/mi5-shenruliaojie.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone-mimax/shenruliaojie.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/note3-shenruliaojie.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3s-shenruliaojie.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3x-shenruliaojie.jpg" alt="" /></a> </li> </ul> <div class="carousel-btns"> <button type="button" class="carousel-btn-left"><</button> <button type="button" class="carousel-btn-right">></button> </div> </div> <script> /* 启用轮播图效果 */ carousel("43%", "71%"); </script> </body> </html>