JS 实现 div 滑动效果，模拟平面滑动，模拟平面滑动效果

最新推荐文章于 2024-04-28 18:13:10 发布

紫薯馍馍

最新推荐文章于 2024-04-28 18:13:10 发布

阅读量1.8k

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/u012972294/article/details/102858300

版权

HTML 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

JS 实现 div 滑动效果，模拟平面滑动，模拟平面滑动效果

本来想找个现成的代码，找了很久要不是轮播页面切换效果，要不就是翻书翻页的效果。。。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
   <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>


    <style>
        .list{
            margin:100px;
            width:500px;
            height:250px;
            position:relative;
            overflow:hidden;
            border:1px solid #ccc;
        }
        .list div{
             border:1px solid #ccc;
             width:200px;
             height:200px;
            background:#fff;
            position: absolute;
        }
  
         
    </style>
</head>
<body>
    <div class="list">
        <div class="act" style=""><img src="./picture/pic1.png"> </img>   <a class="a" href="javascript:;" ></a>  </div>
         <div style=""><img src="./picture/pic2.png"> </img>     <a class="a" href="javascript:;" ></a> </div>
         <div style=""><img src="./picture/pic3.png"> </img>     <a class="a" href="javascript:;" ></a> </div>
         <div style=""><img src="./picture/pic4.png"> </img>     <a class="a" href="javascript:;" ></a> </div>

		 </div>
	
	
	     
     
    <script>
     $(function () {
         slide();
    });
    function slide() {
        var timer = null;
		var ds = $('.list div'), L = ds.length, ii = 1,list = 4,i = 0;
        function sliding() {
	
                var el = $(this).parent('div');
 

				var n = $(ds[i]);
 
				
			n.css({ left: 300, zIndex: ii++ }).animate({ left: 0 }, 2000)
				i++;
				if(i==4)
				{i=0}

        }
	 		timer = setInterval(sliding, 6000);
    }

	</script>
 
</body>	
</html>

紫薯馍馍

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JS 实现 div 滑动效果，模拟平面滑动，模拟平面滑动效果

JS 实现 div 滑动效果，模拟平面滑动，模拟平面滑动效果本来想找个现成的代码，找了很久要不是轮播页面切换效果，要不就是翻书翻页的效果。。。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional....
复制链接

扫一扫