做海外市场什么网站推广,网站认证要钱,30天网站建设 视频教程,中山智能设备网站建设实现图片轮播效果#xff0c;打开页面#xff0c;每隔3秒切换至下一张图片#xff1b;光标移入数字时#xff0c;播放相应图片。
思路#xff1a;
#xff08;1#xff09;获取需要轮播的图片和展示的div。
#xff08;2#xff09;使用animate设置left值#xff…实现图片轮播效果打开页面每隔3秒切换至下一张图片光标移入数字时播放相应图片。
思路
1获取需要轮播的图片和展示的div。
2使用animate设置left值每次移动宽度为展示div的宽度。
3播放图片时对应数字应用红色背景样式其他数字移除该样式。
效果 代码
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/titlestyle* {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/headbodydiv classbannerdiv classslidediv classpicimg src./4.png/divdiv classpicimg src./1.png/divdiv classpicimg src./2.png/divdiv classpicimg src./3.png/divdiv classpicimg src./4.png/divdiv classpicimg src./1.png/div/divdiv classnumbersspan classnumber on1/spanspan classnumber2/spanspan classnumber3/spanspan classnumber4/span/div/divscript srcjquery-1.12.4.js typetext/javascript charsetutf-8/scriptscript typetext/javascriptvar 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
