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

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实现滑动效果可以通过以下方式实现: 1. 使用CSS3动画:可以使用CSS3的transition或者animation属性来实现滑动效果,通过JavaScript来控制CSS样式的变化。 2. 使用jQuery插件:jQuery插件库中有很多实现滑动效果的插件,例如swiper、slick等,可以直接调用插件来实现滑动效果。 3. 使用原生JavaScript:可以通过原生JavaScript来实现滑动效果,例如通过设置元素的left或者top属性值来实现滑动。 下面是一个使用原生JavaScript实现左右滑动效果的示例代码: HTML代码: ```html <div class="slider"> <ul> <li><img src="1.jpg"></li> <li><img src="2.jpg"></li> <li><img src="3.jpg"></li> </ul> </div> ``` CSS代码: ```css .slider { overflow: hidden; width: 600px; height: 400px; } .slider ul { list-style: none; margin: 0; padding: 0; width: 1800px; position: relative; left: 0; transition: left 0.5s ease-in-out; } .slider ul li { float: left; width: 600px; height: 400px; } ``` JavaScript代码: ```javascript var slider = document.querySelector('.slider'); var ul = slider.querySelector('ul'); var li = slider.querySelectorAll('li'); var len = li.length; var width = li[0].offsetWidth; var currentIndex = 0; // 点击向左箭头事件 document.querySelector('.prev').addEventListener('click', function() { if (currentIndex > 0) { currentIndex--; ul.style.left = -currentIndex * width + 'px'; } }); // 点击向右箭头事件 document.querySelector('.next').addEventListener('click', function() { if (currentIndex < len - 1) { currentIndex++; ul.style.left = -currentIndex * width + 'px'; } }); ``` 在上面的代码中,我们通过设置ul元素的left属性值来实现滑动效果,然后通过JavaScript来控制left属性值的变化实现左右滑动

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值