首頁 > 開發者 > JavaScript

利用jquery寫的左右輪播圖特效

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

利用jquery寫的左右輪播圖特效

 一個利用jquery寫的左右輪播圖，將jquery架構的連結跟圖片替換就可以看到效果了,需要的朋友可以參考下

最近不是很忙，練習寫了一個輪播圖效果，雖然效果跟功能上貌似是沒問題，但是我認為在許多東西上面都有待改進，在前端這個職位上我還有很遠的路要走，當然要學的東西還有很多，這裡僅僅對自己最近研究js的一個記錄，我相信以後能寫出更好的 

 

將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> 

<style> 

*{margin:0; padding:0;} 

body{min-width:320px; font-size:12px;} 

h1{font-size:18px;} 

h2{font-size:14px} 

h4{font-size:12px;} 

p{ word-break:break-all; line-height:24px;} 

ul,ul li,ol,ol li{list-style:none;} 

a{text-decoration:none;} 

.clear{clear:both;} 

.clearfix:after{ display:block; clear:both; content:"."; visibility:hidden; height:0px;} 

 

#pic_carousel{position:relative;width:1000px;height:350px;overflow:hidden;margin: 0 auto;text-align:center;} 

.lunbo_pic{ position:absolute; left:0; top:0; overflow:hidden; text-align:center;} 

.lunbo_pic li{ float:left; overflow:hidden;} 

.lunbo_pic li a img{ width:1000px; display:block;vertical-align:bottom; border:none;} 

.lunbo_curso{ position:absolute; left:50%; width:125px; margin-left:-64px; bottom:0; } 

.lunbo_curso a{ background:url(../images/will_yuan.png) no-repeat center; float:left; color:#00F; width:25px; cursor:pointer;height:25px; line-height:25px; display:block; text-align:center;} 

.lunbo_curso .small_xz{ color:#F0F;} 

.arr{ position:absolute; top:50%; margin-top:-25px; width:30px; height:50px;} 

#arr_l{ left:0; background:#CCC;} 

#arr_r{ right:0; background:#CCC;} 

.tc_kuan{ position:absolute; top:50%; left:50%; margin-top:-25px; margin-left:-100px; width:200px; height:50px; line-height:50px; background:#CCC; color:#000;} 

</style> 

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

</head> 

<body> 

<div id="pic_carousel"> 

<ul id="lunbo_pic" class="clearfix lunbo_pic"> 

<li><a href="#"><img src="images/insco_p1.jpg" /></a></li> 

<li><a href="#"><img src="images/insco_p2.jpg" /></a></li> 

<li><a href="#"><img src="images/insco_p3.jpg" /></a></li> 

<li><a href="#"><img src="images/insco_p1.jpg" /></a></li> 

<li><a href="#"><img src="images/insco_p2.jpg" /></a></li> 

</ul> 

<div id="lunbo_curso" class="lunbo_curso"> 

<a href="#" class="small_xz">1</a> 

<a href="#">2</a> 

<a href="#">3</a> 

<a href="#">4</a> 

<a href="#">5</a> 

</div> 

<span id="arr_l" class="arr"></span> 

<span id="arr_r" class="arr"></span> 

</div> 

<script> 

var b_width = 1000; // 大圖的寬度 

var speed = 500; // 圖片向左移動速度 

var s_time = 3000 //圖片自動捲動速度 

var pic_li = $("#lunbo_pic").children("li"); 

$(document).ready(function(e) { 

var $ul_width= pic_li.width() * pic_li.length; //輪播圖的寬度 

$("#lunbo_pic").width($ul_width); 

var small_width = $(".lunbo_curso>a").width() * $(".lunbo_curso>a").length; 

$(".lunbo_curso").width(small_width); 

$(".lunbo_curso").css("margin-left",-small_width/2); 

}); 

 

 

 

$(document).live("click",function(e){ 

$target = $(e.target); 

var id = $target.attr('id'); 

if($target.is("a") && $target.parent($("#lunbo_curso")) ){ 

$target.addClass("small_xz").siblings().removeClass('small_xz'); 

var mar_lf = parseInt($target.index() * b_width); 

$("#lunbo_pic").animate({ 

left : -mar_lf 

},speed); 

} 

if(id == "arr_l"){ 

prePage(); 

} 

if(id == "arr_r"){ 

nextPage(); 

} 

}); 

//上一個 

function prePage(){ 

if($(".small_xz").index() == 0){ 

$("#lunbo_pic").css("left",-4000); 

$("#lunbo_pic").animate({ 

"left": -parseInt(pic_li.length *b_width - b_width) 

},speed); 

$("#lunbo_curso>a").eq(pic_li.length - 1).addClass("small_xz").siblings().removeClass("small_xz"); 

$(".small_xz").index() == pic_li.length - 1; 

}else{ 

$("#lunbo_curso>a").eq($(".small_xz").index()-1).addClass("small_xz").siblings().removeClass("small_xz"); 

var mar_lf2 = parseInt($("#lunbo_pic").css("left")) + b_width; 

$("#lunbo_pic").animate({ 

"left": mar_lf2 

},speed); 

} 

} 

//下一個 

function nextPage(){ 

if($(".small_xz").index() == pic_li.length -1){ 

$("#lunbo_pic").css("left",0); 

/*$("#lunbo_pic").animate({ 

"left": 0 

},speed);*/ 

$("#lunbo_curso>a").eq(0).addClass("small_xz").siblings().removeClass("small_xz"); 

$(".small_xz").index() == 0; 

 

}else{ 

 

$("#lunbo_curso>a").eq($(".small_xz").index() + 1).addClass("small_xz").siblings().removeClass("small_xz"); 

var mar_lf2 = parseInt($("#lunbo_pic").css("left")) - b_width; 

$("#lunbo_pic").animate({ 

"left": mar_lf2 

},speed); 

} 

} 

 

function picRun(){ 

nextPage(); 

} 

intervalTime = setInterval(picRun,s_time); 

 

$("#pic_carousel").on("mouseover",function(){ 

clearInterval(intervalTime); 

}); 

$("#pic_carousel").on("mouseout",function(){ 

intervalTime = setInterval(picRun,s_time);; 

}); 

 

</script> 

</body> 

</html> 

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More