欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-26 19:30:27
...

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

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

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;

    }


})

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

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