轮播插件

最新推荐文章于 2024-07-08 16:22:29 发布

aoyinyan3561

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量63

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/guarda/p/6419109.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片切换9</title>
<style type="text/css">
*{margin:0;padding:0;border:none;}
.menu{ width:871px; height:298px; margin:0 auto; overflow:hidden; position:relative }
.menu .pic{display: block; position: absolute;top: 0;left: 0; z-index: 98;height: auto; }
.menu .pic img{ float:left;z-index:1;}
.menu .btleft,.menu .btright{width:37px;height:40px;position:absolute;top:129px;cursor:pointer;z-index: 99;}
.menu .btleft{left:0px; background:url(pic/arrowl.png)}
.menu .btright{right:0px;background:url(pic/arrowr.png)}

.menu .ss{ width:100px; height:20px; position:absolute; top:268px; left:400px;z-index: 99;}
.menu .ss span{ display:block; margin-right:5px; width:20px; height:20px; background:rgba(102,102,102,0.8); float:left; border-radius:50%;text-align:center;line-height:20px;color:#ccc;cursor:pointer;}
.menu .ss .current{ background:rgba(255,0,0,1);}
.menu .ss span:hover{color:#fff;}

</style>

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/slide.js"></script>
<script type="text/javascript">
$(function(){
$('.menu').slidePic({
arrowcontrol:true,//启动左右按钮
autoscrooll: true //自动滚动
//其他属性可默认可在此添加修改
});
})
</script>

</head>
<body>
<div class="menu">
<div class="btleft"></div> 
<div class="btright"></div> 
<div class="pic">
<img src="pic/1.jpg" />
<img src="pic/2.jpg" />
<img src="pic/3.jpg" />
<img src="pic/4.jpg" />
</div>
<div class="ss">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
</body>
</html>

//........
var paging=Q.find(".ss span");
paging.eq(index).addClass('current');
Q.find(paging).on('touchstart mouseover',function(){
index=Q.find(paging).index($(this));
showPics(index);
});
//.......
var prev=Q.find('.btleft');
var next=Q.find('.btright');
prev.on('click',function(){
index--;
if(index==-1){index=len-1;}
showPics(index);
});
next.on('click',function(){
index++;
if(index==len){index=0;}
showPics(index);
});

//清除计时器
Q.on('touchstart mouseover',function(){
clearInterval(time);
})
Q.on('mouseleave',function () {
if (setting.autoscrooll) {
time = setInterval(picTimer, setting.Time);
} else {
clearInterval(time);
Q.find('$(".ss")').hide()
}
});

})
}

})(jQuery)

转载于:https://www.cnblogs.com/guarda/p/6419109.html

aoyinyan3561

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播插件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片切换9</title> <style type="text/css"> *{margin:0;padding:0;border:none;} .men...
复制链接

扫一扫