Imitation Web Carousel diagram

Source: Internet
Author: User
Tags prev

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.