jQuery实现商城首页幻灯片的效果

来源：互联网发布：开发上位机界面软件编辑：程序博客网时间：2024/05/01 04:01

效果图：此处的效果点击左右按钮切换图片，点击图片下方小圆点切换图片，鼠标不进入图片自动更换，悬停在图片上停止切换，这种效果是几乎所有的网站都会在首页用到的功能。

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" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><link rel="stylesheet" type="text/css" href="css/reset.css"><link rel="stylesheet" type="text/css" href="css/main.css"><script type="text/javascript" src="js/jquery-1.12.4.min.js"></script><script type="text/javascript" src="js/slide2.js"></script><title>天天生鲜-首页</title></head><body><div class="center_con2"><div class="slide fl"><ul class="slide_list"><li><a href="javascript:;"><img src="images/slide.jpg" alt="专题图片" /></a></li><li><a href="javascript:;"><img src="images/slide02.jpg" alt="专题图片" /></a></li><li><a href="javascript:;"><img src="images/slide03.jpg" alt="专题图片" /></a></li><li><a href="javascript:;"><img src="images/slide04.jpg" alt="专题图片" /></a></li></ul><div class="prev"></div>   //左右点击的>和<<div class="next"></div><ul class="points">       //底下的小圆点，通过jQuery动态添加<!-- <li class="active"></li><li></li><li></li><li></li> --></ul></div></div></body></html>

css代码

.slide{width:760px;height:270px;background-color:gold;position:relative;    //定位到常见用法：父类设置相对定位不给位置值，子类设置绝对定位。overflow:hidden;      //将图片隐藏，其他作用：清除浮动和margin-top塌陷margin: 100px auto;   //左右居中}.slide_list{position:absolute;   //子类设置绝对定位，不偏移left:0;top:0;width:760px;height:270px;}.slide_list li{width:760px;height:270px;position:absolute;left:0;top:0;}.prev{position:absolute;left:11px;top:122px;width:15px;height:23px;background:url(../images/icons.png) -1px -450px no-repeat;cursor:pointer;}.next{position:absolute;right:11px;top:122px;width:15px;height:23px;background:url(../images/icons.png) -1px -500px no-repeat;cursor:pointer;}.points{position:absolute;left:0;bottom:9px;width:100%;height:11px;font-size:0;text-align:center;    //父类设置，子类居中  }.points li{display:inline-block;   //转换块元素为行类块，可以设置属性，在一行显示，没有小间隙width:11px;height:11px;background-color:#9f9f9f;margin:0 5px;border-radius:50%;      //默认是方形的，通过设置四个角度的弧度可以转换成圆形cursor:pointer;}.points .active{background-color:#cecece;}

jQuery代码：

$(function(){                                var $slide = $('.slide'),     //通过选择器获取对象    $li = $('.slide_list li'),    $points = $('.points'),    $prev = $('.prev'),    $next = $('.next');    // 定义变量，存储动画的运动状态，如果幻灯片在运动，那么它的值是true    var bIsmove = false;        // 定义变量，存储当前显示的并且马上要离开的幻灯片的索引值    var iPrevli = 0;    // 定义变量，存储当前要运动过来的幻灯片的索引值    var iNowli = 0;    // 存储幻灯片的个数    var iLen = $li.length;    // 除了第一张幻灯片，其他的幻灯片放到右边去    $li.not(':first').css({'left':760});    // 根据幻灯片的个数动态创建小圆点    for(var i=0;i<iLen;i++)    {        var $pli = $('<li>');        if(i==0)        {            $pli.addClass('active');  //动态添加类，高亮显示        }        $pli.appendTo($points);       //将li标签添加到ul标签的内部的前面，主谓对调用append等价于此写法的appendto    }    // 获取小圆点    var $pointsli = $('.points li');    // 点击小圆点    $pointsli.click(function(){        iNowli = $(this).index();     //获取当前点击元素的索引        fnMove();        $(this).addClass('active').siblings().removeClass('active');  //链式调用：当前点击元素添加高亮，同级其他移除高亮显示。    })    // 点击向左的箭头    $prev.click(function(){        if(bIsmove)   //防止快速重复点击造成的记忆切换        {            return;        }        bIsmove = true;        iNowli--;  //每次只能向右切换一张        fnMove();        $pointsli.eq(iNowli).addClass('active').siblings().removeClass('active');       })    // 点击向右的箭头    $next.click(function(){        if(bIsmove)        {            return;        }        bIsmove = true;        iNowli++;        fnMove();        $pointsli.eq(iNowli).addClass('active').siblings().removeClass('active');    })    function fnAutoplay(){   //自动播放幻灯片        iNowli++;        fnMove();        $pointsli.eq(iNowli).addClass('active').siblings().removeClass('active');    }    var oTimer = setInterval(fnAutoplay,3000);    //每隔3秒钟执行一次播放    $slide.mouseenter(function(){   //鼠标进入事件，清除动画        clearInterval(oTimer);    })    $slide.mouseleave(function(){        oTimer = setInterval(fnAutoplay,3000);    })    function fnMove(){        if(iNowli==iPrevli)   //如果点击的是同一个小圆点，无动作切换        {            return;        }        // 当在第一张幻灯片，点击向左的箭头的时候        if(iNowli<0)        {            iNowli = iLen-1;  //最右（后）的图片            iPrevli = 0;            $li.eq(iNowli).css({'left':-760});  //将最右的图片定位到显示框的左边            $li.eq(iNowli).animate({'left':0});  //动画事件：向右移动到显示框，占领第一张图片的位置            $li.eq(iPrevli).animate({'left':760},function(){       //上一张图片移动到右边                bIsmove = false;//更改状态，只有false的时候才可以点击下一次事件            });            iPrevli = iNowli;     //当前的索引值成为先一个的上一个            return;        }        // 当在最后一张幻灯片，点击向右的箭头的时候        if(iNowli>iLen-1)        {            iNowli = 0;            iPrevli = iLen-1;            $li.eq(iNowli).css({'left':760});            $li.eq(iNowli).animate({'left':0});            $li.eq(iPrevli).animate({'left':-760},function(){                bIsmove = false;            });            iPrevli = iNowli;            return;        }        if(iNowli>iPrevli)    //如果点击的是当前显示页的右面的        {            $li.eq(iNowli).css({'left':760});            //不管是哪张图片，直接定位到显示框的右边            $li.eq(iPrevli).animate({'left':-760});      //显示的图片移动到显示框的左边        }        else        {            $li.eq(iNowli).css({'left':-760});                       $li.eq(iPrevli).animate({'left':760});                    }        $li.eq(iNowli).animate({'left':0},function(){   //当前的图片动画移动到显示框，执行回调函数            bIsmove = false;        });        iPrevli = iNowli;    }})

结语：此案例是所有的网站经常用到的显示效果，经常出现在首页，称为幻灯片效果，一般会将重要的信息显示在此幻灯片中，起到明示显示的效果，用户更容易看到。其中用到很多结合的知识点，是一个很好的练习案例。网络中也有已经封装好的，直接调用比较方便，但是缺点就是因为是别人的东西，一但想要修改比较困难，容易出现错误。作为一个基础知识的提升练习是一个很好的选择！！！

时间飞快，让人来不及怀念，只能疯狂向前，外面的世界比你聪明的比你努力，没有理由懒惰成性！！！

阅读全文

0 0