jQuery图片自动轮转动画特效

最新推荐文章于 2022-01-20 14:40:36 发布

May的博客

最新推荐文章于 2022-01-20 14:40:36 发布

阅读量3k

点赞数 1

分类专栏： Web前端文章标签： jQuery 图片轮转

本文链接：https://blog.csdn.net/lmb55/article/details/46524693

版权

Web前端专栏收录该内容

39 篇文章 1 订阅

订阅专栏

本例的功能是用jQuery图片自动轮转动画特效实现阿里巴巴首页图片动画效果。

所用到的图片截图：

这里写图片描述

从网上下载一个jQuery文件jquery.js；

具体HTML网页代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>1688.html</title>
    <!-- 实现功能：阿里巴巴首页图片自动轮转 -->
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<style type="text/css">
    *{
        margin:0;
        padding:0px;/** 清掉所有盒子的内边距*/

    }
    .box{
        width:760px;
        height:300px;
        border:1px solid #0000ff;
        margin:100px auto;  /** 上下100左右自动*/
        position:relative;

    }
    .pic{
        width:760px;
        height:300px;
        background:#ffccff;
        overflow:hidden;/** 只显示第一张图片，超出的隐藏(隐藏其余四张)*/

    }
    .pic ul li{
        list-style-type:none;/** 去掉边签前面的小圆点*/
        width:760px;
        height:300px;
        position:relative;      
    }
    .pic ul li .img1{;
        position:absolute;/** 定位参照其父元素(.pic ul li)的*/
        left:-760px;
        top:0px;

    }
    .pic ul li .img2{
        position:absolute;/** 定位参照其父元素(.pic ul li)的*/
        left:-15px;
        top:0px;
        display:none;

    }
    .nav{
        width:100px;
        height:14px;
        position:absolute;/** 定位参照其父元素(box)的*/
        right:20px;
        bottom:10px;

    }
    .nav ul li{
        list-style-type:none;/** 去掉边签前面的小圆点*/
        width:14px;
        height:14px;
        border:1px solid white;
        float:left;/** 让5个小框沿着外面的大框(.nav)横向排列*/
        margin-right:2px;/** 设置两个小框之间的间距*/

    }
    .nav ul .bg{/** 单独对每一个小框进行控制*/
        background:orange;
        border:none;
        width:14px;
        height:14px;

    }

</style>
  </head>

  <body>
        <div class="box"><!-- 动画的显示位置 -->

 <!-- 用于存放图片****************************************************** -->
            <div class="pic">
                <ul><!-- 如何把两张图片定位到同一个li中? 分别为两个图片定义css样式 -->
                    <li style="background:url('images/bg1.jpg')"><!-- 插入背景图片 -->
                        <img class="img1" src="images/text1.png" /><!-- 插入 要进入的图片-->
                        <img class="img2" src="images/con1.png" /><!-- 插入 要进入的图片-->
                    </li>
                    <li style="background:url('images/bg2.jpg')">
                        <img class="img1" src="images/text2.png" />
                        <img class="img2" src="images/con2.png" />
                    </li>
                    <li style="background:url('images/bg3.jpg')">
                        <img class="img1" src="images/text3.png" />
                        <img class="img2" src="images/con3.png" />
                    </li>
                    <li style="background:url('images/bg4.jpg')">
                        <img class="img1" src="images/text4.png" />
                        <img class="img2" src="images/con4.png" />
                    </li>
                    <li style="background:url('images/bg5.jpg')">
                        <img class="img1" src="images/text5.png" />
                        <img class="img2" src="images/con5.png" />
                    </li>
                    </ul>
                </div>

   <!-- 用于存放展示图片的按钮 *************************************************-->

                <div class="nav">
                    <ul>
                        <li class="bg"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>       
                </div>

            </div>
   <!-- 用于写JS代码 *************************************************--> 
            <!-- 引入官方jQuery代码 -->       
            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript">
            var i =-1;
            var time=0;
            junmper();
            function junmper(){
                i++;
                if(i>4)
                i=0;
                $(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg");
                    $(".pic ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
                    /** 获取到第一张图片，然后让其飞出来*/
                    $(".pic ul li").eq(i).find(".img1").css({left:"-760px"});
                    $(".pic ul li").eq(i).find(".img2").css({left:"-15px",display:"none"});
                    $(".pic ul li").eq(i).find(".img1").animate({left:"0px"},500,function(){
                        /** 等第一张飞完之后，获取到第二张图片，然后让其飞出来*/
                        $(".pic ul li").eq(i).find(".img2").css({display:"block"});
                        $(".pic ul li").eq(i).find(".img2").animate({left:"0px"},500);
                    });
            }
            time=setInterval("junmper()",3700);
                $(".nav ul li").click(function(){
                    $(this).addClass("bg").siblings().removeClass("bg");
                    i=$(this).index();
                    $(".pic ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
                    /** 获取到第一张图片，然后让其飞出来*/
                    $(".pic ul li").eq(i).find(".img1").css({left:"-760px"});
                    $(".pic ul li").eq(i).find(".img2").css({left:"-15px",display:"none"});
                    $(".pic ul li").eq(i).find(".img1").animate({left:"0px"},500,function(){
                        /** 等第一张飞完之后，获取到第二张图片，然后让其飞出来*/
                        $(".pic ul li").eq(i).find(".img2").css({display:"block"});
                        $(".pic ul li").eq(i).find(".img2").animate({left:"0px"},500);
                    });
                })
                $().hover(function(){
                    clearInterval(time);
                },function(){
                    time=setInterval("junmper()",3700);
                })
            </script>
    </body>
 </html>


具体运行效果可参看阿里巴巴首页：
https://www.1688.com/

May的博客

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery图片自动轮转动画特效

本例的功能是用jQuery图片自动轮转动画特效实现阿里巴巴首页图片动画效果。所用到的图片截图：从网上下载一个jQuery文件jquery.js；具体HTML网页代码如下：<!DOCTYPE html><html> <head> <title>1688.html</title>  <me
复制链接

扫一扫

专栏目录