本篇文章给大家介绍jq实现无缝轮播图效果的方法,可以自动轮播,也可以手动点击切换轮播。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
我们在很多的网站上都可以看到轮播图,例如在淘宝、京东这些网站都有轮播图的存在;轮播图的使用范围非常广,banner和animation很容易抓住用户的眼球,所以做好这个也就是一个网页一个app的关键之一。
轮播图有多种实现方式,可以用css实现、用jQuery实现、甚至是用其他框架实现,下面我们就以jQuery方法举例,用jQuery代码做一个自动+手动轮播图片的轮播图效果。
jq实现无缝轮播图效果(自动轮播)的代码示例:
html代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!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/jq如何達到無縫輪播圖效果(自動輪播)? (程式碼範例)" alt = "jq如何達到無縫輪播圖效果(自動輪播)? (程式碼範例)" ></ a >
</ li >
< li >
< a href = "#" >< img src = "img/2.png" alt = "jq如何達到無縫輪播圖效果(自動輪播)? (程式碼範例)" ></ a >
</ li >
< li >
< a href = "#" >< img src = "img/jq如何達到無縫輪播圖效果(自動輪播)? (程式碼範例)" alt = "jq如何達到無縫輪播圖效果(自動輪播)? (程式碼範例)" ></ a >
</ li >
< li >
< a href = "#" >< img src = "img/2.png" alt = "jq如何達到無縫輪播圖效果(自動輪播)? (程式碼範例)" ></ 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代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | * {
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文件
1 | <script type= "text/javascript" src= "s/jquery-1.7.2.min.js" ></script>
|
登入後複製
注:想要使用jquery来实现各种效果,就必须要先引用jquery.js文件,在使用jquery代码来实现各种效果。
在使用jquery语句来实现轮播效果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <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(& #39;on');
$( ".banner .num li" ).hover( function () {
var index = $( this ).index();
i = index;
$( ".banner .img" ).stop().animate({
left: -index * 1000
}, 500);
$( this ).addClass(& #39;on').siblings().removeClass('on');
})
var t = setInterval( function () {
i++;
move();
}, 2000);
$( ".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(& #39;on').siblings().removeClass('on');
} else {
$( ".banner .num li" ).eq(i).addClass(& #39;on').siblings().removeClass('on');
}
}
})
</script>
|
登入後複製
我们来看看效果(静态):
总结:以上就是jQuery实现无缝轮播图效果的全部代码,大家可以自己动手尝试编译,看看效果,加深理解,制作属于自己的轮播图。希望能对大家的学习有所帮助,更多相关教程请访问JavaScript视频教程,jQuery视频教程,bootstrap教程!
以上是jq如何達到無縫輪播圖效果(自動輪播)? (程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!