JQ滑动幻灯片

最新推荐文章于 2022-06-06 21:45:29 发布

萧萧可乐

最新推荐文章于 2022-06-06 21:45:29 发布

阅读量2.4k

点赞数

分类专栏： JQuery 文章标签： float function class div border html

本文链接：https://blog.csdn.net/NIHAOX1/article/details/7428355

版权

JQuery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

网上找了好久的JQ滑动幻灯片的代码都是高手写的
给了很多的参数改起来用很简单大家可以去看看

这个是我没事自己写的主要是练习几个函数的用法

HTML部分：

<div class="silde">
    	<ul class="container">
        	<li><img src="images/00001.jpg" height="200px" width="960px" /></li>
            <li><img src="images/00002.jpg" height="200px" width="960px" /></li>
            <li><img src="images/00001.jpg" height="200px" width="960px" /></li>
            <li><img src="images/00002.jpg" height="200px" width="960px" /></li>
            <li><img src="images/00001.jpg" height="200px" width="960px" /></li>
        </ul>
        <div class="index">
        	<ul>
            	<li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
            </ul>
        </div>
    </div>

CSS部分：

.silde{width:960px; height:200px; overflow:hidden; display:block; border:1px #999 dashed; margin-top:100px; float:left;}
.silde .container{width:5050px; height:auto; position:relative;}
.silde ul{list-style:none;}
.silde ul li{float:left; width:960px; text-align:center;}
.silde .index{width:200px; height:30px; margin-right:5px; position:absolute; left:1000px; top:100px;}
.index li{list-style:none; float:left;}
.index li a{background:#CCCCCC; width:100px; height:20px; float:left; text-align:center; margin:10px; display:block; opacity:0.5; text-decoration:none; color:#FFF;}
.index li a:hover{background:#FC3; float:left;}

JQ部分：

 var ifmove=false;
var setleft=0;
var CN=1;
var PN=1;
var speed=0;
var setoffmove=0;
var T=null;
var lock=false;
function moveleft(){
    try{
        if(ifmove==true){
            setleft-=speed;
            setoffmove-=speed;
            $(".container").css("left",setleft);
            if(setoffmove<=0){
                lock=false;
                ifmove=false;    
            }
            T=window.setTimeout("moveleft()",10);
        }
    }catch(e){
        alert(e);
    }
};
function moveright(){
    try{
        if(ifmove==true){
            setleft+=speed;
            setoffmove-=speed;
            $(".container").css("left",setleft);
            if(setoffmove<=0){
                lock=false;
                ifmove=false;
            }
            T=window.setTimeout("moveright()",10);
        }
    }catch(e){
        alert(e);
    }
};
$(document).ready(function(e) {
    $("li").click(function(){
        if(lock==false){
            lock=true;
            CN=$(this).find("a").html();
            if(CN>PN){
                setoffmove=(CN-PN)*960;
                ifmove=true;
                speed=10;
                PN=CN;    
                moveleft();
            }else if(CN<PN){
                setoffmove=(PN-CN)*960;
                ifmove=true;
                speed=10;
                PN=CN;
                moveright();
            }
        }
        return false;
    });
});

PS:

DIV不能使用 position：absolute 应该用 position:relative; 这里开始的时候没注意弄了很久。。。。