无缝式轮播图

来源：互联网发布：手机淘宝关注链接地址编辑：程序博客网时间：2024/04/27 15:09

1、html部分

<!doctype html><html><head><meta charset="utf-8"><title>无缝滚动轮播图</title><link rel="stylesheet" href="css/style.css"><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="js/scrollpic.js"></script></head><body><div class="con">    <div class="con_in">        <ul class="c_pic">        <li><a href="javascript:;"><img src="img/01.jpg" width="400" height="307"></a></li>        <li><a href="javascript:;"><img src="img/02.jpg" width="400" height="307"></a></li>        <li><a href="javascript:;"><img src="img/03.jpg" width="400" height="307"></a></li>        <li><a href="javascript:;"><img src="img/04.jpg" width="400" height="307"></a></li>        </ul>            <ol class="c_order">            <li class="current"></li>            <li></li>            <li></li>            <li></li>            </ol>        </div>        <button class="btn_l"></button>        <button class="btn_r"></button>    </div></body></html>

2、css部分

@charset "utf-8";/* CSS Document */*{ margin:0; padding:0; list-style:none; border:none;}.con{ width:400px; height:307px; margin:100px auto; border:5px solid #ccc; position:relative;}.con_in{ width:400px; height:307px; overflow:hidden; position:relative;}.c_pic{ width:2000px; height:307px; position:absolute;}.c_pic li{ float:left;}.c_order{ width:96px; height:13px; position:absolute; left:40%; bottom:10px;}.c_order li{ width:13px; height:13px; background:url(../img/00.png) 0 -1px no-repeat; float:left; margin:0 3px;}.c_order li.current{ background-position:0 -27px; cursor:pointer;}.btn_l,.btn_r{ width:50px; height:50px; background:url(../img/arr.png) no-repeat -1px 0; position:absolute; cursor:pointer;}.btn_l{ left:-20px; top:129px;}.btn_r{ background-position:-53px 0; right:-20px; top:129px;}

3、js部分

// JavaScript Document$(function(){var timer = null;var numOl = 0;var numUl = 0;$('.c_pic').append($('.c_pic li').eq(0).clone(true));var myFn = function(){numOl++;if(numOl >3){numOl = 0;//ol li 个数小于 ul li的个数。所以有两个极值判断，且ul li到第五个后，大于第五个的赋值到第二个图片以实现无缝的概念。}numUl++;if(numUl > 4){<strong>numUl = 1;$('.c_pic').css('left','0');</strong>//实现无缝滚动，沿着同一个方向，不折回。}var move = -400 * numUl;$('.c_order li').eq(numOl).addClass('current').siblings().removeClass('current'); $('.c_pic').stop().animate({'left':move+'px'},1000);}timer = setInterval(myFn,1500);$('.con').hover(function(){clearInterval(timer);},function(){timer = setInterval(myFn,1500);})$('.c_order li').click(function(){$(this).addClass('current').siblings().removeClass('current');<strong>numOl = $(this).index();</strong>//保证ol和ul的li点击和离开都一一对应<strong>numUl = $(this).index();</strong>var move = -400 *numUl;$('.c_pic').stop().animate({'left':move+'px'},1000);})$('.btn_r').click(function(){myFn();})$('.btn_l').click(function(){numOl--;if(numOl<0){numOl = 3;}$('.c_order li').eq(numOl).addClass('current').siblings().removeClass('current');numUl--;if(numUl<0){<strong>numUl = 3;$('.c_pic').css('left','-1600px');</strong>//设置到极值后的滚动位置，实现无缝}var move = -400 * numUl;$('.c_pic').stop().animate({'left':move+'px'},1000);})})

1 0