jQuery图片自动轮转动画特效

本例的功能是用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/













你可能感兴趣的:(jquery,图片轮转)