首页 > 代码库 > 图片滚动 初学JQuery
图片滚动 初学JQuery
图片滑动效果一般用于首页的展示，这个按照别人的思路，自己扩充修改了下，纯属自己笔记。
JS代码
1 <script src="http://www.mamicode.com/jquery/jquery-2.1.1.js"></script> 2 <script> 3 var imgTotal = 8; //总的图片数量 4 var imgi = 1; //默认第一张图片 5 var autoRun; //自动滚动 6 function run(imgI) { //传递图片编号 7 imgi = imgI; //赋值给全局变量 imgi 8 switch (imgi) { // 通过编号判断为哪幅图片 9 case 1: //设定每个图片的标签10 $("#text1 p").html("<a href=http://www.mamicode.com/‘images/pic1.jpg‘ target=‘_blank‘>菊花〔拉丁学名：Dendranthema morifolium（Ramat. ）Tzvel.〕，常用chrysanthemum。菊花是菊科，菊属多年生草本... "); break;11 case 2:12 $("#text1 p").html("<a href=http://www.mamicode.com/‘images/pic2.jpg‘ target=‘_blank‘>沙漠"); break;13 default: $("#text1 p").text("this is text"); break;14 }15 16 $("#divlinks").find("a").removeClass("aaa"); //取消A标签中的aaa类17 $("#divlinks").find("a[title=‘" + imgi + "‘]").addClass("aaa"); //根据a标签的title 属性查找当前图片，设置aaa类18 19 if ($("#divimg").is(":animated")) { $("#divimg").stop(); } //在执行现在动作之前，先停止之前的动作20 $("#divimg").animate({ left: -(imgi - 1) * 1000 + "px" }, "1000"); //设置动画，向左移动1000+的宽度，一张图片宽度为1000PX,1秒钟移动完成21 22 }23 function autorun() { 24 run(imgi);25 if (imgi == imgTotal) { //最后一张图片 则将图片编号重置为126 imgi = 127 } else {28 imgi++; //图片编号累加29 }30 31 }32 function picrun() { //循环执行33 run(1); //保持第一次运行是执行第一张图片34 autoRun = setInterval(autorun, "3000"); //无限循环 ，3秒间隔35 }36 $(document).ready(function () {37 picrun(); //文档 加载完执行38 $(".main").hover(function(){ //鼠标在指定图片时， 停止滚动39 clearInterval(autoRun);40 }, function () {41 autoRun = setInterval(autorun, "3000"); // 离开图片，继续上一次滚动42 })43 })44 45 46 47 </script>
CSS代码
1 <style type="text/css"> 2 body { 3 text-align: center; 4 } 5 6 .main { 7 margin: auto; 8 width: 1000px; 9 height: 400px;10 position: relative;11 border: 1px solid #000;12 overflow:hidden; //隐藏超出范围的图片13 }14 15 .pic {16 width: 10000px; //设置极大宽度，不然自自图片无法正确FLOAT:LEFT17 height: 400px;18 background-color: #000000;19 position: absolute;20 top: 0px;21 }22 23 .aaa {24 background-color:#392940;25 }26 27 .img {28 float: left;29 width: 1000px;30 height: 400px;31 }32 33 .text {34 margin-left:20px;35 color: #fff;36 width: 500px;37 height: 50px;38 position: absolute;39 left: 0px;40 bottom: 0px;41 text-align:left;42 }43 .text p a{44 color:#fff;45 }46 .menu {47 width: 1000px;48 height: 50px;49 position: absolute;50 left: 0px;51 bottom: 0px;52 background-color: #000000;53 opacity: 0.5;54 55 }56 57 .divlink {58 position: absolute;59 right: 0px;60 bottom: 0px;61 width: 430px;62 height: 50px;63 }64 65 .divlink a {66 font-weight: bold;67 text-decoration: none;68 text-align: center;69 line-height: 30px;70 display: block;71 border: 1px solid #fff;72 width: 30px;73 height: 30px;74 float: left;75 margin: 10px;76 color: #fff;77 }78 79 .divlink a:hover {80 background-color: #392940;81 opacity: 0.5;82 }83 </style>
HTML代码
1 <body> 2 <div class="main"> 3 <div class="pic" id="divimg"> 4 <a href="images/pic1.jpg" target="_blank"> 5 <img src="images/pic1.jpg" alt="" class="img" /></a> 6 <a href="images/pic2.jpg" target="_blank"> 7 <img src="images/pic2.jpg" alt="" class="img" /></a> 8 <a href="images/pic3.jpg" target="_blank"> 9 <img src="images/pic3.jpg" alt="" class="img" /></a>10 <a href="images/pic4.jpg" target="_blank">11 <img src="images/pic4.jpg" alt="" class="img" /></a>12 <a href="images/pic5.jpg" target="_blank">13 <img src="images/pic5.jpg" alt="" class="img" /></a>14 <a href="images/pic6.jpg" target="_blank">15 <img src="images/pic6.jpg" alt="" class="img" /></a>16 <a href="images/pic7.jpg" target="_blank">17 <img src="images/pic7.jpg" alt="" class="img" /></a>18 <a href="images/pic8.jpg" target="_blank">19 <img src="images/pic8.jpg" alt="" class="img" /></a>20 </div>21 <div class="menu">22 <div class="text" id="text1">23 <p>this is text</p>24 </div>25 <div class="divlink" id="divlinks">26 <a href="#" title="1" onclick="return run(1)" >1</a>27 <a href="#" title="2" onclick="return run(2)">2</a>28 <a href="#" title="3" onclick="return run(3)">3</a>29 <a href="#" title="4" onclick="return run(4)">4</a>30 <a href="#" title="5" onclick="return run(5)">5</a>31 <a href="#" title="6" onclick="return run(6)">6</a>32 <a href="#" title="7" onclick="return run(7)">7</a>33 <a href="#" title="8" onclick="return run(8)">8</a>34 </div>35 </div>36 </div>37 </body>
这个图片滚动的核心还是利用setInterval()方法，支持无限循环滚动。每次循环图片编号+1，到最一张图片重置编号。
最终效果还有由移动图片的距离产生：图片设置float:left,父窗体设置宽度为10000px，使图片横铺，每次方法执行，向左移动1000px，刚好为图片宽度，产生滚动效果
点击图片编号，直接跳转图片
具体见源码
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。