jquery實現圖片左右切換的方法

2024-05-06 16:19:41

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了jquery實現圖片左右切換的方法,設計jQuery操作頁面元素及對應樣式的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了jquery實現圖片左右切換的方法。分享給大家供大家參考。具體實現方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>圖片左右滾動</title>

<script src="jquery-1.6.2.min.js" type="text/javascript"></script>

<script>

$(function(){

var i=0;

var li = $(".lxfscroll li");

var n=li.length-1;

var speed = 300;

li.not(":first").css({left:"400px"});

li.eq(n).css({left:"-400px"});

lxfNext=function (){

if (!li.is(":animated")) {

if (i>=n){i=0;li.eq(n).animate({left:"-400px"},speed);

li.eq(i).animate({left:"0px"},speed);

}else{i++;li.eq(i-1).animate({left:"-400px"},speed);li.eq(i).animate({left:"0px"},speed);};

li.not("eq(i)").css({left:"400px"});

$("i").text(i+1);

}else{};

};

lxfLast=function (){

if (!li.is(":animated")) {

if (i<=0){i=n;li.eq(0).animate({left:"400px"},speed);li.eq(n).animate({left:"0px"},speed);

}else{i--;li.eq(i+1).animate({left:"400px"},speed);li.eq(i).animate({left:"0px"},speed);}

li.not("eq(i)").css({left:"-400px"});

$("i").text(i+1);

};

};

});

</script>

<style type="text/css">

* {

font-size:12px;

color:#333;

text-decoration:none;

padding:0;

margin:0;

list-style:none;

font-style: normal;

font-family: Arial, Helvetica, sans-serif;

}

.lxfscroll {

width:400px;

margin-left:auto;

margin-right:auto;

margin-top: 20px;

overflow: hidden;

position: relative;

height: 300px;

border: 1px dashed #CCC;

}

.button {

margin-right:auto;

margin-left:auto;

width:400px;

text-align:center;

padding-top: 10px;

}

i {

color:#F00;

font-weight:bold;

}

.button input {

padding-top: 4px;

padding-right: 12px;

padding-bottom: 4px;

padding-left: 12px;

}

.lxfscroll ul li {

height: 300px;

width: 400px;

text-align: center;

line-height: 300px;

position: absolute;

font-size: 40px;

font-weight: bold;

}

</style>

</head>

<body>

<div class="lxfscroll">

<ul>

<li>我是第1張圖片</li>

<li>我是第2張圖片</li>

<li>我是第3張圖片</li>

<li>我是第4張圖片</li>

<li>我是第5張圖片</li>

<li>我是第6張圖片</li>

<li>我是第7張圖片</li>

<li>我是第N張圖片</li>

</ul>

</div>

<div class="button">

<input name="a" type="button" onClick="lxfLast()" value="上一個" />

<input name="a" type="button" onClick="lxfNext()" value="下一個" />

</div>

<div class="button">當前顯示的是第 <i>1</i> 張圖片</div>

</body>

</html>