首页 > 代码库 > 轮播图左右箭头 jquery

轮播图左右箭头 jquery

<!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="http://www.mamicode.com/Content/js/user.js"></script>

    <link href="http://www.mamicode.com/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-image: url(/Content/images/login.png);

        }


        .header-icon2 {

            background-image: url("/Content/images/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/images/leftbtn.png" width="100%">

            </div>

            <div class="right_click">

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

            </div>

            <ul class="pic_list">

                <li style="display: none;">

                    <a href="http://www.wangxiao.cn/jz1/83708370204.html" title="" target="_blank"><img src="http://img.wangxiao.cn/bjupload/SmallSite/2016-11-22/e344daa1-4860-4a2d-85c3-13b9a9dbf500.jpg"></a>

                </li>

                <li style="display: list-item;">

                    <a href="http://www.wangxiao.cn/jz2/53655365118.html" title="" target="_blank"><img src="http://img.wangxiao.cn/bjupload/SmallSite/2016-11-22/c24971bb-574f-4476-a8b7-3a5cd5bef96c.jpg"></a>

                </li>

            </ul>

            <div class="title_nav">

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

                <a href="javascript:;" class="select" style="opacity: 1;"></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>


轮播图左右箭头 jquery