今天研究下Jquery的三輪播效果 寫了一個簡單的出來 如今尚未用組件封裝 我今天這個輪播是向上的 一直向上的 原本是想研究個組件出來 想寫兩個函數 一個函數是向上滾動 另外一個是向左滾動 當我調用第一個函數時候 讓他向上 同理 當我調用第二個函數時候 讓他向左滾動 可是因爲待會想看看電視 如今就沒有封裝 之後有機會再封裝下吧 恩 今天這個Jquery寫的效果也是蠻簡單的 廢話很少說 看看下面效果圖:javascript
這樣的效果也是看得不少 其實原理很簡單 HTML結構和CSS代碼也是很是重要的 由於我是用了 ul li這樣的標籤寫的 而我剛開始沒有用display:inline這樣的 在IE6 7下是有問題的 很納悶 而後再仔細看看源碼 才發現 少了這個!css
下面HTML代碼html
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Untitled Document</title>
- <style type="text/css">
- body,div,ul,li{ margin:0; padding:0;}
- .container{ width:400px; height:300px; overflow:hidden; position:relative; margin:50px auto 0;}
- .slider{ position:absolute;}
- .slider li{ list-style:none; width:400px; height:300px; overflow:hidden; display:inline;}
- .slider img{ width:400px; height:300px; overflow:hidden; border:none; display: block;}
- .slider li a{ width:400px; height:300px; overflow:hidden; display:block;}
- .num{ position:absolute; right:5px; bottom:5px; z-index:100;}
- .num li{ float:left; color:#FF7300; height:16px; display:inline; line-height:16px; text-align:center; font-size:12px; font-family:Verdana, Geneva, sans-serif; overflow:hidden; margin:3px 1px; background-color:#fff; border:1px solid #FF7300; cursor:pointer; width:16px;}
- .num li.on{ color:#fff; width:21px; height:21px; line-height:21px; font-size:16px; margin:0 1px; border:0; background:#FF7300; font-weight:700;}
- </style>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
- </head>
- <body>
- <div class="container">
- <ul class="slider">
- <li><a href="#" target="_blank"><img src="p_w_picpaths/01.jpg" alt=""/></a></li>
- <li><a href="#" target="_blank"><img src="p_w_picpaths/02.jpg" alt=""/></a></li>
- <li><a href="#" target="_blank"><img src="p_w_picpaths/03.jpg" alt=""/></a></li>
- <li><a href="#" target="_blank"><img src="p_w_picpaths/03.jpg" alt=""/></a></li>
- </ul>
- <ul class="num">
- <li>1</li>
- <li>2</li>
- <li>3</li>
- <li>4</li>
- </ul>
- </div>
- <script type="text/javascript" src="JqueryMarquee.js"></script>
- </body>
- </html>
JS代碼:java
- /**
- * @author tugenhua
- * @email tugenhua@126.com
- * Jquery三輪播圖片效果
- */
- $(function(){
- $(".num li:first").addClass("on");
- var len = $(".num li").length,
- index = 0,
- timer = null;
- $(".num li").mouseover(function(){
- var index = $(".num li").index(this);
- showImg(index);
- });
- $(".container").hover(function(){
- clearInterval(timer);
- },function(){
- timer = setInterval(function(){
- showImg(index);
- index++;
- if(index==len) index=0;
- },3000);
- }).trigger("mouseleave");
- })
- function showImg(index){
- var addHeight = $(".container").height();
- $(".slider").stop(true,false).animate({top : -addHeight*index},1000);
- $(".num li").removeClass("on")
- .eq(index).addClass("on");
- }
首先寫這個結構時候 要注意下面幾個問題:jquery
1 用了ul li時候 必定要記得用display:inline這個ajax
2 我在寫樣式時用了個技巧 就是讓滾動的圖片的外框也就是父級元素 給他個絕對定位,目的是讓全部的圖片重疊在一塊兒 這樣就能夠實現一張一張的輪播。api
3 固然給了一個當前的類 當播放到那個li時候 讓他變寬!文字變色等等!!ide
4 js 就是說窗口一打開時候 讓他當前播放在第一個 因此用了這句代碼:$(".num li:first").addClass("on"); 而後獲取當前的數字 1 2 3 4的數量 定義當前的索引index 當我鼠標移到任何一個li時候 我想獲取當前的索引 用這個 showImg(index) 調用外面的函數 在這個函數內 首先要知道這個圖片的外框的高度 接着就讓他動畫 高度×當前的索引!函數
5.當我鼠標停在那一整塊的時候 我想讓他正在播放停下來,當我鼠標移開那一塊的時候 讓它觸發一個離開事件,判斷若是當前的index大於或者等於數字的最大長度時候 讓index返回第一張圖!動畫
下面添加個附件 不明白的地方 能夠下載看看 看看代碼 看看效果 理解下 就明白了 兼容IE6 7 8 火狐 谷歌等待主流遊覽器!!