Jquery实现图片左右自动滚动示例

复制代码代码如下:

　　<!DOCTYPE HTML>

　　<html>

　　<head>

　　<title>基于jQuery的控制左右滚动效果_自动滚动版本</title>

　　<style>

　　body{font-size:0.8em;letter-spacing:1px;font-family:"微软雅黑"; line-height:1.8em}

　　div,ul,li,ol,img{margin:0;padding:0}

　　h1{font-size:1em; font-weight:normal;}

　　h1 a{background:#CFF; padding:2px 3px; text-decoration:none;}

　　h1 a:hover{background:#eee; text-decoration:underline}

　　h2,h3{font-size:1em; font-weight:normal; color:#a40000; margin:1em auto; position:relative}

　　h3{color:#888; font-weight:bold}

　　ul,li,ol{list-style:none}

　　.ibox{width:850px; height:210px; background:#ddd; margin:1em auto; border:1em solid #ddd; position:relative; overflow:hidden}

　　.ibox .showbox{position:absolute;left:0;width:2550px; height:170px; background:#fff}

　　.ibox .showbox ul li{float:left;margin:7px}

　　.ibox .showbox ul li img{width:150px; height:150px; border:3px solid #a40000}

　　.ibox span{position:absolute;padding:2px 5px; background:#fff; cursor:pointer;}

　　.ibox span.pre{left:10px; bottom:0}

　　.ibox span.next{right:10px; bottom:0}

　　.ibox span.num{right:45%; bottom:0; background:#ddd;line-height:18px;}

　　.ibox span.num li{display:inline;margin:0 5px; padding:1px 5px; line-height:18px}

　　.ibox span.num .numcur{background:#a40000; color:#fff}

　　</style>

　　$(function(){

　　//@Mr.Think***变量

　　var $cur = 1;//初始化显示的版面

　　var $i = 5;//每版显示数

　　var $len = $('.showbox>ul>li').length;//计算列表总长度(个数)

　　var $pages = Math.ceil($len / $i);//计算展示版面数量

　　var $w = $('.ibox').width();//取得展示区外围宽度

　　var $showbox = $('.showbox');

　　var $num = $('span.num li')

　　var $pre = $('span.pre')

　　var $next = $('span.next');

　　var $autoFun;

　　//@Mr.Think***调用自动滚动

　　autoSlide();

　　//@Mr.Think***向前滚动

　　$pre.click(function(){

　　if (!$showbox.is(':animated')) { //判断展示区是否动画

　　if ($cur == 1) { //在第一个版面时,再向前滚动到最后一个版面

　　$showbox.animate({

　　left: '-=' + $w * ($pages - 1)

　　}, 500); //改变left值,切换显示版面,500(ms)为滚动时间,下同

　　$cur = $pages; //初始化版面为最后一个版面

　　}

　　else {

　　$showbox.animate({

　　left: '+=' + $w

　　}, 500); //改变left值,切换显示版面

　　$cur--; //版面累减

　　}

　　$num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //为对应的版面数字加上高亮样式,并移除同级元素的高亮样式

　　}

　　});

　　//@Mr.Think***向后滚动

　　$next.click(function(){

　　if (!$showbox.is(':animated')) { //判断展示区是否动画

　　if ($cur == $pages) { //在最后一个版面时,再向后滚动到第一个版面

　　$showbox.animate({

　　left: 0

　　}, 500); //改变left值,切换显示版面,500(ms)为滚动时间,下同

　　$cur = 1; //初始化版面为第一个版面

　　}

　　else {

　　$showbox.animate({

　　left: '-=' + $w

　　}, 500);//改变left值,切换显示版面

　　$cur++; //版面数累加

　　}

　　$num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //为对应的版面数字加上高亮样式,并移除同级元素的高亮样式

　　}

　　});

　　//@Mr.Think***数字点击事件

　　$num.click(function(){

　　if (!$showbox.is(':animated')) { //判断展示区是否动画

　　var $index = $num.index(this); //索引出当前点击在列表中的位置值

　　$showbox.animate({

　　left: '-' + ($w * $index)

　　}, 500); //改变left值,切换显示版面,500(ms)为滚动时间

　　$cur = $index + 1; //初始化版面值,这一句可避免当滚动到第三版时,点击向后按钮,出面空白版.index()取值是从0开始的,故加1

　　$(this).addClass('numcur').siblings().removeClass('numcur'); //为当前点击加上高亮样式,并移除同级元素的高亮样式

　　}

　　});

　　//@Mr.Think***停止滚动

　　clearFun($showbox);

　　clearFun($pre);

　　clearFun($next);

　　clearFun($num);

　　//@Mr.Think***事件划入时停止自动滚动

　　function clearFun(elem){

　　elem.hover(function(){

　　clearAuto();

　　}, function(){

　　autoSlide();

　　});

　　}

　　//@Mr.Think***自动滚动

　　function autoSlide(){

　　$next.trigger('click');

　　$autoFun = setTimeout(autoSlide, 4000);//此处不可使用setInterval,setInterval是重复执行传入函数,这会引起第二次划入时停止失效

　　}

　　//@Mr.Think***清除自动滚动

　　function clearAuto(){

　　clearTimeout($autoFun);

　　}

　　});

　　</script>

　　</head>

　　<body>

　　<ul>

　　</ul>

　　</div>

　　</div>

　　</body>

　　</html>

教程首页更多教程