实现图片轮播效果,打开页面,每隔3秒切换至下一张图片;光标移入数字时,播放相应图片。
思路:
(1)获取需要轮播的图片和展示的div。
(2)使用animate设置left值,每次移动宽度为展示div的宽度。
(3)播放图片时,对应数字应用红色背景样式,其他数字移除该样式。
效果:
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } img { width: 800px; height: 400px; } .banner { width: 800px; height: 400px; border: 1px solid black; margin: 50px auto; overflow: hidden; cursor: pointer; position: relative; } .banner .slide { width: 4800px; height: 400px; position: absolute; left: -600px; } .banner .slide .pic { width: 800px; height: 400px; line-height: 400px; text-align: center; float: left; font-size: 72px; color: white; } .banner .numbers { width: 150px; height: 30px; position: absolute; bottom: 1%; left: 85%; margin-left: -50px; z-index: 2; } .banner .numbers .number { width: 20px; height: 20px; float: left; margin: 5px 6px; cursor: pointer; background-color: white; color: black; text-align: center; border: 1px solid red; } .banner .numbers .on { background-color: red; color: #fff; font-weight: bolder; } </style> </head> <body> <div class="banner"> <div class="slide"> <div class="pic"><img src="./4.png"></div> <div class="pic"><img src="./1.png"></div> <div class="pic"><img src="./2.png"></div> <div class="pic"><img src="./3.png"></div> <div class="pic"><img src="./4.png"></div> <div class="pic"><img src="./1.png"></div> </div> <div class="numbers"> <span class="number on">1</span> <span class="number">2</span> <span class="number">3</span> <span class="number">4</span> </div> </div> <script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var index = 1; var timer = null; var size = $('.slide').children().size(); var picWidth = $('.pic').width(); $('.banner').mouseover(function() { clearInterval(timer); }); $('.banner').mouseleave(function() { autoSlide(); }); $('.slide').mouseleave(); function autoSlide() { timer = setInterval(function() { index++; changeImg(); changeNums(); }, 3000); }; function changeImg() { var slideWidth = -1 * picWidth * index; $('.slide').animate({ 'left': slideWidth + 'px' }, 500); if (index >= size - 1) { $('.slide').animate({ 'left': -picWidth + 'px' }, 0); index = 1; } if (index < 1) { $('.slide').animate({ 'left': -(size - 2) * picWidth + 'px' }, 0); index = size - 2; } } function changeNums() { $('.number').eq(index - 1).addClass('on').siblings().removeClass('on'); } $('.number').mouseover(function(event) { var target = event.target; index = $(target).index() + 1; changeImg(); changeNums(); }); </script> </body> </html>
复制