JQuery 圖片滾動(dòng)輪播示例代碼
更新時(shí)間：2014年03月24日 15:35:32 作者：
這篇文章主要介紹了JQuery實(shí)現(xiàn)圖片滾動(dòng)輪播,需要的朋友可以參考下
完整的項(xiàng)目在附件中
<!DOCTYPE html>
<html>
<head>
<title>圖片切換</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" >
var num = 0
$(function(){
$("div ol li").mouseover(function(e){
$(this).attr("class","current");
$(this).siblings().attr("class",""); //兄弟節(jié)點(diǎn)的class屬性設(shè)置為空
//alert($('ul').index())
num = $('ul').index() + 2
var index = $(this).index(); //記錄選定的li標(biāo)簽在ul中的索引
//圖片會(huì)出現(xiàn)層疊現(xiàn)象為了顯示當(dāng)前的圖片，把當(dāng)前的圖片的z-index 值設(shè)置為大于其他的兄弟元素
$("div ul li").eq(index).css({"left":"650px","zIndex":num})
$("div ul li").eq(index).siblings().css("zIndex",num-1);
//動(dòng)畫效果，圖片從右側(cè)飛入
$("div ul li").eq(index).animate({left:"0"},500)
});
});
</script>
<style type="text/css">
*{margin: 0px;padding: 0px;border: 0px;}
ul,ol{list-style: none;}
.all{width:650px;height: 250px;margin: 100px auto;position: relative;border: 1px solid crimson;overflow: hidden;}
.all ul{position: relative;z-index: 1;position: relative;}
/*子 絕 父 相*/
.all ul li{position: absolute;left: 0;top: 0px;}
.all ol{position: absolute;z-index: 2; right: 10px;bottom: 10px;}
.all ol li{width: 20px;height: 20px;background: #333;border: 1px solid #509629;font-weight:
bold;text-align: center;line-height: 20px;float: left;margin-left: 10px;margin-top: 10px;}
.all ol .current{width: 30px;height: 30px;line-height: 30px;border: 1px solid red;margin-top: 0px;
cursor: pointer;}
</style>
</head>
<body>
<div class="all">
<ul>
<li><img src="src/1.jpg" /></li>
<li><img src="src/2.jpg" /></li>
<li><img src="src/3.jpg" /></li>
<li><img src="src/4.jpg" /></li>
</ul>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
</body>
</html>
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>圖片切換</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" >
var num = 0
$(function(){
$("div ol li").mouseover(function(e){
$(this).attr("class","current");
$(this).siblings().attr("class",""); //兄弟節(jié)點(diǎn)的class屬性設(shè)置為空
//alert($('ul').index())
num = $('ul').index() + 2
var index = $(this).index(); //記錄選定的li標(biāo)簽在ul中的索引
//圖片會(huì)出現(xiàn)層疊現(xiàn)象為了顯示當(dāng)前的圖片，把當(dāng)前的圖片的z-index 值設(shè)置為大于其他的兄弟元素
$("div ul li").eq(index).css({"left":"650px","zIndex":num})
$("div ul li").eq(index).siblings().css("zIndex",num-1);
//動(dòng)畫效果，圖片從右側(cè)飛入
$("div ul li").eq(index).animate({left:"0"},500)
});
});
</script>
<style type="text/css">
*{margin: 0px;padding: 0px;border: 0px;}
ul,ol{list-style: none;}
.all{width:650px;height: 250px;margin: 100px auto;position: relative;border: 1px solid crimson;overflow: hidden;}
.all ul{position: relative;z-index: 1;position: relative;}
/*子 絕 父 相*/
.all ul li{position: absolute;left: 0;top: 0px;}
.all ol{position: absolute;z-index: 2; right: 10px;bottom: 10px;}
.all ol li{width: 20px;height: 20px;background: #333;border: 1px solid #509629;font-weight:
bold;text-align: center;line-height: 20px;float: left;margin-left: 10px;margin-top: 10px;}
.all ol .current{width: 30px;height: 30px;line-height: 30px;border: 1px solid red;margin-top: 0px;
cursor: pointer;}
</style>
</head>
<body>
<div class="all">
<ul>
<li><img src="src/1.jpg" /></li>
<li><img src="src/2.jpg" /></li>
<li><img src="src/3.jpg" /></li>
<li><img src="src/4.jpg" /></li>
</ul>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
</body>
</html>
您可能感興趣的文章:
- Android實(shí)現(xiàn)圖片滾動(dòng)和頁簽控件功能的實(shí)現(xiàn)代碼
- Android仿淘寶商品瀏覽界面圖片滾動(dòng)效果
- 圖片自動(dòng)播放器腳本之家修正
- JS特效實(shí)現(xiàn)圖片自動(dòng)播放并可控的效果
- autoPlay 基于jquery的圖片自動(dòng)播放效果
- 基于Jquery實(shí)現(xiàn)的一個(gè)圖片滾動(dòng)切換
- jquery 圓形旋轉(zhuǎn)圖片滾動(dòng)切換效果
- js實(shí)現(xiàn)網(wǎng)站首頁圖片滾動(dòng)顯示
- jQuery+css實(shí)現(xiàn)圖片滾動(dòng)效果(附源碼)
- jquery實(shí)現(xiàn)圖片滾動(dòng)效果的簡(jiǎn)單實(shí)例
- js+div實(shí)現(xiàn)圖片滾動(dòng)效果代碼
- ImageFlow可鼠標(biāo)控制圖片滾動(dòng)
- javascript 不間斷的圖片滾動(dòng)并可點(diǎn)擊
- js實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)圖片滾動(dòng)停止的方法
- Android使用自定義屬性實(shí)現(xiàn)圖片自動(dòng)播放滾動(dòng)的功能
相關(guān)文章
JQuery之proxy實(shí)現(xiàn)綁定代理方法
下面小編就為大家?guī)硪黄狫Query之proxy實(shí)現(xiàn)綁定代理方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了JQuery EasyUI 數(shù)字格式化處理方法,需要的朋友可以參考下2014-05-05
jQuery實(shí)現(xiàn)簡(jiǎn)單聊天室
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單聊天室，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要為大家詳細(xì)介紹了jQuery多選框選擇數(shù)量限制方法，最多選擇 三項(xiàng) 的上限已滿, 其他選項(xiàng)將會(huì)變?yōu)椴豢蛇x2017-02-02
jQuery實(shí)現(xiàn)6位數(shù)字密碼輸入框
本文主要對(duì)jQuery實(shí)現(xiàn)6位數(shù)字密碼輸入框的大概思路、實(shí)現(xiàn)代碼進(jìn)行詳細(xì)介紹，具有一定的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
jquery 取子節(jié)點(diǎn)及當(dāng)前節(jié)點(diǎn)屬性值
本節(jié)主要介紹了jquery如何取子節(jié)點(diǎn)及當(dāng)前節(jié)點(diǎn)屬性值,需要的朋友可以參考下2014-07-07
使用jQuery UI庫開發(fā)Web界面的簡(jiǎn)單入門指引
這篇文章主要介紹了使用jQuery UI庫開發(fā)Web界面的簡(jiǎn)單入門指引,jQuery UI是一個(gè)基于jQuery的圖形組件庫,需要的朋友可以參考下2016-04-04
jquery.tableSort.js表格排序插件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jquery.tableSort.js表格排序插件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
Easy UI動(dòng)態(tài)樹點(diǎn)擊文字實(shí)現(xiàn)展開關(guān)閉功能
這篇文章主要介紹了Easy UI動(dòng)態(tài)樹點(diǎn)擊文字實(shí)現(xiàn)展開關(guān)閉功能,需要的朋友可以參考下2017-09-09
jQuery實(shí)現(xiàn)王者榮耀手風(fēng)琴效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)王者榮耀手風(fēng)琴效果的代碼內(nèi)容，需要的朋友們可以學(xué)習(xí)下。2020-01-01