PC side rotation diagram
1. The first kind of rotation chart (automatic slow sliding, mostly used for display)
HTML section: <div id="box">
<ul id="banner"1 > < li > < / 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 part: <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> <script> $(function(){
var str=$("#banner").html(); // Copy structure $("#banner").html(str+str);
$("#banner").width($("#banner li").length*70); var index=0; // Start timerfunction moveChange(){
index++;
if(index>560){// When you finish a set of images, pull ul back to 0 $("#banner").css("marginLeft", 0 +"px");
index=0;
}
$("#banner").css("marginLeft",-index+"px");
}
var t=setInterval(moveChange,30)
})
</script>Copy the code-
var str=$("#banner").html(); // Copy structure $("#banner").html(str+str); Copy the code
2. The second kind of rote chart (ordinary rote chart)
The structure is the same as the second one
$(function(){
$("#left").click(function(){// How to tell if an element is animating, and if it is animating returnstrue, not executing, returnfalse
// console.log($("#banner").is(":animated"))
if(! $("#banner").is(":animated")){
$("#banner li").last().prependTo($("#banner"// The first li needs to be hidden away $("#banner").css("marginLeft"."-70px"The $()"#banner").animate({
"marginLeft":0},600)}}) $("#right").click(function() {if(! $("#banner").is(":animated")){
$("#banner").animate({
"marginLeft": - 70 +"px"}, 600,function(){
$("#banner li").first().appendTo($("#banner"The $())"#banner").css("marginLeft",0)})}}))Copy the code-
How do you tell if an element is animating and return true if it is executing and false if it is not executing
3. The third kind of round casting chart (seamless rolling)
HTML section: <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> </li> </li> <span class= "span" style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 13px! Important; word-break: inherit! Important;"picLeft">< </span> <span class="picRight">> </span> </div> CSS section: <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> <script> $(function() {functionMoveUl (index){// moveUl function $(".pics").stop().animate({
"marginLeft":-780*index+"px"}}, 200)functionActiveLi (index){// Select li's function $(".picNav li").eq(index).addClass("active").siblings().removeClass("active"The $()}".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>Copy the code4. The fourth round casting chart (Seamless scrolling on Taobao)
HTML section: <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=""> Copy the first </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> < span 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; Function :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> <script> $(function(){ var index=0; $($();".picNav").find("li").click(function() {if(index==5){// When on the 5th image, go back to the first image, fix bug $(".pics").css("marginLeft",0)
}
index=$(this).index()
$(this).addClass("active").siblings().removeClass("active"The $()".pics").stop().animate({
"marginLeft":-520*index+"px"},200)})".picLeft").click(function() {if(index==0){
$(".pics").css("marginLeft"+ and - 2600"px")
index=4
}else{
index--
}
$(".pics").stop().animate({
"marginLeft":-520*index+"px"}, $(200)".picNav li").eq(index).addClass("active").siblings().removeClass("active"}) // right button $(".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>Copy the codeFunctional encapsulation
$(function() {functionMoveUl (index){// Move the whole ul function $(".pics").stop().animate({
"marginLeft":-index*520+"px"}}, 200)functionActiveLi (index){// Select li's function $(".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)}) // Left button implementation $(".picLeft").click(function() {if(index==0){
$(".pics").css("marginLeft"+ and - 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)
}
})
})Copy the codePackage of Taobao Seamless scroll wheel image plug-in (Slide.js)
$(function(){
$.fn.slide=function(options){
var defaults={
"bannerNavLi":".bannerNavLi"// Navigation button"event":"click"// Event type"bannerNavSelected":"active"// Control navigation button li style class name"leftButton":".bannerLeft", / / the left button"rightButton":".bannerRight", / / right button"index":0,// The default number of images to display"bannerName":".banner"} var Settings =$.extend(defaults,options) this.each($.extend(defaults,options) this.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() {ifSets.find (settings.bannerName).css(settings.bannerName).css(settings.bannerName)"marginLeft",0) } var index1=$(this).index(); / / $(this). Note that this name 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.bannerNav Selected) 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.bannerNavSele cted) }else{ that.find(settings.bannerNavLi).eq(index).addClass(settings.bannerNavSelected).siblings().removeClass(settings.bannerNav Selected) } that.find(settings.bannerName).stop().animate({"marginLeft":-index*imgWidth+"px"},200)})})})Copy the codeTAB TAB plug-in package (tab.js)
// The default event is the click event. The default navigation class is bannerLi. The default navigation class is active. // {// event:"Event Name",
// banner:". Navigation class name",
// bannerSelected:"Navigation selected class name",
// content:". Show the name of the region div (class name)"
// }
$(function(){
$.fn.tab=functionVar defaults={//defaults is the default argument"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()
})
})
}
})Copy the codeMobile terminal rote graph
Touch type round-robin chart
Requirements: 1. Width of each picture; 2. The index value of the current picture; 3. clientX
Steps:
1. When the finger is pressed down, record the coordinates of the finger when it is pressed down and lock the direction
2. When the finger moves, calculate the distance the finger moves, and make the ul move with the distance of the finger
3. When the finger leaves, if the moving distance is greater than a certain range, change the picture (through the corresponding index value of the picture)
CSS:
<style> *{ margin: 0; padding: 0; }. Banner {width: 3.75 rem; Height: 1.2 rem; background-color: red; overflow: hidden; } .banner ul{ width: 15rem; Height: 1.2 rem; display: flex; } .banner ul li{ list-style: none; flex: 1; Height: 1.2 rem; } .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>Copy the codeHTML :
<div class="banner">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>Copy the codeJS :
window.onload=function(){
var banner=document.querySelector(".banner");
var bannerUl=banner.querySelector("ul");
var bannerUlLi=bannerUl.querySelector("li");
var index=0;
banner.addEventListener("touchstart".functionVar x= e.gettouches [0].clientx; (e){// 1. 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==""){// If dir is empty, it is to lock the direction.if(Math.abs(divX-x)>5){
dir="0"; // horizontal}else if(Math.abs(divY-y)>5){
dir="1"; // vertical direction}}else{
if(dir=="0"){ distance=divX-x; Var num=-index* distance; var num=-index* 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)}Copy the codeThe stairs navigation
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"> I'm 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"> Jewelry </div> <div class="stair seven"> </div> </div> CSS: <style> *{margin: 0; padding: 0; }. Nav {/* Absolute positioning relative to the browser window */ 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 current page of the vertical scroll barif (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)})})Copy the codeDrag and drop
1. Drag and drop on the mobile terminal
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)}Copy the code2. Drag and drop on the 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)}Copy the code