jquery轮播图

发布时间:2020-11-26作者:小灵龙点击:102

问题描述:
用jquery做一个轮播图。效果如下图:
是的

解决办法:


<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="renderer" content="webkit|ie-comp|ie-stand">

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<title>{$eyou.field.seo_title}</title>

<meta name="description" content="{$eyou.field.seo_description}" />

<meta name="keywords" content="{$eyou.field.seo_keywords}" />



</head>

<body>

<style>
    .current{
        border: 2px solid red;

    }

</style>

   <div class="aaaaa">

        <div class="zhongjian_con">

           <!-- <img class="datu" src=""/> -->

               <div class="datu">

                   <img class=""  src="/template/pc/skin/img/huodong2.jpg"/>

                <img class=""  src="/template/pc/skin/img/huodong3.jpg"/>

                <img class=""  src="/template/pc/skin/img/huodong4.jpg"/>

                <img class=""  src="/template/pc/skin/img/huodong5.jpg"/>

                <img class=""  src="/template/pc/skin/img/huodong6.jpg"/>

                <img class=""  src="/template/pc/skin/img/huodong7.jpg"/>

               </div>

            <ul class="clearfix" id="yuandian">

                <li >

                    <a href="#">

                        <img  src="/template/pc/skin/img/huodong2.jpg"/>

                    </a>

                </li>

                <li >

                    <a href="#">

                        <img src="/template/pc/skin/img/huodong3.jpg"/>

                    </a>

                </li>

                <li >

                    <a href="#">

                        <img src="/template/pc/skin/img/huodong4.jpg"/>

                    </a>

                   </li>

                <li >

                    <a href="#">

                        <img src="/template/pc/skin/img/huodong5.jpg"/>

                    </a>

                </li>

                <li >

                    <a href="#">

                        <img src="/template/pc/skin/img/huodong6.jpg"/>

                    </a>

                </li>

                <li >

                    <a href="#">

                        <img src="/template/pc/skin/img/huodong7.jpg"/>

                    </a>

                </li>

            </ul>

        </div>

        </div>

    </div>

</div>

<script>

    /*i表示当前图片的下标和当前小图的下标(图片和小图是对应关系)*/

    var i = 0;

    var timer;

    $(function(){

        /*Step 1: 设置页面刚加载出来显示的是第一张图片*/

        $(".datu img").eq(0).show().siblings().hide();

        /*开始做图片轮播,使用定时器*/

        start();

        /*Step 2: 鼠标移入小圈的时候,首先清除定时器,找到当前小图的索引,改变当前显示的图片,使其变换成小图对应的图片,当前小图变换样式*/

        $("#yuandian li").hover(function(){

            clearInterval(timer);

            i = $(this).index();

            change();

        }, function(){

            /*鼠标移出的时候,重新启动定时器*/

            start();

        });

    });

    /*开始轮播函数*/

    function start(){

        /*定时器,每个图片在页面上停留的时间是2s*/

        timer = setInterval(function(){

            i++;

            if(i == 7){

                i = 0;

            }

            change();

        }, 2000);

    }

    /*当前图片及对应小图变换函数*/

    function change(){

        /*当前图片显示,其他图片隐藏*/

        $(".datu img").eq(i).show().siblings().hide();

        /*当前小图添加类current,其他小图删除其类current*/

        $("#yuandian li").eq(i).addClass("current").siblings().removeClass("current");

    }

</script>

</body>

</html>

标签: