Maison > Article > interface Web > Partage de l'effet carrousel de la version jquery et exemples d'extension d'extension
Partage de l'effet carrousel de la version jquery et exemples d'extension d'extension
- 小云云original
- 2017-12-31 16:52:501450parcourir
Cet article présente principalement en détail l'effet de la version jquery de l'image carrousel, ainsi que les informations associées sur l'extension. Les amis intéressés peuvent s'y référer.
Le code spécifique est le suivant
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
font-size:14px;
-webkit-user-select:none;
}
ul,li{
list-style:none;
}
img{
display:block;
border:none;
}
a{
text-decoration: none;
}
.banner{
position:relative;
margin:10px auto;
width:1000px;
height:300px;
overflow:hidden;
}
.bannerInner{
width:100%;
height:100%;
background:url("../img/default.gif") no-repeat center center;
}
.bannerInner p{
position:absolute;
top:0;
left:0;
z-index:0;
width:100%;
height:100%;
opacity: 0;
filter:alpha(opacity=0);
}
.bannerInner p img{
display:none;
width:100%;
height:100%;
}
.banner .bannerTip{
position:absolute;
right:20px;
bottom:20px;
z-index:10;
overflow:hidden;
}
.banner .bannerTip li{
float:left;
margin-left:10px;
width:18px;
height:18px;
background:lightblue;
border-radius:50%;
cursor:pointer;
}
.banner .bannerTip li.bg{
background:orange;
}
.banner a{
display:none;
position:absolute;
top:50%;
margin-top:-22.5px;
z-index:10;
width:30px;
height:45px;
opacity: 0.5;
filter:alpha(opacity=50);
background-image:url('../img/pre.png');
}
.banner a.bannerLeft{
left:20px;
background-position:0 0;
}
.banner a.bannerRight{
right:20px;
background-position:-50px 0;
}
.banner a:hover{
opacity: 1;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<p class='banner' id='bannerFir'>
<p class='bannerInner'>
<p><img src="" alt="" trueImg='img/banner1.jpg'></p>
<p><img src="" alt="" trueImg='img/banner2.jpg'></p>
<p><img src="" alt="" trueImg='img/banner3.jpg'></p>
<p><img src="" alt="" trueImg='img/banner4.jpg'></p>
</p>
<ul class='bannerTip'>
<li class='bg'></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" class='bannerLeft'></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" class='bannerRight'></a>
</p>
<script>
jQuery.fn.extend({
banner:myBanner
})
//通过jQuery选择器或者筛选的方法获取到的jQuery集合是不存在dom映射机制的，之前获取到的dom集合，之后再页面中HTML结构改变了，集合中的内容不会跟着自动发生变化（JS获取的元素集合有DOM映射的机制）
function myBanner(selector,ajaxURL,interval){
var $banner = $("#"+selector);
var $bannerInner = $banner.children(".bannerInner"),$pList = null,$imgList = null;
var $bannerTip = $banner.children(".bannerTip"),$oLis = null
var $bannerLeft = $banner.children(".bannerLeft"),$bannerRight = $banner.children(".bannerRight")
//1、Ajax读取数据
var jsonData = null;
$.ajax({
url:ajaxURL+"?_="+Math.random(),
type:'get',
dataType::"json",
async:false,//当前的请求是同步的
success:function(data){
jsonData = data;
}
})
//2、实现数据的绑定
function bindData(){
var str = "",str2 = "";
if(jsonData){
//原生的jsonData使用$.each()
$.each(jsonData,function(index,item){
str+='<p><img src="" alt="" trueImg="'+item["img"]+'"></p>';
index===0?str2+='<li class="bg"></li>':str2+='<li></li>'
})
$bannerInner.html(str);
$bannerTip.html(str2);
$pList = $bannerInner.children("p")
$imgList = $bannerInner.find('img')
$oLis = $bannerTip.children("li")
}
}
//3、实现图片的延迟加载
window.setTimeout(lazyImg,500);
function lazyImg(){
//jquery元素集合 直接写$imgList.each()
$imgList.each(function(index,item){
var _this = this;
var oImg = new Image;
oImg.src = $(this).attr("trueImg");//$(this)等价于$(item)
oImg.onload = function(){
$(_this).prop('src',this.src).css("display","block")//内置属性使用prop
}
})
$pList.eq(0).css("zIndex",1).animate({opacity:1},300);
}
//封装一个轮播图切换的效果
function changeBanner(){
var $curp = $pList.eq(step);
$curp.css("zIndex",1).siblings().css("zIndex",0);
$curp.animate({opacity:1},300,function(){
$(this).siblings().css("opacity",0)
})
$oLis.eq(step).addClass("bg").siblings().removeClass('bg')
}
//4、实现自动轮播
interval = interval || 3000;
var step = 0,autoTimer = null;
autoTimer = window.setInterval(autoMove,interval)
function autoMove(){
if(step === jsonData.length-1){
step = -1;
}
step++;
changeBanner();
}
//5、控制左右按钮的显示隐藏和自动轮播的开始和暂停
$banner.on('mouseover',function(){
window.clearInterval(autoTimer);
$bannerLeft.css("display","block")
$bannerRight.css("display","block")
}).on('mouseout',function(){
autoTimer = window.setInterval(autoMove,interval);
$bannerLeft.css("display","none")
$bannerRight.css("display","none")
})
//6、实现焦点切换
$oLis.on('click',function(){
step = $(this).index();
changeBanner();
})
//7、实现左右切换
$bannerRight.on('click',autoMove);
$bannerLeft.on('click',function(){
if(step===0){
step = jsonData.length;
}
step--;
changeBanner();
});
}
//外部使用
$().banner("bannerFir","json/banner.txt",1000)
</script>
</body>
</html>Recommandations associées :
Exemple d'explication détaillée de jquery pour obtenir un effet d'image de carrousel gauche et droit
Image du carrousel de boucle JS
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn