FIG effect as above:
Demand: picture automatically rotate, move the mouse to stop playing, leaving resume play, arrows to switch images.
html code
<! - Carousel starts a big box ->
<div class="wrap">
<! - portion of the large box in FIG rotation ->
<div class="wrapUp">
<ul>
<li class="cur"><a href="#"><img src="images/banner/banner01.jpg" alt=""></a></li>
<li><a href="#"><img src="images/banner/banner02.jpg" alt=""></a></li>
<li><a href="#"><img src="images/banner/banner03.jpg" alt=""></a></li>
<li><a href="#"><img src="images/banner/banner04.jpg" alt=""></a></li>
</ul>
<span class="btn left"><</span>
<span class="btn right">></span>
</div>
<! - part of the big box under the heading ->
<div class="wrapDown">
<ol>
<Li class = "cur"> big deals </ li>
<Li> live in the Nordic </ li>
<Li> continuing love </ li>
<Li> mother feast </ li>
</ol>
<-! Bottom underlined in red ->
<span class="line"></span>
</div>
</div>
CSS style code
<style>
{margin *: 0; padding: 0; list- style: none}
/ * Set the page image background * /
body {background: URL ( "Images / Banner / bg.jpg") NO- REPEAT Top Center;}
/ * big style box width and height, the box projection, padding * /
.Wrap {width: 1170px; height: 452px; background: RGBA ( 255,255,255,0.5 ); margin: 30px Auto;
padding: 12px 12px 0; Box-Sizing: border-Box; Shadow Box-: 10px 0 0 RGBA (0,0,0,0.4 ); overflow: hidden}
/ * image width and height of the box, positioning pattern * /
.wrapUp{width: 1146px;height: 400px;position: relative;}
.wrapUp li{position:absolute;left:0;top:0;display: none;}
.wrapUp .cur{display: block;}
/ * The box sides arrow style * /
.wrapUp .btn {width: 33px; height: 66px; background: RGBA ( 0,0,0,0.2 );
position: absolute;color:#ffffff;font-size: 40px;line-height: 66px;text-align: center;
font -family: "bold"; border-RADIUS: 5px; Top: 50%; Transform: translateY, (-50%); Cursor: pointer; Transition: 0 .3s}
/ * cassette left arrow style * /
.wrapUp .left left {: - 45px}
.right {right .wrapUp: - 45px}
/ * cassette into the display * /
.Wrap: hover {.wrapUp .left left: 0 }
.Wrap: hover {.wrapUp .right right: 0 }
/ * box opacity change * /
.wrapUp .btn: hover {background: RGBA ( 0,0,0,0.4 );}
/ * Great part of the header box style * /
.wrapDown {width: 800px; height: 40px; margin: 0 Auto; position: relative}
/ * great part of the box li pattern * /
.wrapDown li {width: 200px; height : 40px; font -size: 15px; line-height: 40px; a float : left; text-align = left: Center; Color: # 666666 ; position: relative; Cursor: pointer}
/ * behind each dividing line style li * /
li .wrapDown: After {Content: "|"; position: Absolute; right: 0; Top: 0 ; Color: #cccccc}
/ * set the first word pattern li * /
.wrapDown .cur{color:red;}
/ * Last dividing line need not li * /
.wrapDown li: Last - Child: {After the display: none}
/ * the bottom of the box with a red underline is positioned relative to the bottom * /
.wrapDown .line {width: 200px; height: 2px; background: DeepPink; left: 0; bottom: - 1px; position: Absolute}
</ style>
jQuery code
<Script>
// mouse over switching by an index value
// images
// current text color
$ (. "wrapDown Li"). MouseEnter ( function () {
// define variables received index
var index = $ ( the this ) .index ();
console.log(index);
play(index);
// according to an index value of images
/ * $ (. "WRAPUP li") EQ (index) .stop () fadeIn () SIBLINGS () STOP () fadeOut ().....;
// text switch
$(".wrapDown li").eq(index).addClass("cur").siblings().removeClass("cur");
// sliding-line switching
$(".line").stop().animate({left:index*200},100)*/
});
// switching the package as a function
// AutoPlay
// define playback
function Play (AAA) {
$(".wrapUp li").eq(aaa).stop().fadeIn().siblings().stop().fadeOut();
//文字切换
$(".wrapDown li").eq(aaa).addClass("cur").siblings().removeClass("cur");
//滑动线切换
$(".line").stop().animate({left:aaa*200},100)
}
var timer = null ; // to allow timer setting timer value is null
var NUM = 0; // needs to have an index number which controls moving, initially 0
var len = $ ( "wrapDown Li.") length.; // need to have an index value and num contrast, the number of li.
// package custom movie playback
function AutoPlay () {
Timer = the setInterval ( function () { // Timer here is assigned to the timer
NUM ++ ;
IF (NUM>. 1-len) {NUM = 0 ;}
play(num);
console.log(num);
},1000);
}
// Mouse over to stop, call the mouse leaves the AutoPlay
$ (. "Wrap"). Hover ( function () {
clearInterval(timer);
},function () {
autoplay();
});
// Click the arrow to switch the picture
$ (. "Right"). The Click ( function () {
whether ++ ;
if (num> len-1) {num = 0 ;}
play(num);
});
$(".left").click(function () {
Surely - ;
if (num <0) {num = len-1 ;}
play(num);
});
</script>
html partial steps:
1, the new big box, the upper part and a bottom package rotation FIGS four header options and underlined in red.
1.1 multicast FIG div box portion comprises two span wrapped with two arrows.
1.2 multicast FIG view of four insertion portion div ul.
2, the lower portion is a large box header part.
css style step of analyzing:
the core part of the big box style
version of the central portion, and give high padding, the background color is white translucent projection box.
After padding the box portion, to a wide picture, the picture padding increases, so increasing the width of the box to use the border-box subtracted. Translucent background rgba (255,255,255,0.5);
cartridge projection: box-shadow: 0 0 5px
The first level is a value, the second value is the vertical, the degree of blurring third value The fourth value is the color.
Picture box style
four maps are fade can use absolute positioning all the pictures together.
Image to an image width and height of the box set and positioned opposite to the box, to the absolute positioning li, left, top to 0. In the first show of the last li pictures, because hierarchy.
Li to all settings hidden. Adding to the first li class name setting display appears.
Arrow box style
arrow span positioned relative to the image width of the box to take effect on account of high, wide and high rounded corners, translucent black.
Arrow set larger font-family: "bold."
Box arrow center top: 50% and transform: translateY (-50%);is a horizontal offset, Y offset of the vertical
arrows into the box is big arrow shows the box, .Wrap outside, mouse: hover .wrapUp .left {left : 0} indicates
the mouse enters the large box wrap control arrow on the left. Then animate the transition to the arrow box.
Move the mouse, an arrow box opacity change, adjustment opacity value.
Image bottom header style
set the width height of the box according to the number of the title, and set the dividing line after each li and pseudo-earth element after positioning.
JS code portions
indexed by switching the bottom li pictures, text colors red and sliding the bottom line position.
1, into the bottom of the mouse Li, var index = $ (the this) .index ();
2, switching images based on the index value
$ ( "wrapUp li.").) .stop () fadeOut ()
pictures, index bindings, fade in, fade out other brothers and
3, the text switches, first li add text style class name
$ ( "wrapDown li."). addClass ( "CUR") SIBLINGS () removeClass ( "CUR");..
. 4, the sliding wire slider switch
$ ( "line.") stop
to the right sliding movement of the sliding line width index * distance.
Triggered by the user are generally required to add stop ()
Timer Auto Play
Format:
requires a variable var Timer = null;
then requires a variable var num = 0; the need for a moving picture digital control, 0 is the initial
total FIG. 4, so num ++; but also in the timer inside If you do a maximum of num is greater than the index value judgment 3, num becomes 0, so the picture will start playing again from the first.
setInterval timings as a function call, call execution character image slide switch line.