一、最简单不可控的大图轮播（原生js）
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> * { margin: 0px; padding: 0px; cursor: pointer; } .lb1 { 100%; height: 100%; } </style> <script type="text/javascript"> window.onload = function () { var images = document.getElementsByClassName('lb1'); var pos = 0; var len = images.length; setInterval(function () { images[pos].style.display = 'none'; pos = ++pos == len ? 0 : pos; images[pos].style.display = 'inline'; }, 2000); }; </script> </head> <body> <div style=" 500px; height: 400px; overflow: hidden; margin: 100px 400px;"> <img class="lb1" src="imgs/妖13.jpg" /> <img class="lb1" src="imgs/妖15.jpg" /> <img class="lb1" src="imgs/妖18.jpg" /> </div> </body> </html>
二、简单大图轮播（ul+ol）
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="css/hp.css" rel="stylesheet" /> <script src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#box ol li").click(function () { var index = $(this).index();//获取当前ol li的索引值 $("#box ul li").eq(index).fadeIn().siblings().hide(); $(this).addClass('current').siblings().removeClass('current'); }); }); </script> </head> <body> <div id="box"> <ul> <li> <img src="imgs/妖13.jpg" /></li> <li> <img src="imgs/妖15.jpg" /></li> <li> <img src="imgs/妖18.jpg" /></li> </ul> <ol> <li class="current">1</li> <li>2</li> <li>3</li> </ol> </div> </body> </html>
css
* { margin: 0px; padding: 0px; cursor: pointer; } ul, ol { list-style: none; } #box { 426px; height: 240px; margin: 100px auto; position: relative; overflow: hidden; } #box ol { position: absolute; right: 10px; bottom: 10px; } #box ol li { float: left; 20px; height: 30px; background-color: #fff; margin: 3px; text-align: center; line-height: 30px; color: #000; cursor: pointer; border: 1px solid #aaa; } #box ol li.current { background-color: #ff0; }
三、大图轮播（带左右箭头，可自动轮播）
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="css/hp2.css" rel="stylesheet" /> <script src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function () { var index = 0; var len = $("#scroll ul li").length - 1;//获取当前li的个数 var timer = null; play(); //左边按钮，前进 $(".left").click(function () { if (index == len) { index = -1; } index++; $("#scroll ul li").eq(index).fadeIn().siblings().hide(); }); //右边按钮，后退 $(".right").click(function () { if (index == 0) { index = len + 1; } index--; $("#scroll ul li").eq(index).fadeIn().siblings().hide(); }); function play() { timer = setInterval(function () { move(); }, 1500); } $("#scroll").hover(function () { clearInterval(timer); }, function () { play(); }); function move() { if (index == len) { index = -1; } index++; $("#scroll ul li").eq(index).fadeIn().siblings().hide(); } }); </script> </head> <body> <div id="scroll"> <img class="left" src="imgs/arrow3.png" /> <img class="right" src="imgs/arrow4.png" /> <ul> <li style="display: block;"> <img src="imgs/妖1.jpg" title="1" /> </li> <li> <img src="imgs/妖9.jpg" title="2" /> </li> <li> <img src="imgs/妖12.jpg" title="3" /> </li> <li> <img src="imgs/妖13.jpg" title="4" /> </li> <li> <img src="imgs/妖14.jpg" title="5" /> </li> <li> <img src="imgs/妖15.jpg" title="6" /> </li> <li> <img src="imgs/妖17.jpg" title="7" /> </li> <li> <img src="imgs/妖18.jpg" title="8" /> </li> </ul> </div> </body> </html>
css
* { margin: 0px; padding: 0px; } #scroll { position: relative; top: 100px; left: 25%; 50%; height: 400px; /*background-color: pink;*/ overflow: hidden; } #scroll ul { height: 100%; position: absolute; left: 0px; top: 0px; } #scroll ul li { list-style-type: none; 100%; height: 400px; float: left; } #scroll ul li img { 100%; height: 100%; } .left, .right { position: absolute; top: 150px; 50px; background-color: white; } .left { left: 8%; } .right { right: 8%; }