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


Posted in Javascript onSeptember 25, 2013
<!DOCTYPE HTML> 
<html> 
<head> 
<title>基于jQuery的控制左右滚动效果_自动滚动版本</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<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> 
<script> 
$(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> 
<div class="ibox"> 
<div class="showbox"> 
<ul> 
<li><img src="//img.jbzj.com/demoimg/201007/f8a9dd53720bf31b5917915e8222c27370a3681c_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/15a1d7982c49b0e638ae3340cf86dc4469f955cc_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/68e9a7a8476e26a1022fa5e39ccdda669a5d4f08_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/56d1b9aaff5b424f1cdb08b80544d5150839b4de_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/56d1b9aaff5b424f1cdb08b80544d5150839b4de_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/20417dfc945bae6c720a660625e9652a154c2c94_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/f4a9f29299f3dba6e7af0ac3c5aff93e01f874d3_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/ca6f0c9ac0c6e3bfce827cd92833e1db620b6377_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/809fcfbb8a1f58d1d47a760fd4283556cce201ef_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/15a1d7982c49b0e638ae3340cf86dc4469f955cc_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/56d1b9aaff5b424f1cdb08b80544d5150839b4de_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/15a1d7982c49b0e638ae3340cf86dc4469f955cc_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/49d6ae8901500f473a2e3e58e5b5ddc0e788bc9d_m.jpg" alt="demo" title="demo" /></li> 
</ul> 
</div> 
<span class="pre">«向左滚动</span> 
<span class="next">向右滚动»</span> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
这些年、我收集的JQuery代码小结
Aug 01 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
React服务端渲染原理解析与实践
Mar 04 Javascript
jquery实现加载等待效果示例
Sep 25 #Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 #Javascript
jquery实现table鼠标经过变色代码
Sep 25 #Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 #Javascript
仿百度的关键词匹配搜索示例
Sep 25 #Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 #Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 #Javascript
You might like
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
浅谈php冒泡排序
2014/12/30 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
常用的javascript设计模式
2017/01/11 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
定制FileField中的上传文件名称实例
2017/08/23 Python
Python中的TCP socket写法示例
2018/05/11 Python
python 实现两个线程交替执行
2020/05/02 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
办公文员的工作岗位职责
2013/11/12 职场文书
小车司机岗位职责
2013/11/25 职场文书
中国梦的演讲稿
2014/01/08 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
大学同学会活动方案
2014/08/20 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
队列队形口号
2015/12/25 职场文书