仿iphone手指左右滚动图片

最新推荐文章于 2022-11-28 21:37:05 发布

ffshenghui

最新推荐文章于 2022-11-28 21:37:05 发布

阅读量904

点赞数

分类专栏： JQuery 文章标签：仿iphone 手指左右滚动图片滑屏

本文链接：https://blog.csdn.net/ffshenghui/article/details/8705550

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
    <title>仿iphone手指左右滚动图片</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    <style>
* {
	margin: 0;
	padding: 0;
}
.clip {
	width: 100%;
	max-width: 600px;
	overflow: hidden;
}
.pan {
	width: 400%;
	-o-transition: -o-transform 2s;
	-moz-transition: -moz-transform 2s;
	-webkit-transition: -webkit-transform 2s;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}
.pan div {
	display: block;
	float: left;
	width: 23%;
	-moz-user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
}
.pan div img {
	width: 100%;
}
#listSmall {
	width: 100%;
}
#listSmall ul {
	list-style: none;
}
#listSmall ul li {
	float: left;
	width: 23%;
	margin-right: 2.5%;
}
#listSmall ul li.addBor {
}
#listSmall ul li.addBor img {
	width: 100%;
	border: 2px #C00 solid;
}
#listSmall ul li img {
	width: 100%;
	border: 2px #ddd solid;
}
#listSmall ul li img:hover {
	cursor: pointer;
}
#btn {
}
#btn #left {
	float: left;
	width: 45%;
	text-align: right;
}
#btn #right {
	float: right;
	width: 45%;
	text-align: left;
}
#btn #left img, #btn #right img {
	cursor: pointer;
}
.clear {
	clear: both;
}
</style>
    <script>
			
        var position = 1;
        
        function next() {	
            position -= 23;
            if (position <= -69)
                position = -68;	
            update();
			
        }
        function prev() {	
            position += 23;
            if (position > 1)
                position = 1;	
            update();
			
        }
		
		

        function update() {
            var pan = document.getElementById("pan");
            pan.style.OTransform = "translateX(" + position + "%)";
            pan.style.MozTransform = "translateX(" + position + "%)";
            pan.style.WebkitTransform = "translateX(" + position + "%)";
			$("#listSmall ul li").removeClass('addBor');
			
			if(position == 1){
				$("#listSmall ul li").removeClass('addBor');
			    $("#listSmall ul li img#img01").parentsUntil().addClass('addBor');	
				
				}
			else if(position == -22){
				
			$("#listSmall ul li").removeClass('addBor');
			    $("#listSmall ul li img#img02").parentsUntil().addClass('addBor');	
				}
			else if(position == -45){
				$("#listSmall ul li").removeClass('addBor');
			    $("#listSmall ul li img#img03").parentsUntil().addClass('addBor');	
				}
			else if(position == -68){
				$("#listSmall ul li").removeClass('addBor');
			    $("#listSmall ul li img#img04").parentsUntil().addClass('addBor');	
				}
			
        }
        $(function() {
			$("#listSmall ul li").last().css("margin-right",0);
			$("#img01").parentsUntil().addClass('addBor');
			pan.style.OTransform = "translateX(" + 1 + "%)";
            pan.style.MozTransform = "translateX(" + 1 + "%)";
            pan.style.WebkitTransform = "translateX(" + 1 + "%)";
            $(window).bind("swipeleft", next);
            $(window).bind("swiperight", prev);
			
		
				
			
			
			$("#listSmall ul li img").click( function(){
			    var Namb = $("#listSmall ul li img").index($(this));
			    $("#listSmall ul li").removeClass('addBor');
			    $(this).parentsUntil().addClass('addBor');	
			    pan.style.OTransform = "translateX(" + (-23*Namb+1) + "%)";
                pan.style.MozTransform = "translateX(" + (-23*Namb+1) + "%)";
                pan.style.WebkitTransform = "translateX(" + (-23*Namb+1) + "%)";			
			});	
			
			
            $(window).bind("keydown", function(event) {
                if (event.which==37)
                    prev();
                else if (event.which==39)
                    next();
            });
            $("img").bind("dragstart", function(ev) { ev.preventDefault(); });
        });
    </script>
    </head>
    <body>
    <div data-role="page">
      <div data-role="content">
        <div class="clip">
          <div id="pan" class="pan">
            <div><a href="#"><img src="/jscss/demoimg/wall1.jpg" id="img01"></a></div>
            <div><a href="#"><img src="/jscss/demoimg/wall2.jpg" id="img02"></a></div>
            <div><a href="#"><img src="/jscss/demoimg/wall3.jpg" id="img03"></div>
            <div><a href="#"><img src="/jscss/demoimg/wall4.jpg" id="img04"></a></div>
          </div>
          <div class="clear"></div>
          <div id="listSmall">
            <ul>
              <li><img src="/jscss/demoimg/wall1.jpg"></li>
              <li><img src="/jscss/demoimg/wall2.jpg"></li>
              <li><img src="/jscss/demoimg/wall3.jpg"></li>
              <li><img src="/jscss/demoimg/wall4.jpg"></li>
            </ul>
          </div>
          <div class="clear"></div>
          <div id="btn">
            <div id="left"><img src="images/left.png" onClick="prev();"></div>
            <div id="right"><img src="images/right.png" onClick="next();"></div>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

ffshenghui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿iphone手指左右滚动图片

仿iphone手指左右滚动图片 * { margin: 0; padding: 0;}.clip { width: 100%; max-width: 600px; overflow: hidden;}.pan { width: 400%; -o-transition: -o-transform 2s; -moz-transition:
复制链接

扫一扫