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

发布时间:2022-02-28 10:04:05 作者:小新
来源:亿速云 阅读:188

这篇文章主要介绍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如何制作途牛旅游网首页轮番图”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. CSS3怎么制作文字背景图
  2. 仿途牛旅游APP项目开发

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:Java中的类动态加载和热替换如何使用

下一篇:css如何制作百叶窗效果

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》