轮播效果(margin-left/top)移动

最新推荐文章于 2021-10-14 13:31:19 发布

weixin_34238642

最新推荐文章于 2021-10-14 13:31:19 发布

阅读量159

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/dream-w/p/5045151.html

版权

HTML代码：

<!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>采用margin-top/left移动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,user-scalable=no" /><title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="jquery.min.js"></script>
<link rel="stylesheet" href="css1.css" />
</head>
<body>
<div class="z-box">
    <ul class="u-box">
        <li><img src="1.jpg" /></li>
        <li><img src="2.jpg" /></li>
        <li><img src="3.jpg" /></li>
        <li><img src="4.jpg" /></li>
        <li><img src="5.jpg" /></li>
        <li><img src="6.jpg" /></li>
    </ul>
    <span class="z-prev"></span>
    <span class="z-next"></span>
    <ul class="n-box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>
<script src="js1.js"></script>
</body>
</html>

JS代码：

//
$(function(){

    //播放效果
    

    var timer=null;
    var index=0;
    //移动函数
    $(".n-box li").eq(index).css("fontSize","30px");
    function sMove(direction){
        
            
        if(parseInt(direction)>0){
            $(".u-box").stop(true,true).animate({marginTop:"0px"},300);
            //添加小按钮样式
            if(index<=0){
                index=$(".n-box li").length-1;
            }else{
                index--;
            }
        }else{
            //添加小按钮样式
            if(index>=$(".u-box li").length-1){
                index=0;
            }else{
                index++;
            }
            $(".u-box").stop(true,true).animate({marginTop:direction},300,function(){
                $(".u-box").css("marginTop","0px");
                $(".u-box").append($(".u-box li").eq(0));
            });
        }
        $(".n-box li").eq(index).css("fontSize","30px").siblings().css("fontSize","14px");
    }
    
    //自动轮播
    function autoPlay(direction){
        timer=setInterval(function(){
            sMove(direction);
        },2000);
    };
    
    //开启自动轮播
    autoPlay("-300px");
    
    //按钮
    $(".z-prev").click(function(){
        $(".u-box").css("marginTop","-300px");
        //alert("1"); 不是很明白
        $(".u-box li").eq($(".u-box li").length-1).insertBefore($(".u-box li").eq(0));
        //alert("1");
        sMove("300px");
    });
    
    $(".z-next").click(function(){
        sMove("-300px");
        
    });
    
    //鼠标移入
    $(".z-prev").mouseover(function(){
        //console.log("停止播放！");
        clearInterval(timer);
    });
    $(".z-prev").mouseout(function(){
        //console.log("开启自动播放！");
        autoPlay("-300px");
    });
    $(".z-next").mouseover(function(){
        //console.log("停止播放！");
        clearInterval(timer);
    });
    $(".z-next").mouseout(function(){
        //console.log("开启自动播放！");
        autoPlay("-300px");
    });
    
    //小按钮点击事件
    function smallButtonclick(){
        $(".n-box li").each(function(){            
            $(this).click(function(){    
                if(index>$(this).index()){
                    //console.log("$(this).index()="+$(this).index()+"/"+"index="+index);
                    var j=index-$(this).index();
                    for(var i=0;i<j;i++){                
                            $(".u-box").css("marginTop","-300px");
                            $(".u-box li").eq($(".u-box li").length-1).insertBefore($(".u-box li").eq(0));
                            sMove("300px");
                    }
                }else{
                    var j=$(this).index()-index;
                    for(var i=0;i<j;i++){
                        sMove("-300px");
                    }
                }    
            });        
        });
    }
    
    //小按钮移入
    function onSmallButton(){
        $(".n-box").mouseover(function(){
            clearInterval(timer);
        });
        $(".n-box").mouseout(function(){
            autoPlay("-300px");
        });
    }
    onSmallButton();
    smallButtonclick();

});

CSS代码：

@charset "utf-8";
*{
    margin:0px;
    padding:0px;
}
list{
    list-style:none;
}
.z-box{
    width:600px;
    height:300px;
    position:relative;
    margin:0px auto;
    overflow:hidden;
}
.u-box{
    width:600px;
    height:900px;
    /*position:absolute;*/
    left:0px;
    z-index:660;
}
.u-box li{
    float:left;
    list-style:none;
    margin-top:0px;
}
.z-prev{
    display:block;
    width:20px;
    height:20px;
    position:absolute;
    top:45%;
    left:10px;
    box-shadow:0px 0px 5px yellow;
    z-index:661;
    cursor:pointer;
}
.z-next{
    display:block;
    width:20px;
    height:20px;
    position:absolute;
    top:45%;
    right:10px;
    box-shadow:0px 0px 5px yellow;
    z-index:661;
    cursor:pointer;
}
.n-box{
    width:100%;
    height:40px;
    line-height:40px;
    text-align:center;
    position:absolute;
    z-index:601;
    bottom:20px;
}
.n-box li{
    display:inline;
    box-shadow:0px 0px 5px white;
    padding:2px 8px;
    cursor:pointer;
}

纯属个人练习效果效果都是凑出来望批评指教！

转载于:https://www.cnblogs.com/dream-w/p/5045151.html

weixin_34238642

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播效果(margin-left/top)移动

HTML代码：<!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&...
复制链接

扫一扫