jQuery图片自动轮转动画特效
生活随笔
收集整理的這篇文章主要介紹了
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/ 超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生總結
以上是生活随笔為你收集整理的jQuery图片自动轮转动画特效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 深入理解框架本质
- 下一篇： 【Hibernate】Hibernate