jquery實(shí)現(xiàn)圖片滾動(dòng)效果的簡單實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 圖片自動(dòng)無縫滾動(dòng)</title>
<script src="jquery.min.js" type="text/javascript"></script>
<style type="text/css">
ul,li { list-style: none;margin: 0; padding: 0;}
li { float: left;}
img { width: 100px; height: 100px; padding:0 2px}
.a { width: 400px; height:100px;margin: 0 auto; overflow: hidden; border: 1px solid red;}
.aa { width: 200px; height:100px;margin: 50px auto 0 auto; overflow: hidden; border: 1px solid red;}
</style>
</head>
<body>
<div class="a">
<ul>
<li>
<a href="#"><img alt="" src=" images/1.jpg"/>
</a>
</li>
<li >
<a href="#"><img alt="" src="images/2.png">
</a>
</li>
<li>
<a href="#"><img alt="" src="images/3.jpg">
</a>
</li>
<li>
<a href=""><img alt="" src="images/4.jpg">
</a>
</li>
<li>
<a href="#"><img alt="" src="images/5.jpg">
</a>
</li>
</ul>
</div>
<div class="aa">
<ul>
<li>
<a href="#"><img alt="" src=" images/1.jpg"/>
</a>
</li>
<li >
<a href="#"><img alt="" src="images/2.png">
</a>
</li>
<li>
<a href="#"><img alt="" src="images/3.jpg">
</a>
</li>
<li>
<a href=""><img alt="" src="images/4.jpg">
</a>
</li>
<li>
<a href="#"><img alt="" src="images/5.jpg">
</a>
</li>
</ul>
</div>
<script type="text/javascript">
jQuery.fn.extend({
pic_scroll:function (){
$(this).each(function(){
var _this=$(this);//存儲(chǔ)對象
var ul=_this.find("ul");//獲取ul對象
var li=ul.find("li");//獲取所有圖片所有的li
var w=li.size()*li.width();//統(tǒng)計(jì)圖片的長度
li.clone().prependTo(ul);//克隆圖片一份放入ul里
ul.width(2*w);//設(shè)置ul的長度，使所有圖片排成一排
var i=1,l;
_this.hover(function(){i=0},function(){i=1});//鼠標(biāo)經(jīng)過時(shí)設(shè)置i=0達(dá)到鼠標(biāo)經(jīng)過停止效果
setInterval(function(){
//定時(shí)滾動(dòng)函數(shù)
l = _this.scrollLeft();
if (l < w) {
_this.scrollLeft(l+i);
} else {
_this.scrollLeft(0);
}
},20);
})
}
});
$(document).ready(function(){
$(".a,.aa").pic_scroll();//多個(gè)地方使用
})
</script>
</body>
</html>
- Android實(shí)現(xiàn)圖片滾動(dòng)和頁簽控件功能的實(shí)現(xiàn)代碼
- Android仿淘寶商品瀏覽界面圖片滾動(dòng)效果
- 圖片自動(dòng)播放器腳本之家修正
- JS特效實(shí)現(xiàn)圖片自動(dòng)播放并可控的效果
- autoPlay 基于jquery的圖片自動(dòng)播放效果
- 基于Jquery實(shí)現(xiàn)的一個(gè)圖片滾動(dòng)切換
- jquery 圓形旋轉(zhuǎn)圖片滾動(dòng)切換效果
- JQuery 圖片滾動(dòng)輪播示例代碼
- js實(shí)現(xiàn)網(wǎng)站首頁圖片滾動(dòng)顯示
- jQuery+css實(shí)現(xiàn)圖片滾動(dòng)效果(附源碼)
- js+div實(shí)現(xiàn)圖片滾動(dòng)效果代碼
- ImageFlow可鼠標(biāo)控制圖片滾動(dòng)
- javascript 不間斷的圖片滾動(dòng)并可點(diǎn)擊
- js實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)圖片滾動(dòng)停止的方法
- Android使用自定義屬性實(shí)現(xiàn)圖片自動(dòng)播放滾動(dòng)的功能
相關(guān)文章
基于JQuery的動(dòng)態(tài)刪除Table表格的行和列的代碼
基于JQuery的動(dòng)態(tài)刪除Table表格的行和列的代碼以前腳本之家也發(fā)布過相關(guān)的代碼，大家可以參考下。2011-05-05
jQuery實(shí)現(xiàn)的超鏈接提示效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的超鏈接提示效果,結(jié)合實(shí)例形式對比分析了jQuery實(shí)現(xiàn)的帶有l(wèi)oading動(dòng)態(tài)圖效果的提示文字以及默認(rèn)提示文字顯示效果,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
jQuery修改li下的樣式以及l(fā)i下的img的src的值的方法
這篇文章主要為大家介紹了jQuery如何修改li下的樣式，以及修改li下的img的src的值，示例代碼很簡單，一看就會(huì)2014-11-11
這篇文章主要介紹了jQuery性能優(yōu)化技巧,較為詳細(xì)的分析了jQuery的常見使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
用JQuery 實(shí)現(xiàn)的自定義對話框...2007-03-03
下面小編就為大家?guī)硪黄贘query Ajax type的4種類型(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
使用jQuery實(shí)現(xiàn)Form表單提交操作
在Web開發(fā)中,表單提交是一個(gè)常見的操作,通過表單提交用戶可以向服務(wù)器發(fā)送數(shù)據(jù),jQuery是一個(gè)流行的JavaScript庫,可以簡化處理JavaScript的操作,包括表單提交,在本篇博客中,我們將介紹如何使用jQuery來實(shí)現(xiàn)表單提交操作,需要的朋友可以參考下2024-09-09
下拉列表選擇項(xiàng)的選中在不同瀏覽器中的兼容性問題探討
使用jquery做了一個(gè)項(xiàng)目，下拉列表選擇項(xiàng)變化時(shí)，獲取選中項(xiàng)的文本在不同瀏覽器中的兼容性問題在本文將為大家介紹下2013-09-09
淺談struts1 & jquery form 文件異步上傳
下面小編就為大家?guī)硪黄獪\談struts1 & jquery form 文件異步上傳。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
jquery實(shí)現(xiàn)鼠標(biāo)拖拽滑動(dòng)效果來選擇數(shù)字的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)鼠標(biāo)拖拽滑動(dòng)效果來選擇數(shù)字的方法,涉及jQuery鼠標(biāo)事件的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-05-05