How to make Tuniu's Home Page rotation Picture by css
This article mainly introduces css how to make Tuniu's home page rotation picture, the article is very detailed, has a certain reference value, interested friends must read it!
Tuniu homepage
Body {background:url ("images/bg.jpg");}
* {margin:0px;padding:0px;}
# box {
Width:735px;height:350px
Margin:50px auto;position:relative
Background:#fff
}
.con {
Width:735px;height:350px;overflow:hidden
}
.con ul li {list-style-type:none;}
.prev {
Width:45px;height:100px
Position:absolute;left:0px;top:50%;margin-top:-50px
Background:url ("images/button.png"); cursor:pointer
Display:none;opacity:0.5
}
.next {
Width:45px;height:100px
Position:absolute;right:0px;top:50%;margin-top:-50px
Background:url ("images/button.png")
Background-position:-55px 0pxtCursorRose
Display:none;opacity:0.5
}
.nav {
Width:720px;height:30px
Position:absolute;left:50%;margin-left:-360px
Bottom:10px
}
.nav ul li {
Width:119px;height:30px;background:rgba (255pr. 255pr. 0.6)
List-style-type:none;float:left
Margin-right:1px;text-align:center
Line-height:30px;font-size:12px;color:#333;cursor:pointer
}
.nav ul .bg {background:rgba
.nav ul .bg a {color:#fff;}
A {text-decoration: none;color:#333}
Location plug-in
Waterfall flow
Slide
Date, hour, minute and second
Crop a picture
Star plug-in
Var I = 0
Var time = 0
$("# box") .hover (function () {
(".prev") .fadeIn
}, function () {
(".prev") .fadeOut
})
$("# box") .hover (function () {
(".next") .fadeIn
}, function () {
(".next") .fadeOut
})
$(".nav ul li") .hover (function () {
I = (this) .index ()
$(".con ul li") .eq (I) .fadeIn (100) .siblings () .fadeOut (100)
$(this) .addClass ("bg") .siblings () .removeClass ("bg")
ClearInterval (time)
}, function () {
Time = setInterval ("junmper ()", 3000)
})
$(".prev") .click (function () {
IMurray-
If (I)
< 0) i = 5; $(".con ul li").eq(i).fadeIn(100).siblings().fadeOut(100); $(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg"); }) $(".next").click(function() { i++; if (i >5)
I = 0
$(".con ul li") .eq (I) .fadeIn (100) .siblings () .fadeOut (100)
$(".nav ul li") .eq (I) .addClass ("bg"). Siblings () .removeClass ("bg")
})
$(".prev") .hover (function () {
ClearInterval (time)
}, function () {
Time = setInterval ("junmper ()", 3000)
})
$(".next") .hover (function () {
ClearInterval (time)
}, function () {
Time = setInterval ("junmper ()", 3000)
})
Function junmper () {
ITunes +
If (I > 5)
I = 0
$(".con ul li") .eq (I) .fadeIn (100) .siblings () .fadeOut (100)
$(".nav ul li") .eq (I) .addClass ("bg"). Siblings () .removeClass ("bg")
}
Time = setInterval ("junmper ()", 3000)
The above is all the contents of the article "how to make Tuniu's Home Page Picture by css". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
