js實現(xiàn)圖片輪播效果
更新時間：2015年12月19日 12:15:21 作者：天空還下著雪
這篇文章主要介紹了js實現(xiàn)圖片輪播效果的相關資料,需要的朋友可以參考下
本文實例講解了js實現(xiàn)圖片輪播效果代碼，分享給大家供大家參考，具體內(nèi)容如下
運行代碼如下
具體代碼如下
插件是基于jQuery寫的，主要實現(xiàn)的功能：自動播放、鼠標懸停、左右箭頭控制+禁止點擊
CSS樣式：
<style>
.cooperation-box {
position: relative;
height: 91px;
border-bottom: 1px solid #E0DED9;
overflow: hidden;
}
.cooperation {
position: relative;
left: 0;
height: 50px;
padding: 20px 0;
}
.cooperation li {
float: left;
width: 205px;
text-align: center;
}
.cooperation li a {
display: block;
}
.cooperation li img {
height: 100%;
}
.cooperation-box>a {
display: block;
position: absolute;
top: 0;
z-index: 9;
width: 22px;
height: 100%;
background: #f5f5f5;
font-family: '宋體';
font-size: 18px;
color: #aaa;
font-weight: bold;
text-align: center;
line-height: 91px;
}
.cooperation-box>a:hover {
background: #e5e5e5;
}
.cooperation-box .prev {
left: 0;
border-right: 1px solid #E0DED9;
}
.cooperation-box .next {
right: 0;
border-left: 1px solid #E0DED9;
}
.cooperation-box .prev.disabled,
.cooperation-box .next.disabled {
background: #fbfbfb;
color: #ddd;
}
.cooperation-box .prev.disabled:hover,
.cooperation-box .next.disabled:hover {
background: #fbfbfb;
}
</style>
HTML布局( a標簽最好加個title屬性 )：
<div class="cooperation-box">
<a class="prev" href="javascript:;"><</a>
<a class="next" href="javascript:;">></a>
<ul class="cooperation">
<li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
</ul>
</div>
JS腳本插件：
<script>
$.extend({
/*
圖片輪播效果
效果：
1、自動滾動
2、鼠標懸停
3、左右控制+禁止點擊
調(diào)用：$.scroll({box: '父容器', scrollbox: 'ul', time: 1500});
*/
scroll: function(options) {
// 默認配置
var defaults = {
box: '.cooperation-box', // 父容器
scrollbox: '.cooperation', // ul容器
time: 1500 // 切換時間
};
// 擴展配置
var conf = $.extend({}, defaults, options);
// 獲取li的個數(shù)
var liSize = $(conf.box).find('li').size();
// 獲取li的寬度
var liWidth = $(conf.box).find('li:first').width();
// 定義ul的寬度
$(conf.scrollbox).width(liWidth*liSize);
// 右箭頭初始化(不可點)
$(conf.box).find('.next').addClass('disabled');
// 定義一個全局變量index索引變量
var index = 0;
// 切換函數(shù)
function switchFunc() {
index++;
if(index > liSize-5) { // 必須有5個顯示在上面
index=liSize-5;
// 把滾動過的添加到后面，初始left值為0 index值為0
var scrolledLi = $(conf.box).find('li:lt('+index+')');
$(conf.scrollbox).append(scrolledLi);
$(conf.scrollbox).css('left', 0);
index = 0;
}
$(conf.scrollbox).stop(true, true).animate(
{'left': -liWidth*index},
500,
function() {
$(conf.box).find('.next').removeClass('disabled');
}
);
}
// 自動播放
var autoPlay = setInterval(function() {switchFunc();}, conf.time);
// 鼠標浮上暫停
$(conf.box).mouseover(function() {
clearInterval(autoPlay);
});
// 鼠標離開繼續(xù)
$(conf.box).mouseout(function() {
autoPlay = setInterval(function() {switchFunc();}, conf.time);
});
// 點擊左箭頭
$(conf.box).find('.prev').click(function() {
index++;
if(index >= liSize-5) {
index=liSize-5;
$(this).addClass('disabled');
}
$(conf.scrollbox).stop(true, true).animate(
{'left': -liWidth*index},
500,
function() {
$(conf.box).find('.next').removeClass('disabled');
}
);
});
// 點擊右箭頭
$(conf.box).find('.next').click(function() {
index--;
if(index <= 0) {
index = 0;
$(this).addClass('disabled');
}
$(conf.scrollbox).stop(true, true).animate(
{'left': -liWidth*index},
500,
function() {
$(conf.box).find('.prev').removeClass('disabled');
}
);
});
}
});
</script>
頁面調(diào)用：
<script>
$(function() {
$.scroll({time: 1500});
});
</script>
希望本文所述對大家學習javascript程序設計有所幫助。
相關文章
這篇文章主要介紹了opencv 識別微信登錄驗證滑動塊位置及各自的優(yōu)缺點,需要的朋友可以參考下2018-08-08
uniapp中使用vuex的過程(解決uniapp無法在data和template中獲取vuex數(shù)據(jù)問題)
這篇文章主要介紹了uniapp中使用vuex（解決uniapp無法在data和template中獲取vuex數(shù)據(jù)問題）,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了IE6-8中Date不支持toISOString的修復方法,需要的朋友可以參考下2014-05-05
今天小編就為大家分享一篇layui表格分頁 記錄勾選的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
cocos2dx中的骨骼動畫在程序中使用非常方便，從編輯器(cocostudio或flash插件dragonBones)得到xml或json數(shù)據(jù)，調(diào)用代碼就可以直接展示出動畫效果，下面通過本篇文章給大家分享cocos2dx骨骼動畫Armature源碼剖析，需要的朋友一起來學習吧。2015-09-09
使用JavaScript給圖片添加水印的實現(xiàn)方法封裝
圖片加水印是一種常見的圖像處理技術(shù),通常用于保護版權(quán)、防止盜用、增加圖片的識別度等多種場景,這篇文章主要給大家介紹了關于使用JavaScript給圖片添加水印的實現(xiàn)方法封裝,需要的朋友可以參考下2024-03-03
Moment.js是一個輕量級的JavaScript時間庫，它方便了日常開發(fā)中對時間的操作，提高了開發(fā)效率下，本文給大家介紹moment.js使用超詳細教程，感興趣的朋友跟隨小編一起看看吧2023-10-10
使用幻燈片效果的網(wǎng)站目前很普遍，本以為很復雜，實現(xiàn)起來卻發(fā)現(xiàn)很簡單，現(xiàn)成的jquery插件jquery.KinSlideshow.js便可實現(xiàn)幻燈片效果2013-11-11
mqtt.js?無法連接/錯誤提示?WebSocket?connection?to?‘ws://xxxxx‘?
這篇文章主要介紹了mqtt.js?無法連接/錯誤提示?WebSocket?connection?to?‘ws://xxxxx‘?failed:,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
在視頻前插入廣告...2006-11-11