PC端轮播图
1. 第一种轮播图（自动慢慢滑动，多用于展示）
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)
})
}
})
})
复制代码-
如何判断一个元素是否在执行动画，如果在执行动画返回true，没有在执行，返回false
3. 第三种轮播图 （无缝滚动）
HTML部分：
<div class="wrap">
<ul class="pics">
<li>
<img src="http://ossweb-img.qq.com/upload/adw/image/20180907/f5f977d8fb73c74b95cea639287731a8.jpg">
</li>
<li>
<img src="http://ossweb-img.qq.com/upload/adw/image/20180913/be03a5d0ebe5d46c4ff8ca7c5bdbde0b.jpg">
</li>
<li>
<img src="http://ossweb-img.qq.com/upload/adw/image/20180907/d50b8d9c637b31b7a126f7a6ad567bba.jpg">
</li>
<li>
<img src="http://ossweb-img.qq.com/upload/adw/image/20180911/d0c78c8cf0ea007281572a6da71e7dc6.jpg">
</li>
<li>
<img src="http://ossweb-img.qq.com/upload/adw/image/20180913/e4dc5d051d9ca0ef4c99d62cec0b4612.jpg">
</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>
复制代码4. 第四种轮播图（淘宝无缝滚动）
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(){
function moveUl(index){//移动整个ul的函数
$(".pics").stop().animate({
"marginLeft":-index*520+"px"
},200)
}
function activeLi(index){//选中li的函数
$(".picNav li").eq(index).addClass("active").siblings().removeClass("active")
}
//轮播图导航的逻辑
var index=0;
$(".picNav").find("li").click(function(){
if(index==5){
$(".pics").css("marginLeft",0)
}
index=$(this).index()
$(this).addClass("active").siblings().removeClass("active")
moveUl(index)
})
//左按钮的实现
$(".picLeft").click(function(){
if(index==0){
$(".pics").css("marginLeft",-2600+"px")
index=4;
}else{
index--;
}
moveUl(index)
activeLi(index)
})
//右按钮的实现
$(".picRight").click(function(){
if(index==5){
$(".pics").css("marginLeft",0)
index=1;
}else{
index++;
}
moveUl(index)
if(index==5){
activeLi(0)
}else{
activeLi(index)
}
})
})复制代码淘宝无缝滚动轮播图插件的封装( slide.js)
$(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.js)
// 使用说明
// 选项卡封装成插件(.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()
})
})
}
})复制代码移动端轮播图
触摸式轮播图
需求：1. 每一个图片的宽度；2. 当前图片的索引值；3. clientX
步骤：
1.当手指按下时，记录手指按下时的坐标,并且锁定方向
2.当手指移动时，计算手指移动的距离，并让对应的ul跟着手指的距离移动
3.当手指离开时，如果移动的距离大于一定范围时，进行换图（通过图片对应的索引值）
CSS ：
<style>
*{
margin: 0;
padding: 0;
}
.banner{
width: 3.75rem;
height: 1.2rem;
background-color: red;
overflow: hidden;
}
.banner ul{
width: 15rem;
height: 1.2rem;
display: flex;
}
.banner ul li{
list-style: none;
flex: 1;
height: 1.2rem;
}
.banner ul li:first-child{
background-color: orange;
}
.banner ul li:nth-child(2){
background-color: blue;
}
.banner ul li:nth-child(3){
background-color: green;
}
.banner ul li:nth-child(4){
background-color: blueviolet;
}
</style>复制代码HTML :
<div class="banner">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>复制代码JS :
window.onload=function(){
var banner=document.querySelector(".banner");
var bannerUl=banner.querySelector("ul");
var bannerUlLi=bannerUl.querySelector("li");
var index=0;
banner.addEventListener("touchstart",function(e){
// 1.当手指按下时，记录手指按下时的坐标，并且锁定方向
var x=e.targetTouches[0].clientX;
var y=e.targetTouches[0].clientY;
var dir="";
var distance;
function fnMove(e){
var divX=e.targetTouches[0].clientX;
var divY=e.targetTouches[0].clientY;
if(dir==""){// 此处判定dir是否为空，是为了锁定方向(一次点击判定一次方向)
if(Math.abs(divX-x)>5){
dir="0";//水平方向
}else if(Math.abs(divY-y)>5){
dir="1";// 垂直方向
}
}else{
if(dir=="0"){
distance=divX-x;// 当前手指移动的距离
var num=-index*bannerUlLi.offsetWidth+distance;
bannerUl.style.transition="none";
bannerUl.style.transform="translate("+num+"px)";
}
}
}
function fnEnd(){
if(distance<-50){
index==3 ? index=3:index++;
}else if(distance>50){
index==0 ? index=0:index--;
}
bannerUl.style.transform="translate("+-index*bannerUlLi.offsetWidth+"px)";
bannerUl.style.transition="all 1s";
banner.removeEventListener("touchmove",fnMove);
banner.removeEventListener("touchend",fnEnd);
}
banner.addEventListener("touchmove",fnMove,false);
banner.addEventListener("touchend",fnEnd,false);
},false)
}复制代码楼梯导航
HTML：
<ul class="nav">
<li class="navLi">1F</li>
<li class="navLi">2F</li>
<li class="navLi">3F</li>
<li class="navLi">4F</li>
<li class="navLi">5F</li>
<li class="navLi">6F</li>
<li class="navLi">7F</li>
<li class="toTop">置顶</li>
</ul>
<div class="header">我是header</div>
<div class="main">
<div class="stair one">女装</div>
<div class="stair two">鞋靴</div>
<div class="stair three">童装玩具</div>
<div class="stair four">家电</div>
<div class="stair five">美妆</div>
<div class="stair six">珠宝</div>
<div class="stair seven">百货</div>
</div>
CSS：
<style>
*{
margin: 0;
padding: 0;
}
.nav{
/* 绝对定位，相对于浏览器窗口进行定位 */
position: fixed;
top: 100px;
left: 20px;
display: none;
}
ul li{
width: 50px;
height: 50px;
border: 3px solid #aaaaaa;
border-bottom: none;
line-height: 50px;
text-align: center;
background-color: rgb(255, 174, 127);
font-size: 30px;
cursor: pointer;
list-style: none;
opacity: .6;
}
ul li:hover{
background-color: #cccccc;
opacity: .9;
}
ul li:last-child{
border: 3px solid #aaaaaa;
font-size: 25px
}
.header{
width: 100%;
height: 500px;
background-color: red;
font-size: 200px;
text-align: center;
}
.main div{
width: 100%;
height: 800px;
font-size: 100px;
text-align: center;
}
.main .one{
background-color: royalblue;
}
.main .two{
background-color: yellow;
}
.main .three{
background-color: blue;
}
.main .four{
background-color: green;
}
.main .five{
background-color: purple;
}
.main .six{
background-color: orange;
}
.main .seven{
background-color: aquamarine;
}
</style>
JS:
$(function(){
window.onscroll=function(){
// document.documentElement.scrollTop 当前页面的滚动条纵坐标位置
if (document.documentElement.scrollTop>=$(".main").offset().top) {
$(".nav").show()
}else{
$(".nav").hide()
}
}
$(".nav").find(".navLi").click(function(){
var index=$(this).index()
var H=$(".main .stair").eq(index).offset().top;
$("html,body").animate({
"scrollTop":H
},300)
})
$(".toTop").click(function(){
$("html,body").animate({
"scrollTop":0
},200)
})
})
复制代码拖拽
1. 移动端拖拽
HTML:
<div class="box"></div>
CSS:
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
background-color: blue;
}
</style>
JS:
window.onload=function(){
var box=document.querySelector(".box");
box.addEventListener("touchstart",function(e){
var divX=e.targetTouches[0].clientX-box.offsetLeft;
var divY=e.targetTouches[0].clientY-box.offsetTop;
function fnMove(e){
var x=e.targetTouches[0].clientX;
var y=e.targetTouches[0].clientY;
box.style.left=x-divX+"px";
box.style.top=y-divY+"px";
}
box.addEventListener("touchmove",fnMove,false);
box.addEventListener("touchend",function(){
box.removeEventListener("touchmove",fnMove)
},false)
},false)
}
复制代码2. PC端拖拽
window.onload=function(){
box=document.querySelector(".box");
box.addEventListener("mousedown",function(e){
var e=e||window.event;
var divX=e.clientX-box.offsetLeft;
var divY=e.clientY-box.offsetTop;
function fnMove(e){
var x=e.clientX;
var y=e.clientY;
box.style.left=x-divX+"px";
box.style.top=y-divY+"px";
}
function fnEnd(e){
box.removeEventListener("mousemove",fnMove);
box.removeEventListener("mouseup",fnEnd);
}
box.addEventListener("mousemove",fnMove,false);
box.addEventListener("mouseup",fnEnd,false);
},false)
}复制代码
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
