这篇文章主要介绍css如何制作途牛旅游网首页轮番图，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>途牛旅游网首页</title>
<meta name="keywords" content="jQuery途牛幻灯片切换,jQuery焦点图轮播" />
<meta name="description" content="途牛旅游网首页jquery幻灯片轮播js特效。" />
<style type="text/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}
</style>
</head>
<body>
<div id="box">
<div class="con">
<ul>
<li><a href='https://cache.yisu.com/upload/information/20220117/488/17241.jpg' alt='elastiStack拖拽堆叠在一起的图片' /> </a></li>
<li><a href='https://cache.yisu.com/upload/information/20220117/488/17242.jpg' alt='jQuery以波浪形式展现图片' /> </a></li>
<li><a href='https://cache.yisu.com/upload/information/20220117/488/17243.jpg' alt='simpleBtChecks美化复选框checkbox' /> </a></li>
<li><a href='https://cache.yisu.com/upload/information/20220117/488/17244.jpg' alt='css3演示4种不同的全屏幻灯片滑动效果' /> </a></li>
<li><a href='https://cache.yisu.com/upload/information/20220117/488/17245.jpg' alt='lightbox制作个性化弹出层' /> </a></li>
<li><a href='https://cache.yisu.com/upload/information/20220117/488/17246.jpg' alt='classicAccordion演示三种经典的手风琴效果' /> </a></li>
</ul>
</div>
<div class="prev"></div>
<div class="next"></div>
<div class="nav">
<ul>
<li class="bg"><a href='http://www.jsdaima.com/p-373.html' target='_blank'>位置插件 </a></li>
<li><a href='http://www.jsdaima.com/p-372.html' target='_blank'>瀑布流</a></li>
<li><a href='http://www.jsdaima.com/p-371.html' target='_blank'>幻灯片</a></li>
<li><a href='http://www.jsdaima.com/p-370.html' target='_blank'>日期时分秒</a></li>
<li><a href='http://www.jsdaima.com/p-369.html' target='_blank'>裁剪图片</a></li>
<li><a href='http://www.jsdaima.com/p-368.html' target='_blank'>星级插件 </a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
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>
以上是“css如何制作途牛旅游网首页轮番图”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
