使用前必看:图片换成自己的,样式调成自己喜欢的也可以,一般的项目够用了,如果图片有点多推荐使用插件 swiper
第一种:Bootstrap 无缝轮播版(超级简单版)
特点:无缝轮播、鼠标移入图片暂停
注意:每张图片的宽高要求一致。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap-无缝轮播</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- 白色圆圈 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- 图片和标题 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/1.jpg">
<!--标题不要可省略-->
<div class="carousel-caption">标题1</div>
</div>
<div class="item">
<img src="img/2.jpg">
<!--标题不要可省略-->
<div class="carousel-caption">标题2</div>
</div>
<div class="item">
<img src="img/3.jpg">
<!--标题不要可省略-->
<div class="carousel-caption">标题3</div>
</div>
<div class="item">
<img src="img/4.jpg">
<!--标题不要可省略-->
<div class="carousel-caption">标题4</div>
</div>
</div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
第二种:比较实用的jQuery 有缝轮播版
特点:有缝轮播、鼠标移入图片不暂停
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*通用样式*/
html,body{
font: 12px 'microsoft yahei',arial,'SimSun',Tabhoma;
text-align: left;
}
html,body,h1,h2,h3,h4,h5,h6,
div,p,dl,dt,dd,ol,ul,li,
table,th,td,tr,caption,
a,img,span,strong,var,em,small,
i,sub,sup,form,input,textarea,
select,option,iframe,pre{
margin: 0;
padding: 0;
}
ul,ol,li{
list-style: none;
}
img{
border: 0;
}
input,select,textarea{
outline:0;
}
textarea{
resize:none;
overflow: auto;
}
table{
border-collapse: collapse;
border-spacing: 0;
}
th,strong,var,em,i,small{
font-weight: normal;
font-style: normal;
}
a{
text-decoration: none;
}
/*公共样式*/
.roll,#out,#out2,.con img{
width:870px;
height:255px;
}
.roll{
position: relative;
margin:20px auto 0;
}
#out,#out2,.con,.nav{
overflow:hidden;
}
/*其它样式*/
.con{
width: 8000px;
height: 255px;
}
.con img{
float: left;
}
.nav{
position: absolute;
bottom: 5px;
left: 45%;
}
.nav li{
width: 16px;
height: 16px;
border-radius: 50%;
background: #B9D4C8;
margin: 0 5px;
float: left;
cursor: pointer;
}
.left,.right{
position: absolute;
top:120px;
left:0;
width: 30px;
height: 40px;
font-size: 30px;
text-align: center;
line-height: 40px;
color:#fff;
background: #000;
cursor: pointer;
opacity:0.5;
display: none;
}
.right{
position: absolute;
top:120px;
left:840px;
}
#out:hover .left,#out:hover .right{
display: block;
}
.nav .select{
background: #5CB85C;
}
</style>
</head>
<body>
<!-- 最外层包裹元素,用来控制整个大图的位置以及作为子元素定位的参考 -->
<div class="roll">
<div id="out">
<!-- 包裹图片,宽要比所有图片的总宽大, -->
<div class="con">
<!--<img src="img/4.jpg"/>-->
<img src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/4.jpg"/>
<img src="img/4.jpg"/>
<!--<img src="img/1.jpg"/>-->
</div>
<!-- 放page小圆点 定位控制 z-index比图片大-->
<ul class="nav">
<li class="select"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 左右键 定位控制 z-index比图片大-->
<p class="left"><</p>
<p class="right">></p>
</div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$.fn.extend({
datu:function(){ //封装大图滚动函数
var obj=$(this); //先获取这个对象
var fir=obj.find('.con img:first').clone(); //克隆第一张图
var las=obj.find('.con img:last').clone(); //克隆最后一张图
obj.find('.con').append(fir); //最后面插入克隆的第一张图
obj.find('.con').prepend(las); //最前面插入克隆的最后一张图
var imgw=Math.floor(obj.find('.con img').width()); //获取一张图的宽度
var out=obj.find('#out'); //获取元素目标
out.scrollLeft(imgw); //初始化到起点
var x=1,y=0; //图多一步故为1(相比page,中间底部的小圆点)
var time1=null; //声明变量
var img=obj.find('.con img'),li=obj.find('.nav li'); //一次性获取元素,优化性能
var left=obj.find('.left'),right=obj.find('.right'); //一次性获取元素,优化性能
function huan(){ //换一张图函数
clearInterval(time1); //先清除计时器
time1=setInterval(function(){
x++;
if(x==img.length){
x=2;//跳到第二张
out.scrollLeft(imgw);//滚动条归零
}
y++;
if(y==li.length){//小圆点走自己的一套
y=0;
}
bian(); //执行滚动函数
},8000) //控制大图滚动的时间节奏
}
function bian(){ //一张图走完的过程函数
li.eq(y).addClass('select').siblings().removeClass('select'); //小圆点走自己的一套
out.animate({scrollLeft:imgw*x}); //jq的动画控制滚动条,这里是x而不是x-1,是因为:
// 0 ——> 1,1 ——> 2,2 ——> 3 的顺序,在前一次的基础上再走
// 这里用animate动画就可以自己添加其他效果了
}
left.click(function(){ //左点击
clearInterval(time1); //先清除计时器
x--;
if(x<0){
x=img.length-3;//length减去本身比x(从0开始)多的1,再减去新增的最后的那张1,再减去要跳到倒数第二张产生的1,共为3
out.scrollLeft(imgw*(x+1),10);//滚动条加1是因为(出现第x张,还要注意插入到最前面的那一张x=5,则滚的是6张图的距离)
}
y--;
if(y<0){
y=li.length-1;// y一直减到最左边时,再点击再减就要跳到最右边 0 1 2 3 length为4,下标为3,故 li.length-1;
}
bian() //一张图走完的过程函数
huan() //换一张图函数
})
right.click(function(){ //右点击
clearInterval(time1); //先清除计时器
x++;
if(x==img.length){
x=2;
out.scrollLeft(imgw);
}
y++;
if(y==li.length){
y=0;
}
bian() //一张图走完的过程函数
huan() //换一张图函数
})
li.click(function(){ //page小圆点onmouseover事件
clearInterval(time1); //先清除计时器
y=$(this).index(); //y管y的
x=y+1; //y为1时,看到的是第一张图,实际上前面还有一张图 ——>此时 x=y+1=1+1=2,
bian() //一张图走完的过程函数
huan() //换一张图函数
})
huan(); //自动执行,进页面就开始滚
}
})
$(function(){
$('.roll').datu(); //封装完毕 使用时只更换roll 标签即可 $('.roll2').datu();
})
// 样式自己调成想要的,其他复制即可。
</script>
</body>
</html>
第三种:底部有缝轮播(适用于小图片循环轮播)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap-无缝轮播</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
img{
width: 200px;
height: 130px;
}
#div1 {
width:1200px;
height:130px;
margin: 0 auto;
position:relative;
overflow:hidden;
}
#div1 ul {
position:absolute;
left:0;
top:0;
}
#div1 ul li {
float:left;
list-style:none;
}
#a{
width: 1200px;
margin: 0 auto;
margin-top:100px;
}
#a a{
display: inline-block;
width: 33.1%;
text-decoration: none;
padding: 5px;
background: #d2620b;
color: #fff;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="a">
<--javascript:void(0):代表a标签不做任何动作-->
<a href="javascript:void(0)" id="id1"><</a>
<a href="javascript:void(0)" id="id3">||</a>
<a href="javascript:void(0)" id="id2">></a>
</div>
<div id="div1">
<ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
</ul>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
var oUl=document.getElementsByTagName("ul")[0];
var oLi=document.getElementsByTagName("li");
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=oLi[0].offsetWidth*oLi.length+"px";
//移动速度
var speed=2;
//控制滚动的方向
var a1=document.getElementById("id1");
var a2=document.getElementById("id2");
var a3=document.getElementById("id3");
a1.onclick=function(){
speed=2;
}
a2.onclick=function(){
speed=-2;
}
a3.onclick=function(){
speed=0;
}
//鼠标移开
function move(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left="0";
}
if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+"px";
}
oUl.style.left=oUl.offsetLeft-speed+"px";
}
//定时器 控制移动的时间
var timer=setInterval(move,30);
//鼠标移入
oDiv.onmouseover=function(){
clearInterval(timer);
}
//鼠标移开
oDiv.onmouseout=function(){
timer=setInterval(move,30);
}
}
</script>
</body>
</html>
第四种:jQuery+CSS 无缝轮播版—简单易懂
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.bg{
background: #fff;
}
ol,ul{
list-style: none;
}
#play{
width: 1200px;
height:532px;
position: relative;
overflow: hidden;
margin: 5% auto }
#play #ul{
position: absolute;
}
#play #ul li{
float: left;
}
#play #ul li img{
width: 1200px;
height:532px;
}
#play #ol{
width:100px;
position: absolute;
top:500px;left:550px;
}
#play #ol li{
width: 15px;
height: 15px;
border-radius: 50%;
float: left;
margin: 3px;
border:1px solid #fff;
cursor: pointer }
#play #prev,#play #next{
display:none;
border:none;
position: absolute;
top:250px;
width:30px;
font-size: 40px;
background:rgba(0,0,0,0.5);
cursor: pointer }
#play #prev{
left:15px;
}
#play #next{
right:15px;
}
</style>
</head>
<body>
<div id="play">
<ul id="ul">
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
</ul>
<ol id="ol">
<li class="bg"></li>
<li></li>
<li></li>
<li></li>
</ol>
<button id="prev"><</button>
<button id="next">></button>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
// 获取第一个图片 节点对象
var firstImg = $('#ul li').first().clone();
// 放在 ul 的最后
$('#ul').append(firstImg).width($('#ul li').length*$('#ul img').width());
var i = 0;
var timer;
autoPlay();
// 下一张
$('#next').click(function(){
i++;
moveImg(i);
});
// 上一张
$('#prev').click(function(){
i--;
moveImg(i);
});
// 自动播放
function autoPlay(){
timer = setInterval(function(){
i++;
moveImg(i);
}, 5000);
}
//操作图片
function moveImg(num){
// 如果是最后一张图片我们怎么办
if(i==$('#ul li').length){
i = 1;
$('#ul').css({left:0});
}
// 是第一张
if(i==-1){
i=$('#ul li').length-2;
$('#ul').css({left:($('#ul li').length-1)*-800});
}
// 移动图片
$('#ul').stop().animate({left:i*-1200},400);
// 换小点的标记
if(i==($('#ul li').length-1)){
$('#ol li').eq(0).addClass('bg').siblings().removeClass('bg');
}else{
$('#ol li').eq(i).addClass('bg').siblings().removeClass('bg');
}
}
//鼠标移入图片显示左右按钮 反之
$('#play').mouseover(function(){
$('#prev').show();
$('#next').show();
clearInterval(timer);
}).mouseout(function(){
$('#prev').hide();
$('#next').hide();
autoPlay();
});
// 点击小图标 跳转到指定的页面
$('#ol li').click(function(){
i = $(this).index();
moveImg(i);
});
</script>
</body>
</html>