上海益国网络科技有限公司
上海专业网站建设一条龙服务

学无止境!

这里摘有最贴近网站程序使用的方方面面相关技术文档~

021-20906540
AM 9:30-12:00 PM:2:00-5:30
您当前位置:首页 >> 技术支持 >>  技术专辑 >>  JS-JQ幻灯

Jquery 多参数定制幻灯

<script type="text/javascript" src="http://www.siqiji.net/codes/jq/jquery-1.7.2.min.js"></script>

<script language="javascript">

$(document).ready(function() {

       function siqiji(o1,o2,o3,c,t1,t2,a,b){

               var count=o1.size()-1;

               var now;

               var TimeInterval;

               o1.each(function(i){

                       $(this).mouseover(function(){

                               o2.hide().eq(i).show();

                               o3.hide().eq(i).show();

                               o1.removeClass(c);

                               $(this).addClass(c);

                               window.clearInterval(TimeInterval);

                       }).mouseout(function(){

                               now = i+1;

                               TimeInterval = window.setInterval(changeimage,t1);

                       });

                       //初始化显示

                       if ($(this).hasClass(c)) {

                               $(this).addClass(c);

                               o2.hide().eq(i).show();

                               o3.hide().eq(i).show();

                               now = i+1;

                       }

               })

               

               TimeInterval = window.setInterval(changeimage,t1);

               function changeimage(){

                       if(now>count)now=0;

                       o3.hide().eq(now).show();

                       o2.hide().eq(now).stop().fadeTo(0,a).fadeTo(t2,b);

                       o1.removeClass(c).eq(now).addClass(c);

                       now++;

               }

       }

       siqiji($(".siqiji_slidebtn span"),$(".siqiji_slideshowco li"),$(".siqiji_slideshowti li"),"on",3000,600,0.2,1);

});

</script>




参数说明:

o1: 标签元素

o2: 内容元素

o3: 内容元素

c : 标签元素显示用样式

t1: 标签切换时间

t2: 内容渐进时间

a : 内容渐进起始半透明度 0.1~1

b : 内容渐进结束半透明度 0.1~1


CSS:

<style type="text/css">

.siqiji_slidebox { width:400px; height:230px; overflow:hidden; border:1px solid #ddd; position:relative}

.siqiji_slideshowco { width:394px; margin:3px auto; height:200px; overflow:hidden}

.siqiji_slideshowti { height:25px; line-height:25px; width:394px; margin:0 auto; overflow:hidden}

.siqiji_slidebtn { position:absolute; left:0; top:0;}

.siqiji_slidebtn span { float:left; height:16px; width:16px; line-height:16px; text-align:center; margin-right:5px;}

</style>




HTML:

<div class="siqiji_slidebox">

       <div class="siqiji_slideshowco">

           <li><a href="#"><img src="http://www.siqiji.net/codes/imgs/test/1.jpg" width="394" height="200" /></a></li>

       <li><a href="#"><img src="http://www.siqiji.net/codes/imgs/test/2.jpg" width="394" height="200" /></a></li>

       <li><a href="#"><img src="http://www.siqiji.net/codes/imgs/test/3.jpg" width="394" height="200" /></a></li>

       <li><a href="#"><img src="http://www.siqiji.net/codes/imgs/test/4.jpg" width="394" height="200" /></a></li>

   </div>

   <div class="siqiji_slideshowti">

           <li>幻灯图片标题1</li>

       <li>幻灯图片标题2</li>

       <li>幻灯图片标题3</li>

       <li>幻灯图片标题4</li>

   </div>

   <div class="siqiji_slidebtn">

           <span>1</span><span class="on">2</span><span>3</span><span>4</span>

   </div>

</div>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>上海动人网络整理-JQ自动切换幻灯多参数定制效果</title>
<script type="text/javascript" src="http://www.siqiji.net/codes/jq/jquery-1.7.2.min.js"></script>
<script language="javascript">
$(document).ready(function() {
        function siqiji(o1,o2,o3,c,t1,t2,a,b){
                var count=o1.size()-1;
                var now;
                var TimeInterval;
                o1.each(function(i){
                        $(this).mouseover(function(){
                                o2.hide().eq(i).show();
                                o3.hide().eq(i).show();
                                o1.removeClass(c);
                                $(this).addClass(c);
                                window.clearInterval(TimeInterval);
                        }).mouseout(function(){
                                now = i+1;
                                TimeInterval = window.setInterval(changeimage,t1);
                        });
                        //初始化显示
                        if ($(this).hasClass(c)) {
                                $(this).addClass(c);
                                o2.hide().eq(i).show();
                                o3.hide().eq(i).show();
                                now = i+1;
                        }
                })
                 
                TimeInterval = window.setInterval(changeimage,t1);
                function changeimage(){
                        if(now>count)now=0;
                        o3.hide().eq(now).show();
                        o2.hide().eq(now).stop().fadeTo(0,a).fadeTo(t2,b);
                        o1.removeClass(c).eq(now).addClass(c);
                        now++;
                }
        }
        siqiji($(".siqiji_slidebtn span"),$(".siqiji_slideshowco li"),$(".siqiji_slideshowti li"),"on",3000,600,0.2,1);
});
</script>
<style type="text/css">
.siqiji_slidebox { width:400px; height:230px; overflow:hidden; border:1px solid #ddd; position:relative}
.siqiji_slideshowco { width:394px; margin:3px auto; height:200px; overflow:hidden}
.siqiji_slideshowti { height:25px; line-height:25px; width:394px; margin:0 auto; overflow:hidden}
.siqiji_slidebtn { position:absolute; left:0; top:0;}
.siqiji_slidebtn span { float:left; height:16px; width:16px; line-height:16px; text-align:center; margin-right:5px;}
</style>
</head>
<body>
 
<div class="siqiji_slidebox">
        <div class="siqiji_slideshowco">
            <li><a href="#"><img src="http://www.siqiji.net/codes/imgs/test/1.jpg" width="394" height="200" /></a></li>
        <li><a href="#"><img src="http://www.siqiji.net/codes/imgs/test/2.jpg" width="394" height="200" /></a></li>
        <li><a href="#"><img src="http://www.siqiji.net/codes/imgs/test/3.jpg" width="394" height="200" /></a></li>
        <li><a href="#"><img src="http://www.siqiji.net/codes/imgs/test/4.jpg" width="394" height="200" /></a></li>
    </div>
    <div class="siqiji_slideshowti">
            <li>幻灯图片标题1</li>
        <li>幻灯图片标题2</li>
        <li>幻灯图片标题3</li>
        <li>幻灯图片标题4</li>
    </div>
    <div class="siqiji_slidebtn">
            <span>1</span><span class="on">2</span><span>3</span><span>4</span>
    </div>
</div>
</body>
</html>


做网站找动人网络!建站一条龙服务找动人网络!站长学习尽在站长培训网
  • JS实现/图片加标题/淡入淡出/幻灯效果
  • FlexSlider2 幻灯参数详解
  • TOP