轮播图左右箭头 jquery

发布时间:2020-07-31 08:25:41 作者:WarmDoll
来源:网络 阅读:1014

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

    <title>建造师考试网_全国专业建造师考试培训平台</title>

    <link href="http://static.wangxiao.cn/login/css/newlogin.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="http://img.wangxiao.cn/js/jquery-1.8.1.min.js"></script>

    <script type="text/javascript" src="http://static.wangxiao.cn/users/js/artDialog/artDialog.js"></script>

    <link href="http://sxjy.wangxiao.cn/sxjy/bootstrap/css/bootstrap.css" rel="stylesheet">

    <script src="/Content/js/user.js"></script>

    <link href="/Content/css/base.css" rel="stylesheet" type="text/css">

    <link href="http://jianzaoshi.cn/Content/css/index.css" rel="stylesheet" type="text/css">

    <style type="text/css">

        .header-logo {

            margin-top: 27px;

            margin-bottom: 27px;

        }


        .header-nav {

            margin-top: 47px;

        }


            .header-nav, .header-nav a {

                color: #555;

            }


        .flow-nav {

            overflow: hidden;

            height: 50px;

            line-height: 50px;

            position: fixed;

            z-index: 1000;

            width: 100%;

            background-color: #f3520a;

            top: 0;

        }

        .combgcolor{

          background-color: #f3520a;

        }

        .header-icon1 {

            background-p_w_picpath: url(/Content/p_w_picpaths/login.png);

        }


        .header-icon2 {

            background-p_w_picpath: url("/Content/p_w_picpaths/registered.png");

        }


        .erw-bottom {

            padding: 3px;

        }


        .erwe span {

            height: auto;

        }


        .outer-box {

            margin-top: -15px;

            height: 318px;

        }

         .show_box{

            min-width:1190px;

            margin:0 auto;

        }

        .ul.pic_list,.show_box{

            min-height:300px;

        }

        .left_btn,.right_click{

            width:50px;

            height:50px;

            background-color:#000;

            opacity:0.5;

            background-color: #000;

            opacity: 0.5;

            position: relative;

            z-index: 10;

            top:45%;

           cursor: pointer;

        }

       .left_btn{

        float:left;

        left:5%;

        }

        .right_click{

        float:right;

        right:5%;

        }

    </style>

</head>

<body>

<div class="show_box">

            <div class="left_btn">

                <img src="http://jianzaoshi.cn/Content/p_w_picpaths/leftbtn.png" width="100%">

            </div>

            <div class="right_click">

                <img src="http://jianzaoshi.cn/Content/p_w_picpaths/leftbtn.png" width="100%">

            </div>

            <ul class="pic_list">

                <li >

                    <a href="http://www.wangxiao.cn/jz1/83708370204.html" title="" target="_blank"><img alt="" src="https://cache.yisu.com/upload/information/20200311/55/213234.jpg"></a>

                </li>

                <li >

                    <a href="http://www.wangxiao.cn/jz2/53655365118.html" title="" target="_blank"><img alt="" src="https://cache.yisu.com/upload/information/20200311/55/213235.jpg"></a>

                </li>

            </ul>

            <div class="title_nav">

                <a href="javascript:;" target="_blank" class="" ></a>

                <a href="javascript:;" class="select" ></a>

            </div>

        </div>

</body>

<script type="text/javascript">

(function ($) {

        $.fn.turnPic = function () {

            var index = 0;

            var clickLeft = $(this).children(".left_btn");

            var clickRight = $(this).children(".right_click");

            var showUl = $(this).children("ul.pic_list").children("li");

            var len = showUl.length;

            var navList = $(this).children("div").children("a");

            var timer;

            var showImg=function(index) {

                showUl.eq(index).stop(true, true).fadeIn("slow").siblings().fadeOut("slow");

                navList.removeClass("select").css("opacity", "0.7").eq(index).addClass("select").css("opacity", "1");

            }

           timer = setInterval(function () {

                    showImg(index);

                    index++;

                    if (index == len) {

                        index = 0;

                    }

                }, 3000);

             var click=function(){

              clearInterval(timer);

            console.log(index)

                showImg(index);

                index++;

                if (index == len) {

                    index = 0;

                }

             };

            clickLeft.click(function () {

            click();

            });

            clickRight.click(function () {

            click();   

            });

            navList.mouseover(function () {

                index = navList.index(this);

                showImg(index);

            });

            $(this).hover(function () {

                clearInterval(timer);

            }, function () {

                 timer = setInterval(function () {

                    showImg(index);

                    index++;

                    if (index == len) {

                        index = 0;

                    }

                }, 3000);

            }).trigger("moverleave");

        }

     

    })(jQuery);



    $(function () {

        $(".show_box").turnPic();

    })

   

</script>

</html>


推荐阅读:
  1. Jquery左右移动
  2. Jquery图片左右滚动

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

jquery 轮播图 ue

上一篇:SQL学习之创建学生管理数据库

下一篇:vsftp服务器搭建

相关阅读

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

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