溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下jq實現無縫輪播圖效果的方法是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
我們在很多的網站上都可以看到輪播圖，例如在淘寶、京東這些網站都有輪播圖的存在；輪播圖的使用范圍非常廣，banner和animation很容易抓住用戶的眼球，所以做好這個也就是一個網頁一個app的關鍵之一。
輪播圖有多種實現方式，可以用css實現、用jQuery實現、甚至是用其他框架實現，下面我們就以jQuery方法舉例，用jQuery代碼做一個自動+手動輪播圖片的輪播圖效果。
jq實現無縫輪播圖效果（自動輪播）的代碼示例：
html代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery實現無縫輪播圖</title> <link href="css/style.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="banner"> <ul class="img"> <li> <a href="#"><img src="img/1.jpg"></a> </li> <li> <a href="#"><img src="img/2.png"></a> </li> <li> <a href="#"><img src="img/1.jpg"></a> </li> <li> <a href="#"><img src="img/2.png"></a> </li> </ul> <ul class="num"> </ul> <div class="btn btn_l"><</div> <div class="btn btn_r">></div> </div> </body> </html>
上面是html代碼，代碼的結構比較簡單，這里解釋一下，ul.img標簽是要左右移動的，ul.img標簽里就是輪播圖的主體內容了；然后ul.num標簽是提供索引和下標控制符，綁定動畫的，會通過jq代碼來控制數量與圖片一致。btn_l和tn_r類名的div標簽是提供左右按鈕，這樣輪播圖就可以點擊實現手動的左右滑動。
css代碼：
* {
padding: 0;
margin: 0;
list-style: none;
}
.banner {
margin: 100px auto;
border: 5px solid #000;
width: 1000px;
height: 640px;
position: relative;
overflow: hidden;
}
.banner .img {
width: 5000px;
position: absolute;
left: 0px;
top: 0px;
}
.banner .img li {
float: left;
}
.banner .img li img {
width: 1000px;
}
/*小圓點的樣式*/
.banner .num {
position: absolute;
right: 40px;
bottom: 30px;
}
.banner .num li {
width: 20px;
height: 20px;
float: left;
background: #333;
margin-left: 20px;
border-radius: 50px;
border: 2px solid white;
}
.banner .num li.on {
border: 2px solid #333;
background: white
}
/*兩邊耳朵的樣式*/
.banner .btn {
position: absolute;
width: 80px;
height: 80px;
background: rgba(0, 0, 0, 0.7);
font-size: 60px;
color: white;
text-align: center;
line-height: 80px;
top: 50%;
margin-top: -80px;
cursor: pointer;
display: none;
}
.banner:hover .btn {
display: block;
}
.banner .btn_l {
left: 10px;
border-radius: 50%
}
.banner .btn_r {
right: 10px;
border-radius: 50%
}我們鏈接的外部css文件，然后請注意一下各種屬性和值。
jquery代碼：
首先要引用jquery.js文件
<script type="text/javascript" src="s/jquery-1.7.2.min.js"></script>
注：想要使用jquery來實現各種效果，就必須要先引用jquery.js文件，在使用jquery代碼來實現各種效果。
在使用jquery語句來實現輪播效果：
<script>
$(function() {
var i = 0;
var clone = $(".banner .img li").first().clone();
$(".banner .img").append(clone);
var size = $(".banner .img li").size();
for(var j = 0; j < size - 1; j++) {
$(".banner .num").append("<li></li>");
}
$(".banner .num li").first().addClass('on');
//鼠標劃入圓點
$(".banner .num li").hover(function() {
var index = $(this).index();
i = index;
$(".banner .img").stop().animate({
left: -index * 1000
}, 500);
$(this).addClass('on').siblings().removeClass('on');
})
/*輪播圖自動輪播*/
var t = setInterval(function() {
i++;
move();
}, 2000);
//對banner定時器的操作
$(".banner").hover(function() {
clearInterval(t);
}, function() {
t = setInterval(move, 2000);
})
/*向左按鈕*/
$(".banner .btn_l").click(function() {
i--;
move();
})
/*向右按鈕*/
$(".banner .btn_r").click(function() {
i++;
move();
})
/*封裝函數*/
function move() {
if(i == size) {
$(".banner .img").css({
left: 0
});
i = 1;
}
if(i == -1) {
$(".banner .img").css({
left: -(size - 1) * 1000
});
i = size - 2;
}
$(".banner .img").stop().animate({
left: -i * 1000
}, 500);
if(i == size - 1) {
$(".banner .num li").eq(0).addClass('on').siblings().removeClass('on');
} else {
$(".banner .num li").eq(i).addClass('on').siblings().removeClass('on');
}
}
})
</script>我們來看看效果（靜態）：
看完了這篇文章，相信你對jq實現無縫輪播圖效果的方法是什么有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
