jQuery圖片輪播

最後更新：2017-01-25 來源：互聯網

上載者：User

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

標籤：ack document alt .com html :hover var image code

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>圖片輪播</title>
<style>
*{margin:0px;padding:0px;}
.one{
float:left;
position:relative;
left:0px;
top:0px;
margin-left:10px;
width:790px;
height:340px;
overflow:hidden;
}
.one ul li{
list-style:none;
}
.photo ul{
float:left;
position:absolute;
height:490px;
left:0px;
top:0px;
}
.photo ul li{
float:left;
padding:0px;
margin:0px;
}

.arrow span{
display:block;
position:absolute;
width:30px;
height:60px;
line-height:60px;
text-align:center;
background:rgba(0,0,0,0.2);
z-index:1;
font-size:20px;
color:#fff;
top:40%;
cursor:pointer;
display:none;

}
.arrow span:hover{
background:rgba(0,0,0,0.7);
}
.arrow .right{
right:0px;
}
.dot{
position:absolute;
z-index:!;
background:rgba(255,255,255,0.2);
font-size:26px;
bottom:15px;
left:300px;
border-radius:22px;
}
.dot ul{
margin:0px;
padding:0px;
}
.dot ul li{
float:left;
padding:0px;
margin:0px;
margin:0 5px;
cursor:pointer;
}
</style>
</head>

<body>
<div class="one">
<div>
<div class="photo">
<ul>
<li><img src="image/1.png" alt="1" /></li>
<li><img src="image/2.png" alt="2" /></li>
<li><img src="image/3.png" alt="3" /></li>
<li><img src="image/4.png" alt="4" /></li>
<li><img src="image/5.png" alt="5" /></li>
<li><img src="image/6.png" alt="6" /></li>
</ul>
</div>
<div class="arrow"><span class="iconfont left"></span> <span class="iconfont right"></span></div>
<div class="dot">
<ul>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" ></script>
<script>
$(document).ready(function(){
var ulWidth=$(‘.photo ul li‘).length*$(‘.photo ul li‘).eq(1).width();
$(‘.dot ul li‘).first().css(‘color‘,‘#db192a‘);
$(‘.photo ul‘).width(ulWidth);
$(‘.photo,.arrow span‘).hover(function(){$(‘.arrow span‘).toggle()})
function jdshow(){
var index=-$(‘.photo ul‘).position().left/$(‘.photo ul li‘).eq(1).width();
$(‘.dot ul li‘).css(‘color‘,‘#fff‘);
if(index==$(‘.photo ul li‘).length-1){index=-1}
$(‘.dot ul li‘).eq(index+1).css(‘color‘,‘#db192a‘);

if($(‘.photo ul‘).position().left==-(ulWidth-790)){
$(‘.photo ul‘).css(‘left‘,‘790px‘);//圖片寬度
$(‘.photo ul‘).clone().appendTo(‘.photo‘);
$(‘.photo ul:first‘).remove();
}
$(‘.photo ul‘).animate({
left:‘-=790px‘,
},10);

}
setInterval(jdshow,2000);

$(‘.arrow .right‘).click(function(){
jdshow();
});
$(‘.arrow .left‘).click(function(){
/*alert($(‘.jd-photo ul‘).position().left);*/
var index=-$(‘.photo ul‘).position().left/$(‘.photo ul li‘).eq(1).width();
$(‘.dot ul li‘).css(‘color‘,‘#fff‘);
$(‘.dot ul li‘).eq(index-1).css(‘color‘,‘#db192a‘);
if($(‘.photo ul‘).position().left==0){
$(‘.photo ul‘).css(‘left‘,-ulWidth);
$(‘.photo ul‘).clone().appendTo(‘.photo‘);
$(‘.photo ul:first‘).remove();
}
$(‘.photo ul‘).animate({
left:‘+=790px‘,
},10);
});
$(‘.dot ul li‘).click(function(){
var index=$(‘.dot ul li‘).index(this);
$(‘.photo ul‘).animate({
left:-index*790,
},10);
$(‘.dot ul li‘).css(‘color‘,‘#fff‘);
$(this).css(‘color‘,‘#db192a‘);
});
})
</script>
</body>
</html>

jQuery圖片輪播

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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

jQuery圖片輪播

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support