Use JS to achieve picture Carousel Effect Code (i) _javascript skills

I. Principles of IMPLEMENTATION

(1) Put all the pictures in a parent container div, through the display property to set the appearance and hide;

(2) The Carousel graph is divided into manual carousel and automatic carousel;

Manual carousel is focused on each click of the small circle below the picture, get its index number, and the corresponding index number of the image display, and at this time the small circle is highlighted;
Automatic Carousel: Use the timer setinterval () to play a picture every once in a certain time.

(3) All basic knowledge: DOM operation, timer, event application.

Two. Carousel Map Page Layout:

<div id= "Content" > <!--Total parent container-->
<div class= "Carousel-inner" > <!--container containing pictures-->
< div class= "Item" ></div>
<div class= "Item" ></div>
<div class= "item" ></div>
</div>
<!--picture below the indicator circle-->
<ul class= "Carousel-indicators" >
<li id= ' pic1 ' > </li>
<li id= ' pic2 ' > </li>
<li id= ' pic3 ' > </li>
</ul>
<!--picture around the left and right arrow-->
<a href= "#" class= "Carousel-control prev" >< span><</span></a>
<a href= "#" class= "Carousel-control Next" ><span>></ Span></a>
</div>

Three. The CSS style of the carousel chart:

#content {
width:100%;
height:500px;
Position:relative
}
. carousel-inner{
position:relative;
width:100%;
Overflow:hidden; 
height:500px 
}
. carousel-inner>.item>img{
Display:block; 
line-height:1; 
Z-index:1
}
. carousel-indicators{
Position:absolute;
bottom:10px;
left:45%;
Z-index:2;
List-style-type:none
}
. Carousel-indicators li{
Display:inline-block;
padding:0 15px;
font-size:24px;
Color: #999; 
Cursor:pointer;
Z-index:2
}
. active1{
font-size:28px;
Color: #fff;
carousel-control{
Position:absolute;
Text-decoration:none;
Color: #999;
Font-weight:bold;
Opacity:. 5;
font-size:40px;
Z-index:3
}
. carousel-control:hover{
color:fff;
Text-decoration:none;
Opacity:. 9;
Outline:none;
font-size:42px
}
. prev{
top:30%; 
left:20px 
}
. next{
top:30%;
right:20px;
}

Four. The JS implementation code of the Carousel graph:

Window.onload = function () {//Carousel initializes var Lunbo = document.getElementById (' content '); var IMGs = Lunbo.getelementsbytagname 
(' img ');
var uls = lunbo.getelementsbytagname (' ul ');
var lis = lunbo.getelementsbytagname (' li ');
In the initial state, a circle is the highlight mode lis[0].style.fontsize = ' 26px ';
Lis[0].style.color = ' #fff ';
Defines a global variable that is used to change the sequence of automatic carousel images var pic_index = 1;
Automatic carousel. Use pic_time record playback, you can use Clearinterval () at any time to clear off.
var pic_time = setinterval (autobofang,3000); Manual carousel for (var i=0;i<lis.length;i++) {lis[i].addeventlistener (' mouseover ', change,false);} function Change (event) {var event=event| |
window.event; var target=event.target| | 
Event.srcelement; 
var children = Target.parentNode.children; 
for (Var i=0;i<children.length;i++) {if (target = = Children[i]) {picchange (i); //Picture switching function Picchange (i) {//Let all pictures not appear, all circles are Normal style for (Var j=0;j= lis.length) {pic_index = 0;} change1 (Pic_index); pic_index++;}/ /automatic playback of the image in the conversion of event function Change1 (index) {picchange (index);//mouse into the UL tag, automatically play the picture pause Uls[0].addeventlistener ("MouseOver",
Pause,false);
The mouse moves out the UL label, the automatic playback picture continues Uls[0].addeventlistener ("Mouseout", Go,false); Auto Play suspend functions function pause (event) {var event=event| |
window.event; var target=event.target| |
Event.srcelement; 
Switch (target.id) {case "Pic1": Clearinterval (Pic_time);
Break
Case "Pic2": Clearinterval (Pic_time);
Break
Case "PIC3": Clearinterval (Pic_time);
Break Auto Play picture continue function functions Go (event) {var event=event| |
window.event; var target=event.target| | 
Event.srcelement; 
Switch (target.id) {case "Pic1": Pic_index = 1;
Pic_time = SetInterval (autobofang,3000);
Break 
Case "Pic2": Pic_index = 2;
Pic_time = SetInterval (autobofang,3000);
Break 
Case "PIC3": Pic_index = 3; Pic_time = SetInterval (Autobofang,3000);
Break }
}
}

Five. Effect chart:

Six. Problems and deficiencies encountered

Problem: When the mouse first moved into the UL label, Automatic carousel picture Stop, mouse out, automatic carousel continue, but with the operation, the rotation of the picture changes faster and faster, and then click on the UL tag has no effect.

Problem reason: After stopping the carousel after the start of the use of timer, not to assign value to Pic_time to record, there is no time to move the mouse to the UL label and clear the timer, so that again click on the UL label can not suspend automatic carousel playback, and faster and faster.
Insufficient: Does not realize like Taobao Carousel Chart smooth transition without the effect of scroll, the direction of the left and right arrow is not completed. These will continue to learn in the later, continue to improve, to share.