js333 > 计算机互联网 > jquery虎牙TV3D轮播特效,banner图片轮播

原标题:jquery虎牙TV3D轮播特效,banner图片轮播

浏览次数:194 时间:2019-11-18

jquery虎牙TV3D轮播特效,jquery虎牙tv3d特效

金沙js333娱乐场 1

css部分:

*{
margin: 0px;
padding: 0px;
}
body{
margin: 0px;
padding: 0px;
text-align: center;
}
#banner{
margin: 0px auto;
width: 1030px;
height: 250px;
position: relative;
}
#banner div img{
width: 100%;
height: 100%;
}
#banner .img_bottom1{
left: 0px;
top: 50px;
width: 340px;
height: 150px;
z-index: 8;
position: absolute;
}
#banner .img_bottom2{
left: 630px;
top: 50px;
width: 340px;
height: 150px;
z-index: 8;
position: absolute;
}
#banner .img_left{
left: 0px;
top: 25px;
width: 400px;
height: 200px;
z-index: 9;
position: absolute;
}
#banner .img_center{
left: 265px;
top: 0px;
width: 500px;
height: 250px;
z-index: 10;
position: absolute;
}
#banner .img_right{
left: 630px;
top: 25px;
width: 400px;
height: 200px;
z-index: 9;
position: absolute;
}
.btn_left{
text-align: center;
position: absolute;
left: 0px;
top: 0px;
width: 265px;
height: 250px;
cursor:pointer;
background: #ccc;
z-index: 11;
opacity: 0.01;
}
.btn_right{
text-align: center;
position: absolute;
right: 0px;
top: 0px;
width: 265px;
height: 250px;
cursor:pointer;
background: #ccc;
z-index: 11;
opacity: 0.01;
}
.left{
left: 100px;
top: 100px;
width: 50px;
height: 50px;
z-index: 12;
opacity: 0.8;
color: white;
cursor:pointer;
display: none;
font-size: 40px;
background: black;
line-height: 50px;
position: absolute;
text-align: center;
border-radius: 70px;
}
.right{
right: 100px;
top: 100px;
width: 50px;
height: 50px;
z-index: 12;
opacity: 0.8;
color: white;
cursor:pointer;
display: none;
font-size: 40px;
background: black;
line-height: 50px;
position: absolute;
text-align: center;
border-radius: 70px;
}

jquery部分:

$(function(){

// 左右轮播点击事件
var $d=$("#banner>div");  
var mask=false;
$('.btn_left').click(function(){
if(!mask){
mask=true;
move(false);
}
})
$('.btn_right').click(function(){
if(!mask){
mask=true;
move(true);
}
})
// 通过数组来包装轮播div的width、height、left、top、z-index
function move(direction){
var arrw=[],arrh=[],arrt=[],arrl=[],arri=[];
for(var i=0;i<$d.length;i++){
arrw[i]=$d.eq(i).css('width');
arrh[i]=$d.eq(i).css('height');
arrt[i]=$d.eq(i).css('top');
arrl[i]=$d.eq(i).css('left');
arri[i]=$d.eq(i).css('z-index');
}
for(var i=0;i<$d.length;i++){
var n;
// 通过判断点击的方向来改变轮播的方向
if(direction){
//往左循环轮播
n=i-1;
if(n<0){n=$d.length-1}
}else{
//往右循环轮播
n=i+1;
if(n>$d.length-1){n=0}
}
// 通过取出数组值来动画赋给上个或者下个div的方式实现3D轮播效果
$d.eq(i).css('z-index',arri[n]).animate({
"width":arrw[n],
"height":arrh[n],
"top":arrt[n],
"left":arrl[n],
// 通过判断动画是否完成来达到调试bug的目的
},600,function(){mask=false});
}

}

})
body部分:

<div id="banner">
<div class="img_bottom1"><img src="img/f5.jpg"></div>
<div class="img_left"><img src="img/f3.jpg"></div>
<div class="img_center"><img src="img/f8.jpg"></div>
<div class="img_right"><img src="img/f2.jpg"></div>
<div class="img_bottom2"><img src="img/f6.jpg"></div>
<span class="btn_left"></span>
金沙js333娱乐场, <span class="btn_right"></span>
<span class="bt left"><</span>
<span class="bt right">></span>
</div>

css部分: *{ margin: 0px; padding: 0px; } body{ margin: 0px; padding: 0px; text-align: center; } #banner{ margin: 0px auto;...

banner图片轮播,

html部分                           版本号   <script src="; 


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* { padding: 0; margin: 0; list-style: none; }
/********************************************/

.banner { width: 1920px; height: 500px; overflow: hidden; position: relative; margin-left: auto; margin-right: auto; }
.banner .img {position: absolute; left: 0px; top: 0; } /*图片样式*/
.banner .img li { float: left; } /*图片样式*/

.banner .img img { width: 550px; }
/*/ 小圆圈 /*/
.banner .num { position: absolute; width: 100%; bottom: 50px; left: 0; text-align: center; font-size: 0px;; }/*bottom 可以调整小圈圈高度 */
.banner .num li { width: 10px; height: 10px; background: #888; border-radius: 50%; display: inline-block; margin: 0 3px; cursor: pointer; }
.banner .num li.on { background: #F60; }
/*/ 按钮 /*/
.banner .btn { width: 30px; height: 50px; background: rgba(0,0,0,0.5); position: absolute; top: 50%; margin-top: -25px; cursor: pointer; text-align: center; line-height: 50px; color: #fff; font-size: 40px; font-family: "宋体"; display: none; }
.banner:hover .btn { display: block; }
.banner .btn_l { left: 0; }
.banner .btn_r { right: 0; }

/* 修改输出屏大小 */
#ban1 .banner { width: 100%px; height:600px; margin: 0 auto; border: 0px solid #000; }
#ban1 .banner .img img { width: 1920px; height: 600px; /* 修改图片大小 */
</style>
</head>
<body>
<script src=";
<script src="../gundongimages/js/gdlb.js"></script>
<div id="ban1">
<div class="banner">
<ul class="img">
<li><a href="#"><img src="..。。。。。。。。。。。。。。"></a></li>
<li><a href="#"><img src="。。。。。。。。。。。。。。。。。"></a></li>                          /*           图片路径根据自己的图片路径填写  */
</ul>
<ul class="num"> <!--小圆圈-->
</ul>
<div class="btn btn_l"><</div> <!--左按钮 -->
<div class="btn btn_r">></div> <!--右按钮 -->
</div>
</div>

</body>
</html>


js部分


$(function(){
imgscrool('#ban1');
imgscrool('#ban2');
})

 

//这是函数
function imgscrool(obj){

var moving = false;
var width = $(obj+" .banner .img img").width();
var i=0;
var clone=$(obj+" .banner .img li").first().clone();
$(obj+" .banner .img").append(clone);
var size=$(obj+" .banner .img li").size();
for(var j=0;j<size-1;j++){
$(obj+" .banner .num").append("<li></li>");
}
$(obj+" .banner .num li").first().addClass("on");

/*鼠标划入圆点*/
if ($(obj+" .banner .num li")) {

$(obj+" .banner .num li").hover(function(){
var index=$(this).index();
i=index;
$(obj+" .banner .img").stop().animate({left:-index*width},1000)
$(this).addClass("on").siblings().removeClass("on")
})
};
//处理轮播初始宽度问题
var a2= $(obj+" .banner img").width();
var a3= $(obj+" .img li").length
$(obj+" .banner .img").width(a2*a3+'px');

/*自动轮播*/
var t=setInterval(function(){
i++;
move();
},2000)

/*对banner定时器的操作*/
$(obj+" .banner").hover(function(){
clearInterval(t);
},function(){
t=setInterval(function(){
i++;
move();
},2000)
})

if ($(obj+" .banner .btn_l")) {

/*向左的按钮*/
$(obj+" .banner .btn_l").stop(true).click(function(){
if(moving){
return;
};
moving=true;
i--
move();
})

/*向右的按钮*/
$(obj+" .banner .btn_r").stop(true).click(function(){
if(moving){
return;
}
moving=true;
i++
move()
})

};

function move(){

if(i==size){
$(obj+" .banner .img").css({left:0})
i=1;
}

// 修改轮播每屏宽度
if(i==-1){
$(obj+" .banner .img").css({left:-(size-1)*width})
i=size-2;
}
$(obj+" .banner .img").stop(true).delay(200).animate({left:-i*width},1000,function(){
moving = false;
})

if(i==size-1){
$(obj+" .banner .num li").eq(0).addClass("on").siblings().removeClass("on")
}else{
$(obj+" .banner .num li").eq(i).addClass("on").siblings().removeClass("on")
}
}
}

html部分 版本号 script src=" -------------------------------------------------------------------------...

本文由js333发布于计算机互联网,转载请注明出处:jquery虎牙TV3D轮播特效,banner图片轮播

关键词:

上一篇:重装系统和工区迁移中所遇问题的解决办法

下一篇:存储学习笔记,关于存储控制器的多路径机制