Imitation Web Carousel diagram

Last Update:2018-04-29 Source: Internet

Author: User

Tags prev

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

HTML section

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> NetEase Carousel Chart js Section </title>
<link rel= "stylesheet" href= "Css/css.css" >
<script src= "Js/slider.js" ></script>
<script src= "Js/animate.js" ></script>
<body>
<div class= "W-slider" id= "Js_slider" ><!--JS only support underline--
<div class= "Slider" >
<div class= "Slider-main" id= "Slider_main_block" >
<div class= "slider-main-img" ><a href= "#" ></a></div>
<div class= "slider-main-img" ><a href= "#" ></a></div>
<div class= "slider-main-img" ><a href= "#" ></a></div>
<div class= "slider-main-img" ><a href= "#" ></a></div>
<div class= "slider-main-img" ><a href= "#" ></a></div>
<div class= "slider-main-img" ><a href= "#" ></a></div>
</div>
</div>
<!--control Carousel Section--
<div class= "Slider-ctrl" id= "Slider_ctrl" >
<span class= "Slider-ctrl-prev" ></span>
<span class= "Slider-ctrl-next" ></span>
</div>
</div>
</body>

 CSS Section

@charset "UTF-8";
*{
margin:0;
padding:0;
}
img{
Vertical-align:top;
/* Remove the gap between the pieces * *
}
. w-slider{
width:310px;
height:265px;
margin:100px Auto;
/**/
position:relative;
Overflow:hidden;
}
. slider{
width:310px;
height:220px;
/**/

}
. slider-main{
width:620px;
height:220px;
/**/
}
. slider-main-img{
Position:absolute;
top:0;
left:0;
}
. slider-ctrl{
Text-align:center;
padding-top:5px;

}

. slider-ctrl-con{
width:24px;
height:20px;
Display:inline-block;
/* Inline change inside block can change size */
/**/
Background:url (.. /images/icon.png) no-repeat-24px-782px;
/* Sprite Graph implementation adjust pixels */
margin:0 5px;
Cursor:pointer;
/* Hide numbers from 1 2 3 4 5 6 */
Text-indent: -20em; The/*text-indent attribute specifies the indentation of the first line of text in a block of texts. */
Overflow:hidden;
}
. current{
Background-position: -24px-762px;
}
. Slider-ctrl-prev,
. slider-ctrl-next{
Position:absolute;
top:50%;
margin-top:-35px;
Background-color:blue;
Background:url (.. /images/icon.png) no-repeat 6px top;
width:30px;
height:35px;
}

. slider-ctrl-prev{
left:0;
Cursor:pointer;
}
. slider-ctrl-next{
right:0;
Background-position: -6px-44px;
Cursor:pointer;
}

  js section
Slider.js

Window.onload=function () {
Get element
function $ (ID) {
return document.getElementById (ID);
}

var Js_slider = $ ("Js_slider"); Get the largest box
var Slider_main_block = $ ("Slider_main_block"); The box with the picture
var IMGs = Slider_main_block.children; Get all the picture groups
var Slider_ctrl = $ ("Slider_ctrl"); Get control of the parent box

Manipulating elements
Generate small span
for (var i = 0; i < imgs.length; i++) {
var span = document.createelement ("span");
Span.classname = "Slider-ctrl-con";
span.innerhtml = imgs.length-i;//Because the span small square is inverted insert, so the index number also if 6 5 4 3 2 1
Slider_ctrl.insertbefore (span, slider_ctrl.children[1]);
InsertBefore inserted before the referenced element
}
var spans = Slider_ctrl.children; Get all the span
Spans[1].setattribute ("Class", "Slider-ctrl-con current");
The SetAttribute () method adds the specified property and assigns the specified value to it. The class name is given here and the current class is added to it

var scrollwidth = js_slider.clientwidth; Get the width of the big box, which is the distance behind the animation.

Just start the first picture in the box to the right of the rest of the picture box
for (var i = 1; i < imgs.length; i++)//Picture from the second row to the right of the box
{
Imgs[i].style.left = scrollwidth + "px";
}

Traverse three Buttons
span is a 8 button two arrows six small squares
var inow=0; Control Play Count
For (var k in spans)//k is the index number span[0]--the first span in the array
{
Spans[k].onclick = function () {
Click on which of the span to output the corresponding value two arrow symbol value is empty
if (This.classname = = "Slider-ctrl-prev") {
Alert ("You clicked on the left button")
Animate (Imgs[inow], {left:scrollwidth});
--inow < 0? Inow = imgs.length-1: Inow;
Imgs[inow].style.left =-scrollwidth + "px";
Animate (Imgs[inow], {left:0});
Setsquare ();
} else if (This.classname = = "Slider-ctrl-next") {
Alert ("You clicked on the right button");
Animate (Imgs[inow], {left:-scrollwidth});
The current picture slowly goes to the-scrollwidth position.
++inow > Imgs.length-1? Inow = 0:inow;
inow++; Current Picture plus 1 + +
if (inow>imgs.length-1)//after judgment
// {
inow=0;
// }
Imgs[inow].style.left = scrollwidth + "px"; Next quick move to the right 310px seat
Animate (Imgs[inow], {left:0}); Next picture go to position 0 (box)
Setsquare ();
}
else {
alert (this.innerhtml);//Click on the small span below
The first thing to know is the number of clicks-the current index numbers
var that = this.innerhtml-1; That corresponds to the index number of each picture
if (That > Inow)
{
Same as Right click
Animate (Imgs[inow], {left:-scrollwidth});
Imgs[that].style.left = scrollwidth + "px";

}
else if (that < Inow)
{//Same as Click Left
Animate (Imgs[inow], {left:scrollwidth});
Imgs[that].style.left =-scrollwidth + "px";
}
Inow=that;
Animate (Imgs[inow], {left:0});
Setsquare ();
}
}
}
A function that can control the playback of a span is currently
function Setsquare () {
Clear all span current leave to meet the need to take a
for (Var i=1;i<spans.length-1;i++) {//8 span we want 1-6 not 7 index number
Spans[i].classname = "Slider-ctrl-con";
}
Spans[inow+1].classname = "Slider-ctrl-con current"; Remember + 1
}
Timer Start Right button
var timer=null;
Timer = setinterval (autoplay,2000); Turn on timer
function AutoPlay () {
When we click, the current picture to go slowly to the left of the next one must first quickly go to the right (310) position, and then slowly walk to the stage
Alert ("You clicked the right button");
Inow = = 0
Animate (Imgs[inow],{left:-scrollwidth});
The current picture slowly goes to the-scrollwidth position.
becomes 1 + + + ++inow First self-add after operation
++inow > Imgs.length-1? Inow = 0:inow;
Imgs[inow].style.left = scrollwidth + "px"; Immediately perform quick walk to the right
Animate (imgs[inow],{left:0}); Take the next 0 and walk slowly.
Setsquare (); Call Square
}
Mouse over clear timer
Js_slider.onmouseover = function () {
Clearinterval (timer);
}
Js_slider.onmouseout = function () {
Clearinterval (timer); To execute the timer first clear the timer
Timer = setinterval (autoplay,2000); Turn on timer
}
}


Animate.js

/**
* Created by Andy on 2015/11/23.
*/
Multiple attribute motion frames add callback functions
function Animate (OBJ,JSON,FN) {//To whom JSON
Clearinterval (Obj.timer);
Obj.timer = setinterval (function () {
var flag = true; Used to determine if the stop timer must be written to the outside of the traversal
for (Var attr in JSON) {//attr property Json[attr] Value
Start traversing JSON
Calculate step with target position minus current position divided by 10
Console.log (attr);
var current = 0;
if (attr = = "opacity")
{
Current = Math.Round (parseint (GetStyle (obj,attr) *100)) | | 0;
Console.log (current);
}
Else
{
Current = parseint (GetStyle (obj,attr)); Numerical
}
Console.log (current);
The target location is the property value
var step = (Json[attr]-current)/10; Step with target position-current position/10
Step = step > 0? Math.ceil (STEP): Math.floor (step);
Judging transparency
if (attr = = "opacity")//Determine if the user has entered opacity
{
if ("opacity" in Obj.style)//Determine if our browser supports opacity
{
Obj.style.opacity
Obj.style.opacity = (current + step)/100;
}
Else
{//Obj.style.filter = alpha (opacity = 30)
Obj.style.filter = "alpha (opacity =" + (current + Step) * + + ")";

}
}
else if (attr = = "ZIndex")
{
Obj.style.zIndex = json[attr];
}
Else
{
OBJ.STYLE[ATTR] = current + step + "px";
}

if (current! = Json[attr])//If one does not meet the condition it should not stop the timer this must traverse inside
{
Flag = false;
}
}
if (flag)//To determine the condition of the timer
{
Clearinterval (Obj.timer);
Alert ("OK");
if (FN)//very simple when the timer stops. The animation is over. If there is a callback, you should execute the callback
{
FN (); Function name + () Call function execution function
}
}
},10)
}
function GetStyle (obj,attr) {//Who's that property
if (obj.currentstyle)//IE etc.
{
return obj.currentstyle[attr]; Returns a property passed over
}
Else
{
Return window.getComputedStyle (Obj,null) [attr]; Web browser
}
}

Imitation Web Carousel diagram

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