**
HTML部分：
<div id="box">
<ul id="banner">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
CSS部分：
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 280px;
margin: 100px auto 0px;
background-color: red;
overflow: hidden;
}
ul{
width: 560px;
overflow: hidden;
}
ul li{
width: 60px;
height: 200px;
margin-right: 10px;
background-color: purple;
list-style: none;
float: left;
line-height: 200px;
font-size: 30px;
text-align: center;
}
</style>
JS部分：
<script>
$(function(){
var str=$("#banner").html();// 复制结构
$("#banner").html(str+str);
$("#banner").width($("#banner li").length*70);
var index=0;//启动定时器
function moveChange(){
index++;
if(index>560){//走完一组图片时，将ul拉回0的位置
$("#banner").css("marginLeft",0+"px");
index=0;
}
$("#banner").css("marginLeft",-index+"px");
}
var t=setInterval(moveChange,30)
})
</script>
var str=$("#banner").html();// 复制结构 $("#banner").html(str+str);
2. 第二种轮播图（普通轮播图）
结构样式与第二种一样
$(function(){
$("#left").click(function(){
// 如何判断一个元素是否在执行动画，如果在执行动画返回true，没有在执行，返回false
// console.log($("#banner").is(":animated"))
if(!$("#banner").is(":animated")){
$("#banner li").last().prependTo($("#banner"))// 需要将变过来的第一个li藏出去
$("#banner").css("marginLeft","-70px")
$("#banner").animate({
"marginLeft":0
},600)
}
})
$("#right").click(function(){
if(!$("#banner").is(":animated")){
$("#banner").animate({
"marginLeft":-70+"px"
},600,function(){
$("#banner li").first().appendTo($("#banner"))
$("#banner").css("marginLeft",0)
})
}
})
})
如何判断一个元素是否在执行动画
if(!执行动画的元素.is(":animated")){
执行的动画 (代码块)
}
第三种 无缝滚动轮播图 详见英雄联盟官网
HTML部分：
<div class="wrap">
<ul class="pics">
<li>
<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/4/19/16a33713f3c5d7bc~tplv-t2oaga2asx-image.image">
</li>
<li>
<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/4/19/16a33713f2950b03~tplv-t2oaga2asx-image.image">
</li>
<li>
<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/4/19/16a33713f2dd8a06~tplv-t2oaga2asx-image.image">
</li>
<li>
<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/4/19/16a33713f40428d0~tplv-t2oaga2asx-image.image">
</li>
<li>
<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/4/19/16a33713f41dc215~tplv-t2oaga2asx-image.image">
</li>
</ul>
<ul class="picNav">
<li class="active">魔影秘藏</li>
<li>七周年15点直播</li>
<li>7周年战斗之夜</li>
<li>西部魔影全新皮肤</li>
<li>玉剑传说限时销售</li>
</ul>
<span class="picLeft"><</span>
<span class="picRight">></span>
</div>
CSS部分：
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
width: 780px;
height: 380px;
overflow: hidden;
position: relative;
}
.wrap .pics li{
width:780px;
float: left;
list-style: none;
}
.wrap .pics li img{
display: block;
}
.wrap .pics{
width: 3900px;
}
.wrap .picNav li{
width: 156px;
height: 50px;
float: left;
list-style: none;
background-color: black;
color: white;
line-height: 50px;
text-align: center;
cursor: pointer;
}
.wrap .picNav .active{
background-color: red;
color:blue;
}
.wrap span{
width: 50px;
height: 50px;
background-color: #ccc;
position: absolute;
left: 0;
top:137px;
font-size: 40px;
border-radius: 50%;
text-align: center;
line-height: 50px;
opacity: 0.4;
cursor: pointer;
}
.wrap .picRight{
left: 730px;
}
</style>
JS部分：
<script>
$(function(){
function moveUl(index){ //移动ul的函数
$(".pics").stop().animate({
"marginLeft":-780*index+"px"
},200)
}
function activeLi(index){//选中li的函数
$(".picNav li").eq(index).addClass("active").siblings().removeClass("active")
}
$(".picNav").find("li").mouseenter(function(){
index=$(this).index()
activeLi(index)
moveUl(index)
})
var index=0;
$(".picLeft").click(function(){
index==0?index=4:index++;
moveUl(index)
activeLi(index)
})
$(".picRight").click(function(){
index==4?index=0:index--
moveUl(index)
activeLi(index)
}
})
</script>
第四种(淘宝网)
HTML部分：
<div class="wrap">
<ul class="pics">
<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>
<li>
<img src="img/5.jpg" alt="">
</li>
<li>
<img src="img/1.jpg" alt=""> 复制第一张
</li>
</ul>
<ul class="picNav">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span class="picLeft"><</span>
<span class="picRight">></span>
</div>
CSS部分：
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.wrap{
width: 520px;
height: 280px;
margin: 100px auto 0px;
position: relative;
overflow: hidden;
}
.wrap .pics{
width: 3120px;
overflow: hidden;
}
.wrap .pics li{
width: 520px;
height: 280px;
float: left;
}
.picNav{
width: 70px;
height: 13px;
border-radius: 10px;
background-color: #cccccc;
position: absolute;
bottom: 0px;
left: 200px;
}
.picNav li{
width: 8px;
height: 8px;
background-color: white;
border-radius: 50%;
float: left;
margin: 3px;
cursor: pointer;
}
.picNav .active{
background-color: red;
}
.wrap span{
position: absolute;
top: 120px;
display: block;
width: 30px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 30px;
color: white;
background-color: black;
cursor: pointer;
display: none;
opacity: 0.5;
}
.wrap:hover span{
display: block;
}
.wrap span:hover{
opacity: 0.7;
}
.wrap .picLeft{
left: 0px;
border-radius: 0px 25px 25px 0px;
}
.wrap .picRight{
right: 0px;
border-radius: 25px 0px 0px 25px;
}
</style>
JS部分：
<script>
$(function(){
var index=0;
//轮播图导航的逻辑
$(".picNav").find("li").click(function(){
if(index==5){ //当在第5张图片的时候，瞬间回到第一张，解决bug
$(".pics").css("marginLeft",0)
}
index=$(this).index()
$(this).addClass("active").siblings().removeClass("active")
$(".pics").stop().animate({
"marginLeft":-520*index+"px"
},200)
})
//左按钮
$(".picLeft").click(function(){
if(index==0){
$(".pics").css("marginLeft",-2600+"px")
index=4
}else{
index--
}
$(".pics").stop().animate({
"marginLeft":-520*index+"px"
},200)
$(".picNav li").eq(index).addClass("active").siblings().removeClass("active")
})
//右按钮
$(".picRight").click(function(){
if(index==5){
$(".pics").css("marginLeft",0)
index=1
}else{
index++
}
$(".pics").stop().animate({
"marginLeft":-520*index+"px"
},200)
if(index==5){
$(".picNav li").eq(0).addClass("active").siblings().removeClass("active")
}else{
$(".picNav li").eq(index).addClass("active").siblings().removeClass("active")
}
})
})
</script>
淘宝轮播图插件封装
$(function(){
$.fn.slide=function(options){
var defaults={
"bannerNavLi":".bannerNavLi",//导航按钮
"event":"click",// 事件类型
"bannerNavSelected":"active",// 控制导航按钮li的样式的类名
"leftButton":".bannerLeft",// 左按钮
"rightButton":".bannerRight",// 右按钮
"index":0,//默认显示第几张图片
"bannerName":".banner"// 放几张图片的那个框
}
var settings=$.extend(defaults,options)
this.each(function(){
var that=$(this)
var index=settings.index;
var imgWidth=that.find(settings.bannerName+" "+"img").width();
var length=that.find(settings.bannerNavLi).length
$(this).find(settings.bannerNavLi).on(settings.event,function(){
if(index==length){// 这里的index是是外部的index，不是内部的，
that.find(settings.bannerName).css("marginLeft",0)
}
var index1=$(this).index();// 注意这个这个名字
$(this).addClass(settings.bannerNavSelected).siblings().removeClass(settings.bannerNavSelected)
that.find(settings.bannerName).stop().animate({
"marginLeft":-index1*imgWidth+"px"
},200)
})
$(this).find(settings.leftButton).click(function(){
if(index==0){
that.find(settings.bannerName).css("marginLeft",-length*imgWidth+"px")
index=length-1;
}else{
index--
}
that.find(settings.bannerNavLi).eq(index).addClass(settings.bannerNavSelected).siblings().removeClass(settings.bannerNavSelected)
that.find(settings.bannerName).stop().animate({
"marginLeft":-index*imgWidth+"px"
},200)
})
$(this).find(settings.rightButton).click(function(){
if(index==length){
that.find(settings.bannerName).css("marginLeft",0)
index=1
}else{
index++
}
if(index==length){
that.find(settings.bannerNavLi).eq(0).addClass(settings.bannerNavSelected).siblings().removeClass(settings.bannerNavSelected)
}else{
that.find(settings.bannerNavLi).eq(index).addClass(settings.bannerNavSelected).siblings().removeClass(settings.bannerNavSelected)
}
that.find(settings.bannerName).stop().animate({
"marginLeft":-index*imgWidth+"px"
},200)
})
})
}
})
Tab选项卡
// 使用说明
// 选项卡封装成插件(.tab)
//默认事件为点击事件 默认导航类名为bannerLi
// 默认导航选中的类名为active
// 默认div的类名为 contentDiv
// 如果想更改，清传入
// { // event:"事件名称",
// banner:".导航类名",
// bannerSelected:"导航的选中类名",
// content:".显示区域div的名称（类名）"
// }
$(function(){
$.fn.tab=function(options){//option是传入的参数
var defaults={//defaults是默认的参数
"event":"click",
"banner":".bannerLi",
"bannerSelected":"active",
"content":".contentDiv",
"bgcolor":"red"
}
var settings=$.extend(defaults,options)//settings是整合后的参数
this.each(function(){
var that=$(this)
$(this).find(settings.banner).on(settings.event,function(){
var index=$(this).index()
$(this).css("background-color",settings.bgcolor).siblings().css("background-color","")
$(this).addClass(settings.bannerSelected).siblings().removeClass(settings.bannerSelected)
that.find(settings.content).eq(index).show().siblings().hide()
})
})
}
})
**
