Jquery滑块展示

最新推荐文章于 2024-07-15 10:19:27 发布

yy211zhu

最新推荐文章于 2024-07-15 10:19:27 发布

阅读量554

点赞数 1

分类专栏： web 文章标签： jquery

本文链接：https://blog.csdn.net/yy211zhu/article/details/50755806

版权

web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

   以下是jquery轮播动画效果，后面讲逐步讲解学习

</pre><pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<title>Jquery滑块展示效果</title>
<script src="./Jscript/jquery-1.8.3.js" type="text/javascript"></script>
    <script type ="text/javascript">
        var img_now = 0;//图片轮播开始的图片为0
        var img_count = 6;//轮播图片的张数
        
        var t = setInterval("$('#btn_r').click()", 3000);//定时器每三秒执行一次('#btn_r').click()函数

        $(document).ready(function () {
            $("#btn_l").click(function () {
                img_now = (img_now + img_count - 1) % img_count;//点击左边按钮滑动
                moveto(img_now);
            });

            $("#btn_r").click(function () {
                img_now = (img_now + 1) % img_count;//点击右边按钮滑动
                moveto(img_now);
            });

            $("#div_outer").mouseenter(function () {
                $("#div_controls").fadeIn();
                clearInterval(t);//当鼠标进入展示区时，清除定时器，使图片滑动停止
            });

            $("#div_outer").mouseleave(function () {
                $("#div_controls").fadeOut();
                t = setInterval("$('#btn_r').click()", 3000);
            });

        });

        function moveto(i) {
            var _left = -(i * 640);
            $("#div_innerMove").animate({"opacity":0.3},500);//500为图片长度
            $("#div_innerMove").animate({ "left": _left });
            $("#div_innerMove").animate({ "opacity": 1 }, 500);
        }
    </script>
    <style type="text/css">
        #div_innerMove {  position:relative; width:4480px;}//宽度为div或者img宽度*图片张数  本例：640*7
        #div_innerMove img{ margin:0px; float:left;}
        
        #div_outer { width:640px; height:360px;
                     border:1px solid green;
                     margin:10px auto; 
                     background-image:url(../imgs/loading.gif);
                     background-repeat:no-repeat;
                     background-position:center; 
                     overflow:hidden;    }
        
        #btn_l,#btn_r
            { width:30px; height:30px; 
              padding:0px; margin:0px;
              background-image:url(../imgs/back_btn_1.jpg);
              border:1px solid #999;
              border-radius:8px; 
              float:left;
            }
            #btn_r { background-position:30px 0px;
                     float:right; }
            #div_controls { position:relative;                            
                            top:-195px;
                            width:630px;  margin:0px auto;
                            height:0px; 
                            display:none;   }
    </style>
</head>

<body>
<div>
        
        <div id="div_outer">
            <div id="div_innerMove" runat="server">
            <img src="./imgs/img1.jpg"/>
<img src="./imgs/img2.jpg"/>
<img src="./imgs/img3.jpg"/>
<img src="./imgs/img4.jpg"/>
<img src="./imgs/img5.jpg"/>
<img src="./imgs/img6.jpg"/>
<img src="./imgs/img7.jpg"/>
            </div>

            <div id="div_controls">
                <input id="btn_l" type="button" value="" />
                <input id="btn_r" type="button" value="" />
            </div>

        </div>

        <p style ="clear:both;">图片轮播展示</p>

    </div>
</body>
</html>

  效果

<img src="https://img-blog.csdn.net/20160228075432469?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

<img src="https://img-blog.csdn.net/20160228075509751?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

</pre><pre name="code" class="html">

yy211zhu

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery滑块展示

以下是jquery轮播动画效果，后面讲逐步讲解学习Jquery滑块展示效果 var img_now = 0;//图片轮播开始的图片为0 var img_count = 6;//轮播图片的张数 var t = setInterval("$('#btn_r').click()", 3000);//定时器每三秒执行一
复制链接

扫一扫

专栏目录