Minimalist JS Click on the photo switch effect

Last Update:2017-09-03 Source: Internet

Author: User

Tags jquery library

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Programmers in front-end development, often use to click to switch the animation effect of the group, there are many such plug-ins on the net, but all very troublesome, Wu bad countless code, have that look at the time, I can write the function finished. Here I provide a minimalist JS click on the photo switch effect code, including an HTML file, a CSS file, a JS file, a jquery.js file, as well as a picture.

Index.html

<TITLE>JS Click on the group to swipe left </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<link href= "Css.css" rel= "stylesheet" type= "Text/css" >
<script type= "Text/javascript" src= "jquery.min.js" ></script><!--need a jquery library--
<script type= "Text/javascript" src= "Js.js" ></script>
<body>
<div class= "main" ><!--Note: After copying the code, just feel free to find a picture, according to the name of the IMG tag below, corresponding to modify a name, you can see the animation effect--
<div class= "main_in" ><!--this tag must be overflow:hidden to achieve a sliding effect--
<ul id= "Main_ul" ><!--this label must be relative before it is allowed to slide--

</ul>
</div>
<div class= "Main_change" >
<div id= "prev" onclick= "Slideprev ()" ></div>
<div id= "Next" onclick= "Slidenext ()" ></div>
</div>
</div>
</body>

Style sheet:

Css.css

*{margin:0px; padding:0px;}
. main{width:1180px; Margin:auto;}
. Main_in{overflow:hidden;}
. main_in Ul{display:block; width:5000px; height:500px; overflow:hidden;position:relative;}
. main_in_li{display:block; margin-right:20px; float:left;}
main_change{width:1312px; margin:0 auto; position:relative; top: -250px; left:-66px;}
#next {width:40px; height:75px; cursor:pointer; position:absolute; right:0px; background: #999;}
#prev {width:40px; height:75px; cursor:pointer;position:absolute; left:0px; background: #999;}

JS file:

Js.js

Get elements based on class
function Getbyclass (sclass) {
var aresult=[];
var aele=document.getelementsbytagname (' * ');
var re=new RegExp ("\\b" + Sclass + "\\b", "G");
for (Var i=0;i<aele.length;i++) {
if (Aele[i].classname.search (re)! =-1) {
Aresult.push (Aele[i]);
}
}
return aresult;
};

Next
function Slidenext () {
var i=0;
var n;
For (I;i<getbyclass ("Main_in_li"). length;i++) {//Get the number of Li tags by class
if (Getbyclass ("Main_in_li") [i].id== "main_in_li_id") {//based on the ID to determine the position of the Li tag in the array, get the value of I, thereby obtaining the value of the UL tag left Pixel
if (I<getbyclass ("Main_in_li"). Length-4) {//4 represents the number of <li> tags displayed in the container, and you want to display several <li> squares on the page, except that you need to modify the width in the style sheet, You also need to modify the value "4" here.
n=i+1;
$ ("#main_ul"). Animate ({left: "-" +300*n},800);
Getbyclass ("Main_in_li") [i].id= "];
}
}
}
Getbyclass ("Main_in_li") [n].id= "main_in_li_id";
}

Previous, logical ibid function
function Slideprev () {
var i=0;
var n;
For (I;i<getbyclass ("Main_in_li"). length;i++) {
if (Getbyclass ("Main_in_li") [i].id== "main_in_li_id") {
if (i>0) {
N=i-1;
$ ("#main_ul"). Animate ({left: "-" +300*n},800);
Getbyclass ("Main_in_li") [i].id= "];
}
}
}
Getbyclass ("Main_in_li") [n].id= "main_in_li_id";
}

This paragraph JS code basic use of the original JS written, but also with the same writing jquery, logic is the same.

Jquery.js file you can find it yourself, whatever it is. Picture everyone according to the catalogue to find a random put on the line.

This piece of code, in fact, is not only used for image switching, essentially switching <li> tags, you want to put text waiting for other things, just go to the <li> tag inside the line.

Minimalist JS Click on the photo switch effect

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More