1.Bootstrap实现
包含的文件
HTML代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta charset="UTF-8"> <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"> <!--����IE�����--> <meta name="viewport" content="width=device-width,initial-scale=1"> <!----> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <link type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <script src="jquery-2.2.3.min.js"></script> <script src="bootstrap.min.js"></script> <style> #myCarousel{ width:600px; } </style> </head> <body> <br/> <div class="container" id="myCarousel"> <div id="carousel-example-generic" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li> <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="1.jpg"> <div class="carousel-caption"> <h3>我的</h3> <p>今天晚上能看见星星</p> </div> </div> <div class="item "> <img src="2.jpg"> </div> <div class="item "> <img src="3.jpg"> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> <script> $(".carousel").carousel({ interval:2000 }) </script> </body> </html>
2. JS实现
包含的文件
HTML代码：
<header class="jumbotron"> <img src="17.png" class="image" id="imageId"> <p class="lead">第一张</p> <p><a class="btn btn-lg btn-default btn-getting-stared" role="button" id="next">下一张</a></p> </header>
JS代码：
$(document).ready(function(){ var imageArray = new Array(); var imageNumber = 1; imageArray = ["17.png","19.png","20.png",]; $("#next").click(function(){ imageNumber++; if(imageNumber == 4){ imageNumber = 1; } switch (imageNumber) { case 1 : $("#imageId").attr("src",imageArray[0]); $(".lead").html("我是第一张") break; case 2 : $("#imageId").attr("src",imageArray[1]); $(".lead").html("我是第二张") break; case 3 : $("#imageId").attr("src",imageArray[2]); $(".lead").html("我是第三张") break; default: } }) })
3，js实现的另一种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ width: 600px; height: 750px; position: relative; margin:30px auto 0; overflow: hidden; } #box{ width: 600px; height: 750px; position: absolute; top: 0px; left: 0px; overflow: hidden; /*overflow-x:auto;*/ } #box #con{ width: 6000px; height: 750px; overflow: hidden; } #con img{ float: left; width: 600px; height: 750px; } #btnL{ position: absolute; left: 0px; top: 366px; width: 36px; height: 36px; background: url(images/btnL.png) 0 0 no-repeat; cursor: pointer; } #btnR{ position: absolute; right: 0px; top: 366px; width: 36px; height: 36px; background: url(images/btnR.png) 0 0 no-repeat; cursor: pointer; } #num{ position: absolute; bottom: 10px; left: 148px; overflow: hidden; list-style: none; } #num li{ float: left; margin:0 5px; font-size: 16px; line-height: 25px; height: 25px; width: 25px; background: #ccc; text-align: center; cursor: pointer; } #num li.select{ background-color: green; color: white; } </style> </head> <body> <div class="warp"> <div id="box"> <div id="con"> <img src="images/1.jpg" alt=""> <img src="images/2.jpg" alt=""> <img src="images/3.jpg" alt=""> <img src="images/4.jpg" alt=""> <img src="images/5.png" alt=""> <img src="images/6.png" alt=""> </div> </div> <div id="btnL"></div> <div id="btnR"></div> <ul id="num"> <li class="select">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> <script> var box=document.getElementById('box'); var con=document.getElementById('con'); var imgs=con.getElementsByTagName('img'); var btnL=document.getElementById('btnL'); var btnR=document.getElementById('btnR'); var num=document.getElementById('num'); var lis=num.getElementsByTagName('li'); var timer1=null,timer2=null; var imgw=imgs[0].clientWidth; var x=0; function imgScroll(){//图片切换 var start=box.scrollLeft; var end=imgw*x; var change=end-start; var minstep=0; var maxstep=30; var stepLength=change/maxstep; clearInterval(timer2); timer2=setInterval(function(){ minstep++; // console.log(minstep); if (minstep>=maxstep) { clearInterval(timer2); } start+=stepLength; box.scrollLeft=start; },20) for (var i = 0; i < lis.length; i++) { lis[i].className='none'; } lis[x].className='select'; } function move(){//默认向左每隔3s滚动 clearInterval(timer1); timer1=setInterval(function(){ x++; if (x>=imgs.length) { x=0; } imgScroll(); for (var i = 0; i < lis.length; i++) { lis[i].className='none'; lis[x].className='select'; } },3000); } move();//启动默认滚动函数； btnR.onclick=function(){ clearInterval(timer1); x++; if (x>=imgs.length) { x=0; } imgScroll(); move(); } btnL.onclick=function(){ clearInterval(timer1); x--; if (x<0) { x=imgs.length-1; } imgScroll(); move(); } for (var i = 0; i < lis.length; i++) { lis[i].index=i; lis[i].onclick=function(){ x=this.index; imgScroll(); move(); } } </script> </body> </html>
4，无缝滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动2</title> <style> #warp{ width: 1250px; height: 300px; overflow: hidden; margin:100px auto 0; overflow-x: auto; } #warp #con{ width: 4000px; height: 300px; overflow: hidden; } #warp #con #box1{ float: left; overflow: hidden; } #warp #con #box2{ float: left; overflow: hidden; } #warp img{ float: left; margin-right: 10px; width: 200px; height: 300px; } .btn{ text-align: center; margin-top: 10px; } .btn button{ font-size: 16px; } </style> </head> <body> <div id="warp"> <div id="con"> <div id="box1"> <img src="images/1.jpg" alt=""> <img src="images/2.jpg" alt=""> <img src="images/3.jpg" alt=""> <img src="images/4.jpg" alt=""> <img src="images/5.png" alt=""> <img src="images/6.png" alt=""> </div> <div id="box2"></div> </div> </div> <div class="btn"> <button id="scrollL"><<左滚</button> <button id="scrollR">右滚>></button> </div> <script> var warp=document.getElementById('warp'); var con=document.getElementById('con'); var box1=document.getElementById('box1'); var box2=document.getElementById('box2'); var img=box1.getElementsByTagName('img')[0]; var scrollL=document.getElementById('scrollL'); var scrollR=document.getElementById('scrollR'); var timer1=null,timer2=null,flage=1; box2.innerHTML=box1.innerHTML; max=box1.clientWidth; imgmax=img.clientWidth+10; function scrollLeft(){ flage=1; clearInterval(timer1); timer1=setInterval(function(){ warp.scrollLeft++; if (warp.scrollLeft>=max) { warp.scrollLeft=0; } if(warp.scrollLeft%imgmax==0){ clearInterval(timer1); clearTimeout(timer2); timer2=setTimeout(function(){ timer1=setInterval(scrollLeft,5) },2000) } },5) } function scrollRight(){ flage=0; clearInterval(timer1); timer1=setInterval(function(){ warp.scrollLeft--; if (warp.scrollLeft<=0) { warp.scrollLeft=max; } if(warp.scrollLeft%imgmax==0){ clearInterval(timer1); clearTimeout(timer2); timer2=setTimeout(function(){ timer1=setInterval(scrollRight,5) },2000) } },5) } scrollLeft(); scrollL.onclick=function(){ // clearInterval(timer1); // clearTimeout(timer2); // scrollLeft(); scrollRight(); } scrollR.onclick=function(){ // clearInterval(timer1); // clearTimeout(timer2); // scrollRight(); scrollLeft(); } warp.onmouseenter=function(){ clearInterval(timer1); clearTimeout(timer2); } warp.onmouseleave=function(){ clearInterval(timer1); clearTimeout(timer2); console.log(flage); if (flage) {scrollLeft();} else{scrollRight();} } </script> </body> </html>