Topic Center

Contact Sales

Home > Developer > JavaScript

Code _ jquery

Last Update:2017-05-11 Source: Internet

Author: User

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

On the home page, there is a navigation page to implement the rolling effect. simply copy the effects of others and make them one by yourself. In general, it is okay. It looks quite smooth. The current rolling effect is shown in the script code below, if you are interested, you can refer to the following example when you are working on a video website on the campus network, the home page has a navigation page to achieve the scrolling effect, but the code is hard to understand, it seems that the webpage design is only available to you in your own code. Simply, you can make a copy of the effects of others. In general, it is okay, and it looks smooth, not just the original one.

Now copy the code here, and then simplify the modifications one by one:
The script code is as follows:

The Code is as follows:

Var all = 0;
Var no = 0;
Var s_width = 0;
$ (Document). ready (function (){
All = $ ('. slide'). length;
S_width = $ ('. slide'). eq (0). width ();
$ ("# Slides" ).css ('width', all * s_width );
Var contiar = $ ('. control_links ');
For (var I = 0; icontiar. append ("

");
}
$ ('. Control_links li'). bind ('click mouseenter', function (){
Var index = $ (this). index ();
No = index;
Var no _ = no % all;
$ ("# Slides"). animate ({left :(-1 * no _ * s_width) + 'px '}, 200 );
Watermark (this).css ('background-color', '# fff ');
((This).siblings().css ('background-color', '#333 ');
});
SetInterval (function (){
Var no _ = no % all;
$ ("# Slides"). animate ({left :(-1 * no _ * s_width) + 'px '}, 1000 );
Var curr = $ ('. control_links li'). eq (no _);
Curr.css ('background-color', '# fff ')
Curr.siblings().css ('background-color', '#333 ');
No ++;
},5000 );
});

The css code is as follows:

The Code is as follows:

Img {
Border: none;
}
# Daohangpic {
Width: 1000px;
Margin: 0 auto;
Padding: 20px;
Overflow: hidden;
}
# Daohangpic img {
Height: pixel PX;
Width: 980px;
}

# Contiar {
Position: relative;
Width: 980px;
Height: pixel PX;
Overflow: hidden;
Margin: 0 auto;
}
# Slides {
Position: absolute;
Border: none;
}
. Slide {
Float: left;
Width: 980px;
Height: pixel PX;
Overflow: hidden;
Border: none;
}
. Control_links {
Position: absolute;
Bottom: 10px;
Right: 10px;
Z-index: 200;
}
. Control_links,. control_links li {
List-style: none;
}
. Control_links li {
Float: left;
Width: 15px;
Height: 15px;
Margin-right: 5px;
Text-align: center;
Background: #333;
Border: 1px solid #666;
Cursor: pointer;
Opacity: 0.5;
}
. Caption {
Position: absolute;
Height: 50px;
Width: 100%;
Background-color: #000;
Bottom: 0px;
Padding-left: 20px;
Padding-top: 10px;
Overflow: hidden;
Z-index: 100;
Background: url(hdpng.png) no-repeat scroll 0-1px;
}
. Caption h2 {
Color: # FFF;
Font-size: 17px;
Font-weight: bold;
Line-height: 25px;
}
. Caption p {
Display: block;
Color: #767676;
Font-size: 12px;
Line-height: 15px;
}

The region to be rolled is defined as follows:

The Code is as follows:

Revealed the gramme Award List