<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 引入插件js和jquery --> <script src="https://www.jb51.net/jquery-2.0.3.js"></script> <script src="https://www.jb51.net/responsiveslides.js"></script> <style> #banner{ position: relative; width: 800px; } /* 插件的默认css属性 */ .rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; } .rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; } .rslides li:first-child { position: relative; display: block; float: left; } .rslides img { display: block; height: auto; float: left; width: 100%; border: 0; } /* ，被修改过的，修改成圆点按钮 */ ul.rslides_tabs.rslides1_tabs { position: absolute; bottom: 10px; left: 45%; list-style: none; z-index: 10; } ul.rslides_tabs.rslides1_tabs li{ float: left; } ul.rslides_tabs.rslides1_tabs li a{ display: block; border-radius: 50%; width: 10px; height: 10px; margin-right: 10px; background: #fff; } /* .rslides_here 这个相当于active */ ul.rslides_tabs.rslides1_tabs li.rslides_here a{ background: #004F88; } /* 左右按钮的class名 */ .rslides_nav.rslides1_nav{ position: absolute; top: 50%; color: #eee; font-size: 40px; text-decoration: none; z-index: 4; } .rslides_nav.rslides1_nav.pre{ left: 10px; } .rslides_nav.rslides1_nav.next{ right: 10px; } .rslides img{ height: 400px; } </style> <script> $(function() { $(".rslides").responsiveSlides({ pager: true, // 默认为false,需要展示时（true）展示索引点，默认为数字12345，去js库里修改就可以了 nav: true, // 展示上一张和下一张的导航 pause: false, // 鼠标移入移出是否停止 pauseControls: true, // Boolean: Pause when hovering controls, true or false prevText: "<", // 修改左右按钮的符号 nextText: ">", // String: Text for the "next" button "maxwidth":"800px" }); $(".rslides1_nav").css("display","none"); $("#banner").mouseover(function(){ $(".rslides1_nav").css("display","block"); }) $("#banner").mouseout(function(){ $(".rslides1_nav").css("display","none"); }) }); </script> </script> </head> <body> <!-- 使用一个div包住它，而那些js添加的标签会直接加载到ul标签后面 --> <div> <ul> <li><img src="https://www.jb51.net/111.jpg" alt=""></li> <li><img src="https://www.jb51.net/222.jpg" alt=""></li> <li><img src="https://www.jb51.net/333.jpg" alt=""></li> <li><img src="https://www.jb51.net/444.jpg" alt=""></li> <li><img src="https://www.jb51.net/555.jpg" alt=""></li> </ul> </div> </body> </html>
图片滑动：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片滑动</title> <style> .container{ position: relative; width: 630px; border: 2px solid #888; padding: 5px; } .c-wrap{ width: 630px; overflow: hidden; } .container img{ width: 200px; height: 90px; } .container ul{ list-style: none; margin: 0; padding: 0; } .container ul li{ float: left; margin-right: 10px; } .container .imgBigBox{ width: 33000px; margin-left: 0px; } .imgBigBox:after{ content: " "; display: block; clear: both; } .btnGroup{ border: 1px solid #888; width: 65px; } .btnGroup a{ text-align: center; line-height: 20px; text-decoration: none; color: #888; font-size: 20px; display: inline-block; width: 30px; } .btn1{ margin-right: 4px; border-right: 1px solid #888; } </style> <!-- 引用运动函数 --> <script type="text/javascript" src="https://www.jb51.net/doMove.js"></script> <script type="text/javascript"> window.onload=function(){ /*调用函数实现滑动*/ slide(".container"); } function slide(name){ var oContainer=document.querySelector(name); var oImgBigBox=oContainer.querySelector(".imgBigBox"); var aBtn=oContainer.querySelectorAll(".btnGroup a"); var oC_wrap=oContainer.querySelector(".c-wrap"); /*获取滑动宽度*/ var w=oC_wrap.offsetWidth; /*点击左边按钮*/ aBtn[0].onclick=function(){ doMove(oImgBigBox,"marginLeft",10,-w,function(){ var child=oImgBigBox.children[0].cloneNode(true); oImgBigBox.appendChild(child); oImgBigBox.removeChild(oImgBigBox.children[0]); oImgBigBox.style.marginLeft="0px"; }) } /*点击右边按钮*/ aBtn[1].onclick=function(){ oImgBigBox.insertBefore(oImgBigBox.children[1],oImgBigBox.children[0]); oImgBigBox.style.marginLeft=-w+"px"; doMove(oImgBigBox,"marginLeft",10,0) } } </script> </head> <body> <div> <div> <div> <ul> <li><img src="https://www.jb51.net/article/1.jpg" alt=""></li> <li><img src="https://www.jb51.net/article/2.jpg" alt=""></li> <li><img src="https://www.jb51.net/article/3.jpg" alt=""></li> </ul> <ul> <li><img src="https://www.jb51.net/article/4.jpg" alt=""></li> <li><img src="https://www.jb51.net/article/5.jpg" alt=""></li> <li><img src="https://www.jb51.net/article/6.jpg" alt=""></li> </ul> </div> </div> <div> <a href="javascript:;"><</a><a href="javascript:;">></a> </div> </div> </body> </html>