溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
