为了账号安全,请及时绑定邮箱和手机立即绑定

bunner 图 详细

/ 猿问

bunner 图 详细

RedGuitar 2018-12-11 15:31:45

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>jquery 轮播图</title>

    <style type="text/css">


    *{

        margin: 0;padding: 0;list-style: none;

    }

    /*设置轮播区域样式*/

        #main{

            width: 660px;

            height: 260px;

            margin:0 auto;

            background-color: #ccc;

          

            margin-top: 50px;

            position: relative;

        }

        /*设置轮播图片的大小*/

       #main .img img{

        width: 100%;

        height: 100%;

        position: absolute;

       }


       /*设置需要改变图片的运用的类*/

       .display-img{

        display: none;

       }

       .display-block{

        display: block;

       }

           

            

       /*设置button 区域的位置*/

        .button{

            position: absolute;

            bottom:10px;

            right: 20px;


        }


        /*设置button的原始样式*/

        button{

            

            margin-right: 10px;

            height: 10px;

            width: 10px;

            border-radius: 100%;

            background-color: transparent;

            border: 1px white solid;

            outline: none;/* 取消外边框*/


         }

         


         

        /*改变button 样式的类*/


         .achive{

             background-color: white;

         }



    /*设置下一张/上一张的位置样式*/

         #pre{

            width: 100%;

           

            position: absolute;

            top: 105px;

            left: 0;


         }

         /*设置pre图片的占位大小*/

         #pre img{

            width: 50px;

            height: 50px;

            

         }

         /*定位上一张的控制的位置*/

         #pre img:first-child{

            float: left;

         }

         /*定位下一张 控制的位置*/

         #pre img:last-child{

            float: right;

         }







    </style>

</head>

<body>


    <div id="main">

        <div class="img">

                    <img src="images/1.jpg" alt=""  class="display-img display-block">

                    <img src="images/2.jpg" alt="" class="display-img">

                    <img src="images/3.jpg" alt="" class="display-img">

                    <img src="images/4.jpg" alt="" class="display-img">

                    <img src="images/5.jpg" alt="" class="display-img">

                    


        </div>

        <div class="button">

            <button></button>

            <button></button>

            <button></button>

            <button></button>

            <button></button>

            

        </div>

        <div id="pre">

           

             <img src="images/pre2.png" alt="" class="pre1"> 

             <img src="images/pre.png" alt="" >


        </div>

       

    


    </div>



    <script src="jquery.js"></script>

    <!-- 引用jquery 3.x.x 文件 -->

    <script>

// 用改变索引的方式改变图片

            var index = 0; //用于改变图片的索引基数


            var btn = $('button');//获取 button 句柄

            var img = $('.img img'); //img句柄

            var pre = $('#pre img');  //上一张下一张 控制句柄

           

            var timer = null; //用于setInterval存储

            // 改变图片的函数

            // 在外部封装函数    注意在jquery 函数的调用方式 

             function changeImg(index){

                        btn.removeClass('achive');//清除图片的achive 的类 achive de 类样式 

                        img.removeClass('display-block');//清除img 的类样式

                        

                        btn.eq(index).addClass('achive'); //添加相应的类样式

                        img.eq(index).addClass('display-block'); //添加相应的类样式

               }

          

        $(function(){

            // var index = 0;

            // var btn = $('button');

            // var img = $('.img img');

            // var pre = $('#pre img');

            // var main = $('#main');

            // var timer = null;

          


            $('#main').hover(

                // mouseover 图片停止 index 停止加法

                // mouseover函数开始

                function(){

                    clearInterval(timer);


                },

                // mouseout index 做加法 N 秒的加法

                // //mouseout函数开始

               function(){

                    timer = setInterval(function(){

                        index = index + 1;

                        if (index > img.length-1) {

                            index = 0;

                        }  

                       changeImg(index);//调用改变图片函数

                    },3000)  //每n秒调用一次函数


            })

            // 调用 mouseout  让index 加法

             $('#main').mouseout();//自身调用  当页面加载完成 可以自行启动




                // btn  索引 对应img元素的索引

               btn.click(function(event){

                var target = $(event.target);

                  var btn1 = document.querySelectorAll('button');

                        for (var i = 0; i < btn1.length; i++) {

                            btn1[i].id = i;

                            index = this.id;

                                     

                        }

                        changeImg(index);//调用改变图片函数

            })

              



              // 箭头改变索引  改变图片

              // 点击一次 index -1

               pre.eq(0).click(function(){

                index =index - 1;

                if (index < 0) {

                    index = img.length -1;


                }

                changeImg(index);//调用改变图片函数

               })


               // 点击一次 index+ 1

               pre.eq(1).click(function(){

                index = index + 1;

                if (index > img.length-1) {

                    index = 0;

                }

                changeImg(index);//调用改变图片函数

               })



        })



           


    </script>

 




   

</body>

</html>


查看完整描述

1 回答

?
浅白黄

bunner?banner?

查看完整回答
反对 回复 2019-01-04

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信