自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图

最新推荐文章于 2023-01-15 23:12:37 发布

weixin_33701564

最新推荐文章于 2023-01-15 23:12:37 发布

阅读量141

点赞数

文章标签： javascript 前端 ViewUI

原文链接：https://yq.aliyun.com/articles/20706

版权

引言

学习jQuery有年头了，刚开始学习时自己动手写过轮播图，放的久了以至于忘了大致思路了。现在转而做前端，抽空把jquery轮播图拿出来写一写，把各种思路都自己练习练习，这里主要使用动态修改marginTop来实现。

实现原理

1、除第一张图片外，其余图片全部隐藏，4张图片重叠起来。

2、导航按钮添加mouseover和mouseleave事件。

3、设置interval函数，启动定时器调用ShowImg函数。

4、动态修改marginTop属性达到上下轮播的效果，说道动态修改margin属性，在以前滑动门中也是这个原理。

效果图（图片引用自橡树小屋博客）

实现代码

 
          <html> 
         
          <head> 
         
          <meta http-equiv= 
          "Content-Type"  
          content= 
          "text/html; charset=UTF-8" 
          > 
         
          <title>Index</title> 
         
          <script type= 
          "text/javascript"  
          src= 
          "js/jquery-1.4.1.js" 
          ></script> 
         
          <style type= 
          "text/css" 
          > 
         
          *{margin: 0;padding: 0;} 
         
          ul li{list-style: none;} 
         
          #scrollpics{width: 478px;height: 286px;overflow: hidden;position: relative;margin:30px 50px;} 
         
          .num{position:absolute;right: 8px;bottom: 8px;} 
         
          .num li { 
          float 
          :left;color:#FF7300;text-align: center;width: 16px;height: 16px;line-height: 16px;border: 1px solid #FF7300;background-color: #fff; border-radius: 10px;overflow: hidden;cursor: pointer;margin-left: 7px;} 
         
          .num li. 
          on  
          {color:#fff;background-color: #FF7300;} 
         
          </style> 
         
          <script type= 
          "text/javascript" 
          > 
         
          var  
          index=0; 
         
          var  
          adTimer; 
         
          $(function(){ 
         
          var  
          len = $( 
          "ul.num li" 
          ).length; 
         
          $( 
          ".num li" 
          ).mouseover(function(){ 
         
          index=$( 
          ".num li" 
          ).index( 
          this 
          ); 
         
          ShowImg(index); 
         
          }); 
         
          $( 
          "#scrollpics" 
          ).hover(function(){ 
         
          clearInterval(adTimer); 
         
          },function(){ 
         
          adTimer=setInterval(function(){ 
         
          ShowImg(index); 
         
          index++; 
         
          if 
          (index==len){ 
         
          index=0; 
         
          } 
         
          },3000) 
         
          }).trigger( 
          'mouseleave' 
          ); 
         
          }); 
         
          function ShowImg(index){ 
         
          var  
          adHeight=$( 
          "#scrollpics>ul>li:first" 
          ).height(); 
         
          $( 
          ".slider" 
          ).stop( 
          true 
          , 
          false 
          ).animate({ 
         
          "marginTop" 
          :-adHeight*index+ 
          "px" 
         
          },1000); 
         
          $( 
          ".num li" 
          ).removeClass( 
          "on" 
          ).eq(index).addClass( 
          "on" 
          ); 
         
          } 
         
          </script> 
         
          </head> 
         
          <body> 
         
          <div id= 
          "scrollpics" 
          > 
         
          <ul  
          class 
          = 
          "slider" 
          > 
         
          <li><img src= 
          "img/p1.jpg" 
          ></li> 
         
          <li><img src= 
          "img/p3.jpg" 
          ></li> 
         
          <li><img src= 
          "img/p4.jpg" 
          ></li> 
         
          <li><img src= 
          "img/p5.jpg" 
          ></li> 
         
          </ul> 
         
          <ul  
          class 
          = 
          "num" 
          > 
         
          <li  
          class 
          = 
          "on" 
          >1</li> 
         
          <li>2</li> 
         
          <li>3</li> 
         
          <li>4</li> 
         
          </ul> 
         
          </div> 
         
          </div> 
         
          </body> 
         
          </html>

引言
     学习jQuery有年头了，刚开始学习时自己动手写过轮播图，放的久了以至于忘了大致思路了。现在转而做前端，抽空把jquery轮播图拿出来写一写，把各种思路都自己练习练习，这里主要使用动态修改marginTop来实现。

实现原理
     1、除第一张图片外，其余图片全部隐藏，4张图片重叠起来。

     2、导航按钮添加mouseover和mouseleave事件。

     3、设置interval函数，启动定时器调用ShowImg函数。

     4、动态修改marginTop属性达到上下轮播的效果，说道动态修改margin属性，在以前滑动门中也是这个原理。

 

效果图（图片引用自橡树小屋博客）




 

实现代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Index</title>
<script type="text/javascript" src="js/jquery-1.4.1.js"></script>
<style type="text/css">
    *{margin: 0;padding: 0;}
    ul li{list-style: none;}
    #scrollpics{width: 478px;height: 286px;overflow: hidden;position: relative;margin:30px 50px;}
    .num{position:absolute;right: 8px;bottom: 8px;}
    .num li {float:left;color:#FF7300;text-align: center;width: 16px;height: 16px;line-height: 16px;border: 1px solid #FF7300;background-color: #fff; border-radius: 10px;overflow: hidden;cursor: pointer;margin-left: 7px;}
    .num li.on {color:#fff;background-color: #FF7300;}
</style>
<script type="text/javascript">
     
    var index=0;
    var adTimer;
 
 
    $(function(){
        var len = $("ul.num li").length;
        $(".num li").mouseover(function(){
            index=$(".num li").index(this);
            ShowImg(index);
        });
 
        $("#scrollpics").hover(function(){
            clearInterval(adTimer);
        },function(){
            adTimer=setInterval(function(){
                ShowImg(index);
                index++;
                if(index==len){
                    index=0;
                }
            },3000)
        }).trigger('mouseleave');
 
    });
 
    function ShowImg(index){
        var adHeight=$("#scrollpics>ul>li:first").height();
 
        $(".slider").stop(true,false).animate({
            "marginTop":-adHeight*index+"px"
        },1000);
 
        $(".num li").removeClass("on").eq(index).addClass("on");
    }
</script>
</head>
<body>
    <div id="scrollpics">
        <ul class="slider">
            <li><img src="img/p1.jpg"></li>
            <li><img src="img/p3.jpg"></li>
            <li><img src="img/p4.jpg"></li>
            <li><img src="img/p5.jpg"></li>
        </ul>
        <ul class="num">
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</div>
</body>
</html>

weixin_33701564

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图

引言学习jQuery有年头了，刚开始学习时自己动手写过轮播图，放的久了以至于忘了大致思路了。现在转而做前端，抽空把jquery轮播图拿出来写一写，把各种思路都自己练习练习，这里主要使用动态修改marginTop来实现。实现原理 1、除第一张图片外，其余图片全部隐藏，4张图片重叠起来。 2、导航按钮添加m...
复制链接

扫一扫