Jquery实现图片左右自动滚动示例
程序员文章站
2023-11-12 18:39:34
代码如下:
基于jquery的控制左右滚动效果_自动滚动版本</ti...</div>
<div class="content">
<p>代码如下:</p>
<p class="codebody" id="code75599"><br>
<!doctype html><br>
<html><br>
<head><br>
<title>基于jquery的控制左右滚动效果_自动滚动版本</title><br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><br>
<style><br><br>
body{font-size:0.8em;letter-spacing:1px;font-family:"微软雅黑"; line-height:1.8em}<br>
p,ul,li,ol,img{margin:0;padding:0}<br>
h1{font-size:1em; font-weight:normal;}<br>
h1 a{background:#cff; padding:2px 3px; text-decoration:none;}<br>
h1 a:hover{background:#eee; text-decoration:underline}<br>
h2,h3{font-size:1em; font-weight:normal; color:#a40000; margin:1em auto; position:relative}<br>
h3{color:#888; font-weight:bold}<br>
ul,li,ol{list-style:none}<br><br>
.ibox{width:850px; height:210px; background:#ddd; margin:1em auto; border:1em solid #ddd; position:relative; overflow:hidden}<br>
.ibox .showbox{position:absolute;left:0;width:2550px; height:170px; background:#fff}<br>
.ibox .showbox ul li{float:left;margin:7px}<br>
.ibox .showbox ul li img{width:150px; height:150px; border:3px solid #a40000}<br>
.ibox span{position:absolute;padding:2px 5px; background:#fff; cursor:pointer;}<br>
.ibox span.pre{left:10px; bottom:0}<br>
.ibox span.next{right:10px; bottom:0}<br>
.ibox span.num{right:45%; bottom:0; background:#ddd;line-height:18px;}<br>
.ibox span.num li{display:inline;margin:0 5px; padding:1px 5px; line-height:18px}<br>
.ibox span.num .numcur{background:#a40000; color:#fff}<br>
</style><br>
<script><br>
$(function(){<br>
//@mr.think***变量<br>
var $cur = 1;//初始化显示的版面<br>
var $i = 5;//每版显示数<br>
var $len = $('.showbox>ul>li').length;//计算列表总长度(个数)<br>
var $pages = math.ceil($len / $i);//计算展示版面数量<br>
var $w = $('.ibox').width();//取得展示区外围宽度<br>
var $showbox = $('.showbox');<br>
var $num = $('span.num li')<br>
var $pre = $('span.pre')<br>
var $next = $('span.next');<br>
var $autofun;<br>
//@mr.think***调用自动滚动<br>
autoslide();<br>
//@mr.think***向前滚动<br>
$pre.click(function(){<br>
if (!$showbox.is(':animated')) { //判断展示区是否动画<br>
if ($cur == 1) { //在第一个版面时,再向前滚动到最后一个版面<br>
$showbox.animate({<br>
left: '-=' + $w * ($pages - 1)<br>
}, 500); //改变left值,切换显示版面,500(ms)为滚动时间,下同<br>
$cur = $pages; //初始化版面为最后一个版面<br>
}<br>
else {<br>
$showbox.animate({<br>
left: '+=' + $w<br>
}, 500); //改变left值,切换显示版面<br>
$cur--; //版面累减<br>
}<br>
$num.eq($cur - 1).addclass('numcur').siblings().removeclass('numcur'); //为对应的版面数字加上高亮样式,并移除同级元素的高亮样式<br>
}<br>
});<br>
//@mr.think***向后滚动<br>
$next.click(function(){<br>
if (!$showbox.is(':animated')) { //判断展示区是否动画<br>
if ($cur == $pages) { //在最后一个版面时,再向后滚动到第一个版面<br>
$showbox.animate({<br>
left: 0<br>
}, 500); //改变left值,切换显示版面,500(ms)为滚动时间,下同<br>
$cur = 1; //初始化版面为第一个版面<br>
}<br>
else {<br>
$showbox.animate({<br>
left: '-=' + $w<br>
}, 500);//改变left值,切换显示版面<br>
$cur++; //版面数累加<br>
}<br>
$num.eq($cur - 1).addclass('numcur').siblings().removeclass('numcur'); //为对应的版面数字加上高亮样式,并移除同级元素的高亮样式<br>
}<br>
});<br>
//@mr.think***数字点击事件<br>
$num.click(function(){<br>
if (!$showbox.is(':animated')) { //判断展示区是否动画<br>
var $index = $num.index(this); //索引出当前点击在列表中的位置值<br>
$showbox.animate({<br>
left: '-' + ($w * $index)<br>
}, 500); //改变left值,切换显示版面,500(ms)为滚动时间<br>
$cur = $index + 1; //初始化版面值,这一句可避免当滚动到第三版时,点击向后按钮,出面空白版.index()取值是从0开始的,故加1<br>
$(this).addclass('numcur').siblings().removeclass('numcur'); //为当前点击加上高亮样式,并移除同级元素的高亮样式<br>
}<br>
});<br>
//@mr.think***停止滚动<br>
clearfun($showbox);<br>
clearfun($pre);<br>
clearfun($next);<br>
clearfun($num);<br>
//@mr.think***事件划入时停止自动滚动<br>
function clearfun(elem){<br>
elem.hover(function(){<br>
clearauto();<br>
}, function(){<br>
autoslide();<br>
});<br>
}<br>
//@mr.think***自动滚动<br>
function autoslide(){<br>
$next.trigger('click');<br>
$autofun = settimeout(autoslide, 4000);//此处不可使用setinterval,setinterval是重复执行传入函数,这会引起第二次划入时停止失效<br>
}<br>
//@mr.think***清除自动滚动<br>
function clearauto(){<br>
cleartimeout($autofun);<br>
}<br>
});<br>
</script><br>
</head><br><br>
<body><br>
<p class="ibox"><br>
<p class="showbox"><br>
<ul><br>
<li><img src=https://www.2cto.com/uploadfile/2018/0329/20180329113346342.jpg" alt="demo" title="demo" /></li><br>
<li><img src=https://www.2cto.com/uploadfile/2018/0329/20180329113347624.jpg" alt="demo" title="demo" /></li><br>
<li><img src=https://www.2cto.com/uploadfile/2018/0329/20180329113348166.jpg" alt="demo" title="demo" /></li><br>
<li><img src=https://www.2cto.com/uploadfile/2018/0329/20180329113348194.jpg" alt="demo" title="demo" /></li><br>
<li><img src=https://www.2cto.com/uploadfile/2018/0329/20180329113348194.jpg" alt="demo" title="demo" /></li><br>
<li><img src=https://www.2cto.com/uploadfile/2018/0329/20180329113348986.jpg" alt="demo" title="demo" /></li><br>
<li><img src=https://www.2cto.com/uploadfile/2018/0329/20180329113349932.jpg" alt="demo" title="demo" /></li><br>
<li><img src=https://www.2cto.com/uploadfile/2018/0329/20180329113349139.jpg" alt="demo" title="demo" /></li><br>
<li><img src=https://www.2cto.com/uploadfile/2018/0329/20180329113349750.jpg" alt="demo" title="demo" /></li><br>
<li><img src=https://www.2cto.com/uploadfile/2018/0329/20180329113347624.jpg" alt="demo" title="demo" /></li><br>
<li><img src=https://www.2cto.com/uploadfile/2018/0329/20180329113348194.jpg" alt="demo" title="demo" /></li><br>
<li><img src=https://www.2cto.com/uploadfile/2018/0329/20180329113347624.jpg" alt="demo" title="demo" /></li><br>
<li><img src=https://www.2cto.com/uploadfile/2018/0329/20180329113349794.jpg" alt="demo" title="demo" /></li><br>
</ul><br>
</p><br>
<span class="pre">«向左滚动</span><br>
<span class="next">向右滚动»</span><br><br>
</p><br>
</body><br>
</html></p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/2115772.html">
JS文件上传/下载（代码实例） </a>
</p>
<p>
下一篇： <a href="/article/2115774.html">
javascript上传文件后台接收代码实现教程 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2115823.html" target="_blank" title="JS实现的新闻列表自动滚动效果示例">
<h2>
JS实现的新闻列表自动滚动效果示例 </h2>
</a>
</li>
<li>
<a href="/article/2115773.html" target="_blank" title="Jquery实现图片左右自动滚动示例">
<h2>
Jquery实现图片左右自动滚动示例 </h2>
</a>
</li>
<li>
<a href="/article/2115728.html" target="_blank" title="jQuery实现公告文字左右滚动的实例代码">
<h2>
jQuery实现公告文字左右滚动的实例代码 </h2>
</a>
</li>
<li>
<a href="/article/2106584.html" target="_blank" title="jQuery实现列表自动滚动循环滚动展示新闻">
<h2>
jQuery实现列表自动滚动循环滚动展示新闻 </h2>
</a>
</li>
<li>
<a href="/article/2104433.html" target="_blank" title="jquery实现图片按比例缩放示例">
<h2>
jquery实现图片按比例缩放示例 </h2>
</a>
</li>
<li>
<a href="/article/2096063.html" target="_blank" title="jQuery实现的简单图片轮播效果完整示例">
<h2>
jQuery实现的简单图片轮播效果完整示例 </h2>
</a>
</li>
<li>
<a href="/article/2091502.html" target="_blank" title="jQuery实现的淡入淡出图片轮播效果示例">
<h2>
jQuery实现的淡入淡出图片轮播效果示例 </h2>
</a>
</li>
<li>
<a href="/article/2087884.html" target="_blank" title="JS实现的点击按钮图片上下滚动效果示例">
<h2>
JS实现的点击按钮图片上下滚动效果示例 </h2>
</a>
</li>
<li>
<a href="/article/2087876.html" target="_blank" title="jQuery实现左右两个列表框的内容相互移动功能示例">
<h2>
jQuery实现左右两个列表框的内容相互移动功能示例 </h2>
</a>
</li>
<li>
<a href="/article/2083574.html" target="_blank" title="jQuery scroll事件实现监控滚动条分页示例">
<h2>
jQuery scroll事件实现监控滚动条分页示例 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>