首页 / 知识

途牛旅游网首页轮番图制作

2023-04-11 16:07:00

<!doctype html>

<head>

<title>途牛旅游网首页</title>

body{background:url("images/bg.webp");}

*{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.webp");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.webp");

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}

</style>

</head>

<body>

<ul>

</ul>

</div>

<ul>

<li><a href='http://www.jsdaima.com/p-370.html' target='_blank'>日期时分秒</a></li>

</ul>

</div>

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);

</script>

</body>

</html>

首页途牛旅游网焦点图轮番制作幻灯片

首页 / 知识

途牛旅游网首页轮番图制作

最新内容

相关内容

热门文章

推荐文章

标签云

猜你喜欢