图片旋转切换效果

Posted 2020-09-20 小橙子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片旋转切换效果相关的知识，希望对你有一定的参考价值。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片旋转切换效果代码</title>
</head>
<style>
*{margin:0;padding:0;}
ul,li{list-style:none}
img{border:0;}

#d_tab29{
	position:relative; 
	height:400px;
	background:url(‘img/bg3.jpg‘) no-repeat center 0;
	text-align:left;
}
#d_tab29 .d_img{
	position:relative;
	margin:0 auto;
	width:1000px;
	height:100%
} 
#d_tab29 .d_img li{
	position:absolute;
	z-index:0;
	background:#000;
	text-align: center;
	overflow: hidden;
	display:none;
}
#d_tab29 .d_img li img{
	max-width:100%;
	max-height:100%;
    vertical-align: middle;
}
 
#d_tab29 .d_img li.d_pos1{
	display:list-item;width:400px;height:240px;line-height:236px;
	left:0%;	top:60px;	z-index:1;	
}
#d_tab29 .d_img li.d_pos2{
	display:list-item;width:450px;height:270px;line-height:266px;
	left:10%;top:40px;z-index:2;
}
#d_tab29 .d_img li.d_pos3{
	display:list-item;width:500px;height:300px;line-height:296px;
	left:25%;top:20px;z-index:3;
}
#d_tab29 .d_img li.d_pos4{
	display:list-item;width:450px;height:270px;line-height:266px;
	right:10%;top:40px;z-index:2;
}
#d_tab29 .d_img li.d_pos5{
	display:list-item;width:400px;height:240px;line-height:236px;
	right:0%;top:60px;z-index:1;
}

#d_tab29 .d_menu{position:absolute;bottom:20px;width:100%;text-align:center}
#d_tab29 .d_menu li{display:inline-block;zoom:1;*display:inline;background:url(‘img/btn.png‘) no-repeat 0 0;width:12px;height:12px;cursor:pointer;margin-right:3px}
#d_tab29 .d_menu li.d_select{background:url(‘img/btn.png‘) no-repeat 0 -18px}

#d_tab29 .d_next{position:absolute;left:50%;margin-left:475px;top:140px;z-index:10;cursor:pointer}
#d_tab29 .d_prev{position:absolute;left:50%;margin-left:-525px;top:140px;z-index:10;cursor:pointer}
</style>

<body style="min-width:1200px">
 

<div id="d_tab29">
		<ul class="d_img">			
			 
			<li class="d_pos1"><img src="http://s0.ifengimg.com/2017/05/26/8d2f31f1f405bc6f3ca90b1b6a30cb04.jpg" /></li>
			<li class="d_pos2"><img src="http://s0.ifengimg.com/2016/08/29/sup1_6252069a.jpg" /></li>
			<li class="d_pos3"><img src="http://s0.ifengimg.com/2016/09/18/294956800488973000_6a05b55e.jpg" /></li>
			<li class="d_pos4"><img src="http://s0.ifengimg.com/2016/09/18/22547823172663723_8160287a.jpg" /></li>
			<li class="d_pos5"><img src="http://s0.ifengimg.com/2017/05/25/0186b155315bb24686931bca84607c6b.jpg" /></li>
			<li><img src="http://s1.ifengimg.com/2016/12/05/1e4fce2fd0988a77c2edd48e08b8f2fa.jpg"></li>
			<li><img src="https://c1.ifengimg.com/mappa/2016/11/24/f2dec0d56eed1e61e7ccff1c750d2392.jpg"></li>
			<li><img src="http://s0.ifengimg.com/2017/05/26/dbcfb64bafa9990c1f3aaba9212103c6.jpg"></li>
		</ul>	
		<ul class="d_menu">
			 
		</ul>
		<p class="d_prev"><img src="img/prev.png" ></p>
		<p class="d_next"><img src="img/next.png" ></p>
</div>

<script src="http://s0.ifengimg.com/static/js/jquery-1.7.2.min_c4de8813.js"></script>
<script>
(function($) {
    $.fn.DB_rotateRollingBanner = function(options) {
        var defaults = {
            key: "",
            moveSpeed: 200,
            autoRollingTime: 5000
        };
        $.extend(defaults, options);
        return this.each(function() {
            var me = $(this);
            var ul = me.find(".d_img");
            var lis = ul.find(">li");
            var menu = me.find(".d_menu");
            var menuLis = menu.find(">li");
            var prev = me.find(".d_prev");
            var next = me.find(".d_next");
            var lisLength = lis.length;
            var num = 5;            // 显示的li数量；
            var NorP = "next";     // 用来判断 上一张 下一张；
            var timer;              // 定时器；
            var btnTimer;           // 点击 menu li按钮的 定时器；
            var visibleLi = [];     // 存贮显示li的css属性值；
            var allLi = [];         // 存贮所有的li；
            var isFinish = 1;       // 1 图片切换已经执行完  0 图片切换还没有执行完
            var clickIndex = 0;     // 点击的 menu li按钮 索引
            var currentIndex = 0;   // 正显示的 menu li的索引
            var sum = 0;            // 点击 menu li按钮后 要执行 “图片切换” 的次数
            var count = 0;          // 点击 menu li按钮后 记录“图片切换” 的次数
            w();
            function w() {
                init();      //存贮所有的li 并设置li的属性；初始化menu li按钮；
                bind();      //事件绑定
                rolling();   //定时任务
            }
            function init() {
                menu.html("");
                for (var i = 0; i < lisLength; i++) {   //遍历li
                    var liN = lis.eq(i);
                    if (i < num) {
                        visibleLi[i] = {
                            left: liN.position().left,
                            top: liN.position().top,
                            zIndex: liN.css("z-index"),
                            width: liN.width(),
                            height: liN.height(),
                            lineHeight:liN.css("line-height")
                        };
                        liN.css("left", visibleLi[i].left);
                    } else {
                        liN.css("left", visibleLi[num - 1].left);
                    }
                    allLi.push(liN);
                    menu.append("<li></li>");
                }
                menuLis = menu.find(">li");
                menuLis.eq(0).addClass("d_select");
            }
            function bind() {
                me.bind("mouseenter",
                function() {
                    clearInterval(timer);
                }).bind("mouseleave",
                function() {
                    rolling();
                });
                menuLis.bind("click",
                function() {
                    if (isFinish && currentIndex != $(this).index()) {
                        clickIndex = $(this).index();        //本次点击的 menu li的索引
                        isFinish = 0;
                        sum = Math.abs(clickIndex - currentIndex);        //点击 menu li按钮后 要执行 “图片切换” 的次数
                        if (clickIndex > currentIndex) {
                            NorP = "next";
                        } else {
                            NorP = "prev";
                        }
                        if (sum > Math.ceil(lisLength / 2)) { //如果一次要执行 lisLength/2 次以上  就换个方向  执行的次数就少些
                            sum = lisLength - sum;
                            if (NorP == "next") {
                                NorP = "prev";
                            } else {
                                NorP = "next";
                            }
                        }
                        count = 0;
                        change();
                        if (sum > 1) {
                            btnTimer = setInterval(function() {
                                if (isFinish) {
                                    change();
                                    isFinish = 0;
                                    if (count >= sum) {
                                        clearInterval(btnTimer);
                                    }
                                }
                            },
                            50)
                        }
                    }
                });
                next.bind("click",
                function() {
                    if (isFinish) {
                        NorP = "next";
                        isFinish = 0;
                        if (clickIndex == lisLength - 1) {
                            clickIndex = 0;
                        } else {
                            clickIndex++;
                        }
                        change();
                    }
                });
                prev.bind("click",
                function() {
                    if (isFinish) {
                        NorP = "prev";
                        isFinish = 0;
                        if (clickIndex == 0) {
                            clickIndex = lisLength - 1;
                        } else {
                            clickIndex--;
                        }
                        change();
                    }
                })
            }
            function change() {
                if (NorP == "next") {              // 下一张
                    for (i = 0; i < num; i++) {
                        var D = visibleLi[i - 1];
                        if (i == 0) {
                            allLi[i].fadeOut(defaults.moveSpeed);
                        } else {
                            allLi[i].css("z-index", D.zIndex).animate({
                                left: D.left,
                                top: D.top,
                                width: D.width,
                                height: D.height,
                                lineHeight: D.lineHeight
                            },
                            defaults.moveSpeed);
                        }
                    }
                    var D = visibleLi[num - 1];
                    if (allLi.length != num) {
                        allLi[num].css({
                            left: D.left,
                            top: D.top,
                            width: D.width,
                            height: D.height,
                            "z-index": D.zIndex,
                            lineHeight: D.lineHeight
                        }).fadeIn(defaults.moveSpeed,
                        function() {
                            isFinish = 1;
                        });
                    } else {
                        allLi[0].stop().css({
                            left: D.left,
                            top: D.top,
                            width: D.width,
                            height: D.height,
                            "z-index": D.zIndex,
                            lineHeight: D.lineHeight
                        }).fadeIn(defaults.moveSpeed,
                        function() {
                            isFinish = 1;
                        });
                    }
                    allLi.push(allLi.shift());
                } else {                 // 上一张
                    for (i = 0; i < num; i++) {
                        var D = visibleLi[i + 1];
                        if (i == num - 1) {
                            allLi[i].css("z-index", 0).fadeOut(defaults.moveSpeed);
                        } else {
                            allLi[i].css("z-index", D.zIndex).animate({
                                left: D.left,
                                top: D.top,
                                height: D.height,
                                width: D.width
                            },
                            defaults.moveSpeed);
                        }
                    }
                    var D = visibleLi[0];
                    allLi[allLi.length - 1].stop().css({
                        left: D.left,
                        top: D.top,
                        width: D.width,
                        height: D.height,
                        "z-index": D.zIndex,
                        lineHeight: D.lineHeight
                    }).fadeIn(defaults.moveSpeed,
                    function() {
                        isFinish = 1;
                    });
                    allLi.unshift(allLi.pop());
                }
                menuLis.removeClass("d_select");
                menuLis.eq(clickIndex).addClass("d_select");
                currentIndex = clickIndex;
                count++;
            }
            function rolling() {
                timer = setInterval(rotate, defaults.autoRollingTime);
            }
            function rotate() {
                next.click();
            }
        })
    }
})(jQuery);

	$(‘#d_tab29‘).DB_rotateRollingBanner({
		key:"c37080",            
		moveSpeed:200,           
		autoRollingTime:50000
	})
</script>

</body>
</html>
以上是关于图片旋转切换效果的主要内容，如果未能解决你的问题，请参考以下文章
点击按钮每次都能实现图片的旋转和切换
zx-image-view图片查看插件-切换旋转缩放移动
使用 ActionBar 旋转 Android 的双片段
请问鼠标滑过背景图片，图片围绕圆心旋转的效果怎么实现？css3也可以..
[JavaScript案例]360度全景照片
iCarousel——在iOS和Mac OS应用中实现3D CoverFlow旋转木马效果的开源类库