css如何制作途牛旅游网首页轮番图
这篇文章主要介绍css如何制作途牛旅游网首页轮番图,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
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 0px;cursor:pointer;
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(255,255,255,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(0,0,0,0.6);color:#fff;}
.nav ul .bg a{color:#fff;}
a{text-decoration: none;color:#333}
var i = 0;
var time = 0;
$("#box").hover(function() {
$(".prev").fadeIn(300);
}, function() {
$(".prev").fadeOut(300);
})
$("#box").hover(function() {
$(".next").fadeIn(300);
}, function() {
$(".next").fadeOut(300);
})
$(".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() {
i--;
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() {
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");
}
time = setInterval("junmper()", 3000);
以上是"css如何制作途牛旅游网首页轮番图"这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!