//本人作为学生第一次写博客,里面涉及到很多问题,希望各位大神多多指点 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="jquery-1.11.3.js"></script> <style> * { margin: 0; padding: 0 } ul { list-style: none } img { vertical-align: top; width: 550px; height: 200px; } .box { width: 550px; height: 200px; margin: 100px auto; padding: 5px; border: 1px solid #ccc; } .inner { width: 550px; height: 200px; background-color: pink; overflow: hidden; position: relative; } .inner ul { width: 1000%; position: absolute; top: 0; left: 0; } .inner li { float: left; } .square { position: absolute; right: 10px; bottom: 10px; } .square span { display: inline-block; width: 20px; height: 20px; background-color: #fff; text-align: center; line-height: 20px; cursor: pointer; } .square span.current { background-color: orangered; color: #fff; } </style> </head> <body> <div class="box" id="box"> <div class="inner"> <ul id="ulhd"> <li><a href="#"><img src="banner_01.jpg" /></a></li> <li><a href="#"><img src="banner_02.jpg" /></a></li> <li><a href="#"><img src="banner_03.jpg" /></a></li> <li><a href="#"><img src="banner_04.jpg" /></a></li> <li><a href="#"><img src="banner_05.jpg" /></a></li> </ul> <div class="square"> <span class="current">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> </div> </div> <script> var timer=null; function ulhudong(){ //首先获取Ul的left的值; var lleft=parseInt($("#ulhd").css("left")); //每次向左滑动一张图片的宽(-550px); $("#ulhd").animate({"left":(lleft-550)}); //找到带有class为current属性的后一个span元素,并添加class为current的属性 $(".current+span").attr("class","current"); //将其原本有class为current属性的元素的class移除 $(".current:first").removeAttr("class","current"); //如果left值一直小于-1650, if(lleft>=-1650){ //用定时器每个3s执行一次ulhudong(), timer=setTimeout(ulhudong,3000); } else{ //当最后一张图加载完毕后,重新加载页面 location.reload(); //ulhudong(); } } timer=setTimeout(ulhudong,3000); //找到所有span元素,添加鼠标移动事件 $(".square>span").mouseover(function(event){ //清空计时器 clearTimeout(timer); timer=null; //获取源对象 var e=window.event||arguments[0]; var src= e.srcElement||e.target; //判断是否是SPAN元素 if(src.nodeName=="SPAN"){ //如果是将鼠标放上的元素添加样式,并通过文本内容判断为是哪个span元素,将图片位置与span元素对应 $(".current").removeAttr("class","current"); $(src).attr("class","current"); if($(src).text()=="1"){ $(ulhd).css("left",0); } else if($(src).text()=="2"){ $(ulhd).css("left",-550); } else if($(src).text()=="3"){ $(ulhd).css("left",-1100); } else if($(src).text()=="4"){ $(ulhd).css("left",-1650); } else{ $(ulhd).css("left",-2150); } } }); //当鼠标离开时,再次调用ulhudong(); $(".square>span").mouseout(function(event){ var e=window.event||arguments[0]; var src= e.srcElement||e.target; if(src.nodeName=="SPAN"){ ulhudong(); } }); </script> </body> </html>
图片滚动切换效果
猜你喜欢
转载自blog.csdn.net/weixin_42026831/article/details/80026918
今日推荐
周排行