首页 > 代码库 > 图片轮滚形式A
图片轮滚形式A
思想解读：
一共有5幅图片，初始时只显示一幅，其余四幅隐藏。然后使用trigger设置右下角的点击事件，根据点击的索引显示某幅图片。原理不算复杂。
结论：
- trigger的使用，模拟点击
- 层淡入淡出函数：fadeIn( )
- 定时器的使用 setInterval( )函数;
JS代码：
$(function () { var curr = 0; $("#jsNav .trigger").each(function (i) { $(this).click(function () { curr = i; $("#js img").eq(i).fadeIn("slow").siblings("img").hide(); $(this).siblings(".trigger").removeClass("imgSelected").end().addClass("imgSelected"); return false; }); }); //自动翻 var timer = setInterval(function () { todo = (curr + 1) % 5; $("#jsNav .trigger").eq(todo).click(); }, 4000); //var pg = function (flag) { // //flag:true表示前翻， false表示后翻 // if (flag) { // if (curr == 0) { // todo = 2; // } else { // todo = (curr - 1) % 5; // } // } else { // todo = (curr + 1) % 5; // } // $("#jsNav .trigger").eq(todo).click(); //}; ////前翻 //$("#prev").click(function () { // pg(true); // return false; //}); ////后翻 //$("#next").click(function () { // pg(false); // return false; //}); ////鼠标悬停在触发器上时停止自动翻 //$("#jsNav a").hover( // function () { // clearInterval(timer); // }, //function () { // timer = setInterval(function () { // todo = (curr + 1) % 5; // $("#jsNav .trigger").eq(todo).click(); // }, // 4000); //});});
HTML代码：
<div style="float: left; width: 578px;"> <!--flash--> <link href="flash/css.css" rel="stylesheet" type="text/css" /> <div id="js" class="js" style="border: 5px #F5F5F5 solid;"> <img style="display:inline" alt="1" src="./images/1.jpg" onclick="location.href=http://www.mamicode.com/‘http://www.heisiwa.com/jiepaimeinv/201701/2968.html‘;" /> <img style="display: none;" alt="2" src="./images/2.jpg" onclick="location.href=http://www.mamicode.com/‘http://www.heisiwa.com/jiepaimeinv/201701/2984.html‘;" /> <img style="display: none;" alt="3" src="./images/3.jpg" onclick="location.href=http://www.mamicode.com/‘http://www.heisiwa.com/rekumeinv/201701/2989.html‘;" /> <img style="display: none;" alt="4" src="./images/4.jpg" onclick="location.href=http://www.mamicode.com/‘http://www.heisiwa.com/baotunduanqun/201701/2994.html‘;" /> <img style="display: none;" alt="5" src="./images/5.jpg" onclick="location.href=http://www.mamicode.com/‘http://www.heisiwa.com/jiepaimeinv/201701/3012.html‘;" /> <div id="jsNav" class="jsNav"> <a id="prev" class="prevBtn" href="javascript:void(0)"></a> <a class="trigger imgSelected" href="javascript:void(0)">1</a> <a class="trigger" href="javascript:void(0)">2</a> <a class="trigger" href="javascript:void(0)">3</a> <a class="trigger" href="javascript:void(0)">4</a> <a class="trigger" href="javascript:void(0)">5</a> <a id="next" class="nextBtn" href="javascript:void(0)"></a> </div> </div> <!--/flash--> </div>
图片轮滚形式A
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。