<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
.box{
width: 400px;
height: 300px;
overflow: hidden;
border: 3px solid #000000;
position: relative;
}
.imgs{
width: 2800px;
height: 300px;
border: 1px solid red;
position: absolute;
top: 0;
left: 0;
}
.imgs a img{
width: 400px;
height: 300px;
float: left;
}
ul{
width: 140px;
height: 20px;
position: absolute;
bottom: 5px;
right: 10px;
z-index: 10;
}
ul li{
width: 10px;
height: 10px;
border: 1px solid rgba(0,0,0,.5);
border-radius: 50%;
float: left;
margin-right: 5px;
background: rgba(0,0,0,.5);
}
.active{
background: red;
}
.box_s{
width: 40px;
height: 60px;
background: rgba(0,0,0,.5);
font-size: 20px;
color: white;
line-height: 60px;
text-align: center;
position: absolute;
top: 45%;
display: none;
}
.pre{
left: 0;
}
.next{
right: 0;
}
</style>
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var num = 0;
var timer = setInterval(run,1000);
function run() { //自動執行
num++;
if(num == $('.imgs a').length) //如果num == 所有圖片長度
{
num = 1;
$('.imgs').css({'left':'0px'});
}
if(num == $('.imgs a').length - 1) //目的是讓 下面的點
{
$('ul li').eq(0).addClass('active').siblings('li').removeClass('active');
}
$('.imgs').animate({'left': -400*num+'px'}) //偏移量
$('ul li').eq(num).addClass('active').siblings('li').removeClass('active'); //點
}
$('.box').hover(function(){
clearInterval(timer);
$('.pre,.next').show(); //鼠標經過盒子
},function(){
$('.pre,.next').hide(); //鼠標離開盒子
timer = setInterval(run,1000);
})
$('.pre').click(function(){ //點擊上翻按鈕
num--;
if(num == -1)
{
num = $('ul li').length - 1; //5
$('.imgs').css({'left':'-2400px'}); //總2800-重複= 2400
}
$('.imgs').animate({'left': -400*num+'px'}) //2000. 偏移一張
$('ul li').eq(num).addClass('active').siblings('li').removeClass('active');
})
$('.next').click(function(){ //下翻按鈕
num++;
if(num == $('.imgs a').length)
{
num = 1;
$('.imgs').css({'left':'0px'});
}
if(num == $('.imgs a').length - 1) // ==6
{
$('ul li').eq(0).addClass('active').siblings('li').removeClass('active');
}
$('.imgs').animate({'left': -400*num+'px'}) //最大2400，
$('ul li').eq(num).addClass('active').siblings('li').removeClass('active');
})
$('ul li').click(function(){ //下面原點 點擊事件
num = $(this).index();
$('.imgs').animate({'left': -400*num+'px'})
$('ul li').eq(num).addClass('active').siblings('li').removeClass('active');
})
})
</script>
</head>
<body>
<div class="box">
<div class="imgs">
<a href=""><img src="img/1.jpg"/></a>
<a href=""><img src="img/2.jpg"/></a>
<a href=""><img src="img/3.jpg"/></a>
<a href=""><img src="img/4.jpg"/></a>
<a href=""><img src="img/5.jpg"/></a>
<a href=""><img src="img/6.jpg"/></a>
<a href=""><img src="img/1.jpg"/></a>
</div>
<a href="javascript:;"class="pre box_s"> < </a>
<a href="javascript:;"class="next box_s"> > </a>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>jq寫無縫輪播
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
ES6 用class方式實現鼠標拖拽
ES6 用class方式實現鼠標拖拽 鼠標拖拽div ，div隨機顏色生成 <script> //1.首先創建一個拖拽類 class Drag { constru
微信瀏覽器自動關閉頁面
setTimeout(function() { //這個可以關閉安卓系統的手機 document.addEventListener( "WeixinJSBridgeReady", function
ES6 用class方式實現鼠標拖拽
ES6 用class方式實現鼠標拖拽 鼠標拖拽div ，div隨機顏色生成 <script> //1.首先創建一個拖拽類 class Drag { constru
微信瀏覽器自動關閉頁面
setTimeout(function() { //這個可以關閉安卓系統的手機 document.addEventListener( "WeixinJSBridgeReady", function