JQuery 圖片滾動(dòng)輪播示例代碼

2024-05-06 16:03:09

字體：大中小

供稿：網(wǎng)友

這篇文章主要介紹了JQuery實(shí)現(xiàn)圖片滾動(dòng)輪播,需要的朋友可以參考下

完整的項(xiàng)目在附件中

復(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>
<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>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
</body>
</html>