The example of this article describes the implementation of the focus based on jquery fading fade effect code. Share to everyone for your reference. Specifically as follows:
This container uses a percentage width, and the picture is always centered, fixed width, or adaptive width is ok.
Compatible to ie6+ above browser, there are fading fade in speed and switch interval two parameters can be changed.
The screenshot of the running effect is as follows:
The specific code is as follows:
The HTML code is as follows:
<!doctype html>
@charset "Utf-8";
/* Simple Reset * * * *, P, UL, Ol, Li {margin:0;
padding:0;
UL, ol {list-style:none;} img {border:none} a,button{Outline:none; clearfix:after {visibility:hidden;
Display:block;
font-size:0;
Content: "";
Clear:both;
height:0;
}/* Specific style */. Banner {height:400px}. Banner. bannercon {position:relative;
width:60%;
height:100%;
margin:0 Auto;
Overflow:hidden;
}. Bannercon. imglist {width:100%;
height:100%;
}. Bannercon. imglist li {display:none;
Position:absolute;
top:0;
left:0;
width:100%;
height:100%; Background-color: #e2f6fd;
* * This background is to show the width is larger than the width of the area, you can delete * * * Z-INDEX:1;
}. Bannercon. imglist Li a {display:block;
height:100%;
Text-align:center;
}. Imglist Li a img {position:absolute;
top:0;
left:50%; Margin-left: -400px;
/* This value fills in half of the actual width of the picture/}. Bannercon. Pre-nex {display:none;
Position:absolute;
top:50%;
width:40px;
height:60px; Margin-top:-40px;
Font:bold 40px/60px SimSun;
Color: #ccc;
Text-align:center;
Border:none;
Background:rgba (0,0,0,.30);
Filter:progid:DXImageTransform.Microsoft.Gradient (startcolorstr= #4c000000, endcolorstr= #4c000000);
Cursor:pointer;
Z-index:3; }. Bannercon. pre-nex.show {display:inline-block}. Bannercon. prev {left:13%;}. Bannercon. Next {right:13%;
Nnercon. btnlist {position:absolute;
left:0;
bottom:20px;
width:100%;
height:12px;
Text-align:center;
Z-index:6;
_overflow:hidden;
}. Bannercon. btnlist li {display:inline; bannercon. btnlist Li span {display:inline-block;
width:12px;
height:12px;
Margin:0 5px;
border-radius:6px;
Background-color: #14829e;
Cursor:pointer; }. Bannercon. btnlist li.cur span {background-color: #f30;}
The
JS code is as follows:
Load the JS statement after text read begins ============================================================= function fadeimg (obj,speed, Interval) {//parent container, fade fade in speed, toggle Interval $ ("." +obj). each (function () {var $box = $ (this), $imgUl = $box. Children (". Imglist"), $imgLi = $imgUl. Child ren ("Li"), $btnUl = $box. Children (". Btnlist"), $btnLi = $btnUl. Children ("Li"), $btnPreNex = $box. C
Hildren (". Pre-nex"), n = $imgLi. length, k = 0, Player = setinterval (function () {fade ()},interval); $imgLi. EQ (0). FadeIn (speed);
First fade function fade () {//Fade in event K + 1;
if (k >= n) {k = 0;
$btnLi. Removeclass (' cur '). EQ (k). addclass (' cur ');
$imgLi. fadeout (Speed). EQ (k). FadeIn (speed);
};
$btnLi. Click (function () {//small dot Click event var index = $btnLi. index (this);
$ (this). addclass (' cur '). Siblings (' Li '). Removeclass (' cur '); $imgLi. fadeout (speed). eq(index). FadeIn (speed);
K = index;
}); $btnPreNex. Click (function () {//Left button click event if (! $imgLi. Is (": Animated")) {if ($)
. Hasclass (' next ')) {k + 1;
if (k >= n) {k = 0;
} else{k + =-1;
if (k < 0) {k = n-1;
} $btnLi. removeclass (' cur '). EQ (k). addclass (' cur ');
$imgLi. fadeout (Speed). EQ (k). FadeIn (speed);
}
});
$box. Hover (///mouse move event (not toggle to be compatible with 1.9+ JQ library) function () {clearinterval (Player);
$btnPreNex. addclass (' show ');
The function () {Player = SetInterval (function () {fade ()},interval);
$btnPreNex. Removeclass (' show ');
}
);
});
} $ (function () {//Read Carousel event fadeimg ("Bannercon", 1000,3000); });
JQ Library with 1.7+ is no problem, I hope to learn some help, feel good students on the quiet point of praise Bar.