微信小程序代理加盟_jQuery完成一个简略的轮播图

摘要: jQuery完成一个简易的滚屏图 -212 文中关键详细介绍了jQuery完成一个简易滚屏图的方式,具备非常好的参照使用价值,下边跟随网编一起來看看吧title 滚屏图训练 /title link rel="styles...

jQuery实现一个简单的轮播图     -212   本文主要介绍了jQuery实现一个简单轮播图的方法,具有很好的参考价值,下面跟着小编一起来看下吧
title 轮播图练习 /title link rel="stylesheet" href="css/css.css" rel="external nofollow" type="text/css"/ /head body ul !-- 背景图片 -- li /li li /li li /li li /li li /li /ul ul !-- 控制按钮 -- li /li li /li li /li li /li li /li /ul div !-- 左右控制按钮 -- span /span span /span /div /body script src="js/jquery-1.7.2.js" /script script src="js/jq.js" /script /html

css代码:

*{margin:0; padding: 0;}
ul li{list-style: none;}
.back{height: 400px; overflow: hidden; margin-top:100px;}
.back li{width: 100%; height: 400px; margin:0 auto;}
.back li.l1{background: red;}
.back li.l2{background: yellow;}
.back li.l3{background: blue;}
.back li.l4{background: black;}
.back li.l5{background: green;}
.point{text-align: center; margin-top: -30px;}
.point li{ width: 20px; height: 20px; border:2px solid #fff; border-radius: 10px; box-sizing:border-box; display: inline-block;}
.point li.active{background: #fff;}
.btn{ position: relative;}
.btn span{ display: inline-block; vertical-align: top; width: 100px; height: 100px; background: rgba(0,0,0,.5); position: absolute; top:-235px; cursor: pointer;}
.btn .prev{left: 0}
.btn .next{ right: 0;}

js代码:

$(function(){
 function banner(a,b,c,d,e){ // a是背景图,b是active,c是背景对应按钮,d是上一页,e是下一页
 index=0;
 len=$(a).length-1;
 function teb(index){
 $(c).eq(index).addClass(b).siblings('').removeClass(b);
 $(a).eq(index).fadeIn(300).addClass('curr').siblings('').fadeOut(300).removeClass('curr');
 $(c).click(function(){
 index=$(this).index();
 teb(index);
 $(d).click(function(){
 index--;
 if(index 0){
 index=len;
 teb(index);
 $(e).click(function(){
 index++;
 if(index len){
 index=0;
 teb(index);
 function timeRun(){
 time=setInterval(function(){
 index++;
 if(index len){
 index=0;
 teb(index);
 },3000);
 timeRun();
 banner('.back li','active','.point li','.prev','.next');

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:创建网站