欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > HTML >

HTML基础必学列表

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

 

<!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='http://www.jsdaima.com/p-379.html' target='_blank'> <img src='images/1.jpg' alt='elastiStack拖拽堆叠在一起的图片' /> </a></li>

                    <li><a href='http://www.jsdaima.com/p-378.html' target='_blank'> <img src='images/2.jpg' alt='jQuery以波浪形式展现图片' /> </a></li>

                    <li><a href='http://www.jsdaima.com/p-377.html' target='_blank'> <img src='images/3.jpg' alt='simpleBtChecks美化复选框checkbox' /> </a></li>

                    <li><a href='http://www.jsdaima.com/p-376.html' target='_blank'> <img src='images/4.jpg' alt='css3演示4种不同的全屏幻灯片滑动效果' /> </a></li>

                    <li><a href='http://www.jsdaima.com/p-375.html' target='_blank'> <img src='images/5.jpg' alt='lightbox制作个性化弹出层' /> </a></li>

                    <li><a href='http://www.jsdaima.com/p-374.html' target='_blank'> <img src='images/6.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>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h14825.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2016-12-01 10:53 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。