jQuery轮 播的封装
2021-07-05 15:06
标签：clear ack over height float jquery pre img abs 今天来聊聊jQuery轮播的封装！ 我自己封装了一个图片宽1200px，高400px的无缝滚动轮播图；话不多说看看代码吧！ Js: css: html: 这个封装只能适用于图片宽为1200px，高为400px的一个轮播图。 jQuery轮 播的封装 标签：clear ack over height float jquery pre img abs 原文地址：http://www.cnblogs.com/yhyanjin/p/7106512.html/**
* Created by Administrator on 2017/7/1 0001.
*/
$(function(){
var timer1=null;
var timer2=null;
var q=1;
var x=-1200; //刚开始让第一张图片展现出来
// 向左移动
leftstar()
function leftstar(){
//设定计时器
timer1=setInterval(function(){
//每走完一张，对应小白点对应显示
if(x%1200==0){
stop(1);//关闭向右走的计时器
xiaobia(Math.abs(x/1200)-1)
}
//当一轮图片走完，又返回原来的为位置接着走，依次循环
if(x==-6000){
x=-1200;
}
$("#imgs").css("left",x+"px");
x-=5
},30)
}
// 向右移动
function rightstar(){
timer1=setInterval(function(){
if(x%1200==0){
stop(2);//关闭向左走的计时器
xiaobia(Math.abs(x/1200)-1)
}
if(x==0){
x=-4800;
}
$("#imgs").css("left",x+"px");
x+=5
},30)
}
// 停止计时器
function stop(q){
clearInterval(timer1);
clearTimeout(timer2);
if(q==1){
timer2=setTimeout(leftstar,500)
}
if(q==2){
timer2=setTimeout(rightstar,500)
}
}
// 移入移出
$("#banner").hover(function(){
stop()
},function(){
stop(q)
});
//向左走的按钮
$("#left_Btn").click(function(){
stop(1)
q=1;
});
//向右走的按钮
$("#right_Btn").click(function(){
stop(2)
q=2;
})
// 小白点
function xiaobia(num){
if(num==4){
num=0
}
if(num==-1){
num=3
}
$("#biao li").eq(num).css("background","red")
$("#biao li").eq(num).siblings().css("background","white")
}
$("#biao li").hover(function(){
xiaobia($(this).index())
$("#imgs").css("left",-($(this).index()*1200)-1200)
x=-($(this).index()*1200)-1200
})
})
/*4+2 width:1200px;*/
*{
margin: 0;
padding: 0;
}
/*最外层的div*/
#banner{
width: 1200px;
height: 400px;
position: relative;
top: 100px;
left: 10%;
overflow: hidden;
}
/*包裹图片的ul*/
#imgs{
width: 7200px;
height: 400px;
position: absolute;
left: -1200px;
}
#imgs li{
float: left;
list-style: none;
}
#imgs li img{
width: 1200px;
height: 400px;
}
/*小圆点的父级*/
#biao{
width: 200px;
height: 50px;
position: absolute;
left: 35%;
bottom: 0;
}
/*小圆点*/
#biao li{
float: left;
list-style: none;
margin-left: 20px;
border-radius: 50%;
width: 30px;
height: 30px;
color: #007ed9;
line-height: 30px;
background: white;
text-align: center;
}
/*左右按钮的父级*/
ol{
width: 1200px;
height: 50px;
text-align: center;
line-height: 50px;
position: absolute;
left: 0;
top:35%;
}
ol li{
font-size: 30px;
list-style: none;
width: 50px;
height: 50px;
color: white;
position: absolute;
background: rgba(0,0,0,.5);
}
/*左按钮*/
#left_Btn{
left: 0;
}
/*右按钮 */
#right_Btn{
right: 0;
}
/*4+2 width:1200px;*/
*{
margin: 0;
padding: 0;
}
/*最外层的div*/
#banner{
width: 1200px;
height: 400px;
position: relative;
top: 100px;
left: 10%;
overflow: hidden;
}
/*包裹图片的ul*/
#imgs{
width: 7200px;
height: 400px;
position: absolute;
left: -1200px;
}
#imgs li{
float: left;
list-style: none;
}
#imgs li img{
width: 1200px;
height: 400px;
}
/*小圆点的父级*/
#biao{
width: 200px;
height: 50px;
position: absolute;
left: 35%;
bottom: 0;
}
/*小圆点*/
#biao li{
float: left;
list-style: none;
margin-left: 20px;
border-radius: 50%;
width: 30px;
height: 30px;
color: #007ed9;
line-height: 30px;
background: white;
text-align: center;
}
/*左右按钮的父级*/
ol{
width: 1200px;
height: 50px;
text-align: center;
line-height: 50px;
position: absolute;
left: 0;
top:35%;
}
ol li{
font-size: 30px;
list-style: none;
width: 50px;
height: 50px;
color: white;
position: absolute;
background: rgba(0,0,0,.5);
}
/*左按钮*/
#left_Btn{
left: 0;
}
/*右按钮 */
#right_Btn{
right: 0;
}