jQuery实现渐变式轮播图效果

来源：互联网发布：delphi 本地数据库编辑：程序博客网时间：2024/06/06 03:02

<div class="menu">     <div class="pic">         <img src="images/1.jpg" />         <img src="images/2.jpg" />         <img src="images/3.jpg" />         <img src="images/4.jpg" />     </div>     <div class="bt">         <div class="right">             <span class="on">1</span>             <span>2</span>             <span>3</span>             <span>4</span>         </div>     </div>   </div>

<style>    .menu{     width:478px;     height:286px;    margin:50px auto;     overflow:hidden;     position:relative; }.pic{     width:478px;     height:268px;}.pic img{     display:block;     display:none;}.pic img:nth-child(1){ display:block;}.bt{     width:100%;     height:30px;     position:absolute;     bottom:-40px;      left:0px;    background:rgba(51,51,51,0.5);     transition:all 0.3s ease 0.1s;}.bt span{     width:30px;     height:30px;     float:left;     display:block;     background:#000;     color:#FFF;     text-align:center;     line-height:30px;     border-radius:50%;     margin-right:8px;     cursor:pointer;}.bt .right{     float:right;}.bt span.on{     background:#F00;}</style>

<script type="text/javascript">        var num = 0;        var spns = $("span");        $(function() {            //当鼠标移至menu上时让弹窗显示            $(".menu").mouseover(function() {                $(".bt").css("bottom", 0);            });            //当鼠标移至menu上时让弹窗消失            $(".menu").mouseleave(function() {                $(".bt").css("bottom", "-40px");            });            //当鼠标悬浮至span上时，停止计时器并获取当前位置下标            $(".bt .right span").mouseover(function() {                clearInterval(timer);                var n = $(this).index(); //获取当前下标并赋值给n                fx(n);            })            //当鼠标离开时 启动定时器            $("span").mouseleave(function() {                timer = setInterval(fun, 3000);            })            function fx(n) {                //这里提供两种实现方式                $("span").removeClass("on").eq(n).addClass("on");                $(".pic img:visible").stop(true).fadeOut(500);                $(".pic img").eq(n).stop(true).fadeIn(1000);                // $("span").eq(n).addClass("on").siblings().removeClass("on")                // $("img").eq(n).fadeIn(500).siblings().fadeOut(500)            }            var timer = setInterval(fun, 2000);            // alert(spns.length)            function fun() {                num++;                console.log(num);                if (num == spns.length) {                    num = 0                };                fx(num);            }        })    </script>

阅读全文

0 0