jQuery做图片轮播
来源：互联网 发布：java打印功能代码 编辑：程序博客网 时间：2024/05/28 05:15
淡入淡出式：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图片轮播</title> <script type="text/javascript" src="js/jquery.js" ></script> <style type="text/css"> *{ margin: 0; padding: 0; } .banner{ width:790px; height: 340px; margin: 0px auto; position: relative; } img{ position: absolute; left: 0px; top: 0px; display: none; } .left{ position: absolute; width: 30px; height: 60px; background: rgba(50,50,50,0.4); text-align: center; left: 0px; top: 140px; font-size: 20px; line-height: 60px; color: white; } .right{ position: absolute; width: 30px; height: 60px; background: rgba(50,50,50,0.4); text-align: center; right: 0px; top: 140px; font-size: 20px; line-height: 60px; color: white; } .balls{ width:100px; height: 25px; background:rgba(200,200,200,0.6); position:absolute; bottom:10px; left:345px; border-radius: 5px; } .ball{ width:15px; height: 15px; border-radius: 15px; background: white; float:left; margin: 5px; } .ball_select{ background: gold; } </style> <script type="text/javascript"> $(function() { var index = 0; #定义下一页图片函数 function next_img(){ $('.right').unbind( "click" ) var $visible = $('img:visible'); index = $('img').index($visible); $visible.stop().fadeOut(10); $('.ball').removeClass('ball_select'); index = (index+1)%$('img').length; $('img').eq(index).stop().fadeIn(10); $('.ball').eq(index).addClass('ball_select'); $('.right').bind('click',next_img); } #定义上一页图片函数 function last_img(){ $('.left').unbind("click"); var $visible = $('img:visible'); index = $('img').index($visible); $visible.stop().fadeOut(10); $('.ball').removeClass('ball_select'); index = (index-1+$('img').length)%$('img').length; $('img').eq(index).fadeIn(10); $('.ball').eq(index).addClass('ball_select'); $('.left').bind('click',next_img); } $('img').eq(0).stop().fadeIn(500); $('.ball').eq(0).addClass('ball_select'); #定时三秒自动换一页图片 var timer = setInterval(function(){ var $visible = $('img:visible'); index = $('img').index($visible); $visible.stop().fadeOut(500); $('.ball').removeClass('ball_select'); index = (index+1)%$('img').length; $('img').eq(index).fadeIn(500); $('.ball').eq(index).addClass('ball_select'); },3000) #下一页按钮绑定点击事件 $('.right').bind('click',next_img); #上一页按钮绑定点击事件 $('.left').bind("click",last_img); #鼠标在图片上时停止图片轮播 $('.banner').hover(function(){ clearInterval(timer); },function(){ timer = setInterval(function(){ var $visible = $('img:visible'); index = $('img').index($visible); $visible.stop().fadeOut(500); $('.ball').removeClass('ball_select'); index = (index+1)%$('img').length; $('img').eq(index).fadeIn(500); $('.ball').eq(index).addClass('ball_select'); },3000) }) #通过划过圆点切换展示的图片 $('.ball').mouseover(function(){ index = $(this).index(); console.log(index); $('img:visible').stop().fadeOut(500); $('.ball_select').removeClass('ball_select') $('img').eq(index).stop().fadeIn(500); $('.ball').eq(index).addClass('ball_select'); }) }) </script> </head> <body> <div class="con"> <div class="banner"> <img src="img/banner/1.jpg" /> <img src="img/banner/2.jpg" /> <img src="img/banner/3.jpg" /> <img src="img/banner/4.jpg" /> <div class="left"><</div> <div class="right">></div> <div class="balls"> <div class="ball"></div> #圆点数量要与图片数量一致 <div class="ball"></div> <div class="ball"></div> <div class="ball"></div> </div> </div> </div> </body></html>左右切换式：
<!DOCTYPE ><html> <head> <meta charset="utf8" /> <title>图片轮播</title> <script type="text/javascript" src="js/jquery.js"></script> <style> * { margin: 0; padding: 0; } ul { list-style: none; } .banner { width: 790px; height: 340px; border: 2px solid #ccc; margin: 100px auto; position: relative; overflow: hidden; /*z-index: 1;*/ } .img { position: absolute; top: 0; left: 0; } .des { position: absolute; bottom: 0; left: 0; z-index: -2; background: #ccc } .des li { float: left; width: 600px; } .img li { float: left; } .num { position: absolute; bottom: 10px; width: 100%; text-align: center; font-size: 0; } .num li { width: 10px; height: 10px; background: rgba(0, 0, 0, 0.5); display: block; border-radius: 100%; display: inline-block; margin: 0 5px; cursor: pointer; } .btn { display: block; } .btn span { display: block; width: 50px; height: 100px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 40px; line-height: 100px; text-align: center; cursor: pointer; } .btn .prev { position: absolute; left: 0; top: 50%; margin-top: -50px; } .btn .next { position: absolute; right: 0; top: 50%; margin-top: -50px; } .num .active { background-color: #fff; } .hide { display: none; } </style> <script> $(function(){ var i=0; var timer=null; for (var j = 0; j < $('.img li').length; j++) { //创建圆点 $('.num').append('<li></li>') } $('.num li').first().addClass('active'); //给第一个圆点添加样式 var firstimg=$('.img li').first().clone(); //复制第一张图片 $('.img').append(firstimg).width($('.img li').length*($('.img img').width())); //第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度 $('.des').width($('.img li').length*($('.img img').width())); // 下一个按钮 $('.next').click(function(){ i++; if (i==$('.img li').length) { i=1; //这里不是i=0 $('.img').css({left:0}); //保证无缝轮播，设置left值 }; $('.img').stop().animate({left:-(i*790)},300); if (i==$('.img li').length-1) { //设置小圆点指示 $('.num li').eq(0).addClass('active').siblings().removeClass('active'); $('.des li').eq(0).removeClass('hide').siblings().addClass('hide'); }else{ $('.num li').eq(i).addClass('active').siblings().removeClass('active'); $('.des li').eq(i).removeClass('hide').siblings().addClass('hide'); } }) // 上一个按钮 $('.prev').click(function(){ i--; if (i==-1) { i=$('.img li').length-2; $('.img').css({left:-($('.img li').length-1)*790}); } $('.img').stop().animate({left:-i*790},300); $('.num li').eq(i).addClass('active').siblings().removeClass('active'); $('.des li').eq(i).removeClass('hide').siblings().addClass('hide'); }) //鼠标划入圆点 $('.num li').mouseover(function(){ var _index=$(this).index(); $('.img').stop().animate({left:-_index*790},150); $('.num li').eq(_index).addClass('active').siblings().removeClass('active'); $('.des li').eq(_index).removeClass('hide').siblings().addClass('hide'); }) //定时器自动播放 timer=setInterval(function(){ i++; if (i==$('.img li').length) { i=1; $('.img').css({left:0}); }; $('.img').stop().animate({left:-i*790},300); if (i==$('.img li').length-1) { $('.num li').eq(0).addClass('active').siblings().removeClass('active'); $('.des li').eq(0).removeClass('hide').siblings().addClass('hide'); }else{ $('.num li').eq(i).addClass('active').siblings().removeClass('active'); $('.des li').eq(i).removeClass('hide').siblings().addClass('hide'); } },3000) //鼠标移入，暂停自动播放，移出，开始自动播放 $('.banner').hover(function(){ clearInterval(timer); },function(){ timer=setInterval(function(){ i++; if (i==$('.img li').length) { i=1; $('.img').css({left:0}); }; $('.img').stop().animate({left:-i*790},300); if (i==$('.img li').length-1) { $('.num li').eq(0).addClass('active').siblings().removeClass('active'); $('.des li').eq(0).removeClass('hide').siblings().addClass('hide'); }else{ $('.num li').eq(i).addClass('active').siblings().removeClass('active'); $('.des li').eq(i).removeClass('hide').siblings().addClass('hide'); } },3000) }) }) </script> </head> <body> <div class="banner"> <ul class="img"> <li><img src="img/banner/1.jpg" alt="第1张图片"></li> <li><img src="img/banner/2.jpg" alt="第2张图片"></li> <li><img src="img/banner/3.jpg" alt="第3张图片"></li> <li><img src="img/banner/4.jpg" alt="第4张图片"></li> <li><img src="img/banner/5.jpg" alt="第5张图片"></li> </ul> <ul class="num"></ul> <ul class="des"> <li>第一个</li> <li>第二个</li> <li>第三个</li> <li>第四个</li> <li>第五个</li> <li>第一个</li> </ul> <div class="btn"> <span class="prev"><</span> <span class="next">></span> </div> </div> </body></html>阅读全文
1 0
- jQuery做图片轮播
- 用Jquery做图片轮播
- 用jquery.imageScroller.js插件做图片展示轮播
- 使用jQuery做简单的图片轮播效果
- jquery 图片轮播
- jquery图片轮播
- jQuery图片轮播
- jQuery 图片轮播
- jquery图片轮播
- jquery(图片轮播)
- jquery图片轮播
- jquery图片轮播
- jQuery图片轮播
- jquery图片轮播
- jquery图片轮播
- jQuery--图片轮播
- jquery图片轮播
- jQuery 实现图片轮播
- Bootstrap 按钮状态
- 使用lua脚本做高并发限流
- GreenDAO使用
- 随记
- HDU1056
- jQuery做图片轮播
- CCF机试准备20170916
- eclipse不显示代码提示的解决方案
- HTTP缓存相关头
- 面试的知识总结和技巧
- GGH97
- Session机制、持久化、session="false"属性不创建session、显示创建session及其销毁
- Spring web.xml
- HDU1058
