一个jquery的slide，很有意思的说

2024-04-27 21:14•Android•阅读 2857
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>JavaScript slider</title>
</head>
<body>
<style>
        br {clear:both;}
        .frame {
                width:600px;
                height:240px;
                background-color:#CCC;
                overflow:hidden;
        }
        .frame .list {
                list-style:none;
                padding:0;
                margin:0;
                width:10000px;
        }
        .frame .list li {
                width:600px;
                height:240px;
                float:left;
        }
        .frame #big_list2 {
                height:10000px;
        }
        .frame #big_list2 li {
                clear:both;
        }
        .frame #big_list4 {
                height:10000px;
        }
        .frame #big_list4 li {
                clear:both;
        }
        
        .l_frame {
                width:260px;
                height:80px;
                background-color:#CCC;
                overflow:hidden;
                float:left;
        }
        .l_frame .list {
                list-style:none;
                padding:0;
                margin:0;
                width:10000px;
        }
        .l_frame .list li {
                float:left;
                width:76px;
                height:76px;
                cursor:pointer;
                border:solid 2px #cc3910;
        }
        .l_frame .list .cur {
                border:solid 2px #0FF;
        }
        .l_frame2 {
                height:208px;
                width:80px;
                background-color:#CCC;
                overflow:hidden;
        }
        .l_frame2 .list {
                list-style:none;
                padding:0;
                margin:0;
                height:10000px;
        }
        .l_frame2 .list li {
                width:76px;
                height:76px;
                cursor:pointer;
                border:solid 2px #cc3910;
        }
        .l_frame2 .list .cur {
                border:solid 2px #0FF;
        }
        
        
        .slide_nav {
                height:80px;
                width:16px;
                
                display:block;
                float:left;
                background-color:#2A0;
                text-indent:-10000px;
                
        }
        .slide_nav2 {
                width:80px;
                height:16px;
                display:block;
                background-color:#2A0;
                text-indent:-10000px;
                
        }
</style>
<h3>A、大图：向左轮转；小图：向左轮转</h3>
<div >
        <ul >
                <li >aaaa</li>
                <li >bb</li>
                <li >cc</li>
                <li >dd</li>
                <li >eeee</li>
        </ul>
</div>
<br />
<a >left</a>
<div >
        <ul >
                <li class="cur" >aaaa</li>
                <li >bb</li>
                <li >cc</li>
                <li >dd</li>
                <li >eeee</li>
        </ul>
</div>
<a >right</a>
<br />
<br />
<br />
<br />
<h3>B、大图：向上轮转；小图：向左轮转</h3>
<div >
        <ul >
                <li >aaaa</li>
                <li >bb</li>
                <li >cc</li>
                <li >dd</li>
                <li >eeee</li>
                <li >FFF</li>
        </ul>
</div>
<br />
<a >a</a>
<div >
        <ul >
                <li class="cur" >aaaa</li>
                <li >bb</li>
                <li >cc</li>
                <li >dd</li>
                <li >eeee</li>
                <li >FFF</li>
        </ul>
</div>
<a >b</a>
<br />
<br />
<br />
<br />
<h3>C、大图：向左轮转；小图：向上轮转</h3>
<div >
        <div >
                <ul >
                        <li >aaaa</li>
                        <li >bb</li>
                        <li >cc</li>
                        <li >dd</li>
                        <li >eeee</li>
                        <li >FFF</li>
                </ul>
        </div>
</div>
<div >
        <a >a</a>
        <div >
                <ul >
                        <li class="cur" >aaaa</li>
                        <li >bb</li>
                        <li >cc</li>
                        <li >dd</li>
                        <li >eeee</li>
                        <li >FFF</li>
                </ul>
        </div>
        <a >b</a>
</div>
<br />
<br />
<br />
<br />
<h3>D、大图：向上轮转；小图：向上轮转</h3>
<div >
        <div >
                <ul >
                        <li >aaaa</li>
                        <li >bb</li>
                        <li >cc</li>
                        <li >dd</li>
                        <li >eeee</li>
                        <li >FFF</li>
                </ul>
        </div>
</div>
<div >
        <a >a</a>
        <div >
                <ul >
                        <li class="cur" >aaaa</li>
                        <li >bb</li>
                        <li >cc</li>
                        <li >dd</li>
                        <li >eeee</li>
                        <li >FFF</li>
                </ul>
        </div>
        <a >b</a>
</div>
<br />
<br />
<br />
<br />
</body>
</html>
<script type="text/javascript">
//初始化
function C_slider(frame,list,Lframe,Llist,forwardEle,backEle,scrollType,LscrollType,acitonType,autoInterval){
        this.frame = frame;
        this.list = list;
        this.Lframe = Lframe;
        this.Llist = Llist;
        this.forwardEle = forwardEle;
        this.backEle = backEle;
        this.scrollType = scrollType;
        this.LscrollType = LscrollType;
        this.acitonType = acitonType;
        this.autoInterval = autoInterval;
        
        this.slideLength = $("#"+this.Llist+" > li").length;//总的slider数量
        this.currentSlide = 0;
        this.FrameHeight = $("#"+this.frame).height();
        this.FrameWidth = $("#"+this.frame).width();
        this.lFrameHeight = $("#"+this.Lframe).height();
        this.lFrameWidth = $("#"+this.Lframe).width();
        this.lListHeight = $("#"+this.Llist+" >li").eq(0).outerHeight(true);
        this.lListWidth = $("#"+this.Llist+" >li").eq(0).outerWidth(true);
        
        var self = this;
        
        for(var i = 0; i<this.slideLength; i++) {
                $("#"+this.Llist+" > li").eq(i).data("index",i);
                $("#"+this.Llist+" > li").eq(i).bind(this.acitonType,function(){
                        self.go($(this).data("index"));
                });
        };
        
        //给“上一个”、“下一个”按钮添加动作
        $("#"+this.forwardEle).bind('click',function(){
                self.forward();
                return false;
        });
        $("#"+this.backEle).bind('click',function(){
                self.back();
                return false;
        });
        
        //定论鼠标划过时，自动轮换的处理
        $("#"+this.frame+",#"+this.Lframe+",#"+this.forwardEle+",#"+this.backEle).bind('mouseover',function(){
                clearTimeout(self.autoExt);
        });
        
        $("#"+this.frame+",#"+this.Lframe+",#"+this.forwardEle+",#"+this.backEle).bind('mouseout',function(){
                clearTimeout(self.autoExt);
                self.autoExt = setTimeout(function(){
                        self.extInterval();
                },self.autoInterval);
        });     
        
        
        //开始自动轮换
        this.autoExt = setTimeout(function(){
                self.extInterval();
        },this.autoInterval);
}
//执行运动
C_slider.prototype.go = function(index){
        this.currentSlide = index;
        if (this.scrollType == "left"){
                $("#"+this.list).animate({
                        marginLeft: (-index*this.FrameWidth)+"px"
                }, {duration:600,queue:false});                 
        } else if (this.scrollType == "top"){
                $("#"+this.list).animate({
                        marginTop: (-index*this.FrameHeight)+"px"
                }, {duration:600,queue:false});                 
        }
        
        $("#"+this.Llist+" > li").removeClass("cur");
        $("#"+this.Llist+" > li").eq(index).addClass("cur");
                
        //对于缩略图的滚动处理
        if(this.LscrollType == "left"){
                if(this.slideLength*this.lListWidth > this.lFrameWidth){
                        var spaceWidth = (this.lFrameWidth - this.lListWidth)/2;
                        var hiddenSpace = this.lListWidth*this.currentSlide - spaceWidth;
                        
                        if (hiddenSpace > 0){
                                if(hiddenSpace+this.lFrameWidth <= this.slideLength*this.lListWidth){
                                        $("#"+this.Llist).animate({
                                                marginLeft: -hiddenSpace+"px"
                                        }, {duration:600,queue:false}); 
                                } else {
                                        var endHidden = this.slideLength*this.lListWidth - this.lFrameWidth;
                                        $("#"+this.Llist).animate({
                                                marginLeft: -endHidden+"px"
                                        }, {duration:600,queue:false}); 
                                }
                        } else {
                                $("#"+this.Llist).animate({
                                        marginLeft: "0px"
                                }, {duration:600,queue:false}); 
                        }
                }
                
        } else if (this.LscrollType == "top"){
                if(this.slideLength*this.lListHeight > this.lFrameHeight){
                        var spaceHeight = (this.lFrameHeight - this.lListHeight)/2;
                        var hiddenSpace = this.lListHeight*this.currentSlide - spaceHeight;
                        
                        if (hiddenSpace > 0){
                                if(hiddenSpace+this.lFrameHeight <= this.slideLength*this.lListHeight){
                                        $("#"+this.Llist).animate({
                                                marginTop: -hiddenSpace+"px"
                                        }, {duration:600,queue:false}); 
                                } else {
                                        var endHidden = this.slideLength*this.lListHeight - this.lFrameHeight;
                                        $("#"+this.Llist).animate({
                                                marginTop: -endHidden+"px"
                                        }, {duration:600,queue:false}); 
                                }
                        } else {
                                $("#"+this.Llist).animate({
                                        marginTop: "0px"
                                }, {duration:600,queue:false}); 
                        }
                }
                
        }
        
}
//前进
C_slider.prototype.forward = function(){
        if(this.currentSlide<this.slideLength-1){
                this.currentSlide += 1;
                this.go(this.currentSlide);
        }else {
                this.currentSlide = 0;
                this.go(0);
        }
}
//后退
C_slider.prototype.back = function(){
        if(this.currentSlide>0){
                this.currentSlide -= 1;
                this.go(this.currentSlide);
        }else {
                this.currentSlide = this.slideLength-1;
                this.go(this.slideLength-1);
        }
}
//自动执行
C_slider.prototype.extInterval = function(){
        if(this.currentSlide<this.slideLength-1){
                this.currentSlide += 1;
                this.go(this.currentSlide);
        }else {
                this.currentSlide = 0;
                this.go(0);
        }
        
        var self = this;
        this.autoExt = setTimeout(function(){
                self.extInterval();
        },this.autoInterval);
}
//实例化对象 
var goSlide1 = new C_slider("big_frame","big_list","small_frame","small_list","forward","back","left","left","click",3000);
var goSlide2 = new C_slider("big_frame2","big_list2","small_frame2","small_list2","forward2","back2","top","left","click",5000);
var goSlide3 = new C_slider("big_frame3","big_list3","small_frame3","small_list3","forward3","back3","left","top","click",3000);
var goSlide4 = new C_slider("big_frame4","big_list4","small_frame4","small_list4","forward4","back4","top","top","click",2000);
</script>
上一篇 »javascript实现浏览器菜单命令
下一篇 »php phppowerpoint
一个jquery的slide，很有意思的说

相关推荐

《JavaScript高级程序设计》读书笔记 ---Function 类型

分享几个有意思的css js工具网站？

python知识点及面试面试大集合

【狗屁不通文章生成器】代码分析 ，javaScript

【前端_js】理解 JavaScript 的 async/await

PHP中一个有意思的小问题

Python 中的locals，

Matlab入门到放弃，二、matlab基础知识

【狗屁不通文章生成器】代码分析，javaScript
