js實(shí)現(xiàn)圖片輪播效果
更新時(shí)間：2015年12月19日 12:15:21 作者：天空還下著雪
這篇文章主要介紹了js實(shí)現(xiàn)圖片輪播效果的相關(guān)資料,需要的朋友可以參考下
本文實(shí)例講解了js實(shí)現(xiàn)圖片輪播效果代碼，分享給大家供大家參考，具體內(nèi)容如下
運(yùn)行代碼如下
具體代碼如下
插件是基于jQuery寫的，主要實(shí)現(xiàn)的功能：自動(dòng)播放、鼠標(biāo)懸停、左右箭頭控制+禁止點(diǎ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標(biāo)簽最好加個(gè)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、自動(dòng)滾動(dòng)
2、鼠標(biāo)懸停
3、左右控制+禁止點(diǎn)擊
調(diào)用：$.scroll({box: '父容器', scrollbox: 'ul', time: 1500});
*/
scroll: function(options) {
// 默認(rèn)配置
var defaults = {
box: '.cooperation-box', // 父容器
scrollbox: '.cooperation', // ul容器
time: 1500 // 切換時(shí)間
};
// 擴(kuò)展配置
var conf = $.extend({}, defaults, options);
// 獲取li的個(gè)數(shù)
var liSize = $(conf.box).find('li').size();
// 獲取li的寬度
var liWidth = $(conf.box).find('li:first').width();
// 定義ul的寬度
$(conf.scrollbox).width(liWidth*liSize);
// 右箭頭初始化(不可點(diǎn))
$(conf.box).find('.next').addClass('disabled');
// 定義一個(gè)全局變量index索引變量
var index = 0;
// 切換函數(shù)
function switchFunc() {
index++;
if(index > liSize-5) { // 必須有5個(gè)顯示在上面
index=liSize-5;
// 把滾動(dòng)過的添加到后面，初始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');
}
);
}
// 自動(dòng)播放
var autoPlay = setInterval(function() {switchFunc();}, conf.time);
// 鼠標(biāo)浮上暫停
$(conf.box).mouseover(function() {
clearInterval(autoPlay);
});
// 鼠標(biāo)離開繼續(xù)
$(conf.box).mouseout(function() {
autoPlay = setInterval(function() {switchFunc();}, conf.time);
});
// 點(diǎn)擊左箭頭
$(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');
}
);
});
// 點(diǎn)擊右箭頭
$(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>
希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
opencv 識(shí)別微信登錄驗(yàn)證滑動(dòng)塊位置
這篇文章主要介紹了opencv 識(shí)別微信登錄驗(yàn)證滑動(dòng)塊位置及各自的優(yōu)缺點(diǎn),需要的朋友可以參考下2018-08-08
uniapp中使用vuex的過程(解決uniapp無法在data和template中獲取vuex數(shù)據(jù)問題)
這篇文章主要介紹了uniapp中使用vuex（解決uniapp無法在data和template中獲取vuex數(shù)據(jù)問題）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
IE6-8中Date不支持toISOString的修復(fù)方法
這篇文章主要介紹了IE6-8中Date不支持toISOString的修復(fù)方法,需要的朋友可以參考下2014-05-05
今天小編就為大家分享一篇layui表格分頁 記錄勾選的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
cocos2dx骨骼動(dòng)畫Armature源碼剖析(一)
cocos2dx中的骨骼動(dòng)畫在程序中使用非常方便，從編輯器(cocostudio或flash插件dragonBones)得到xml或json數(shù)據(jù)，調(diào)用代碼就可以直接展示出動(dòng)畫效果，下面通過本篇文章給大家分享cocos2dx骨骼動(dòng)畫Armature源碼剖析，需要的朋友一起來學(xué)習(xí)吧。2015-09-09
使用JavaScript給圖片添加水印的實(shí)現(xiàn)方法封裝
圖片加水印是一種常見的圖像處理技術(shù),通常用于保護(hù)版權(quán)、防止盜用、增加圖片的識(shí)別度等多種場(chǎng)景,這篇文章主要給大家介紹了關(guān)于使用JavaScript給圖片添加水印的實(shí)現(xiàn)方法封裝,需要的朋友可以參考下2024-03-03
Moment.js是一個(gè)輕量級(jí)的JavaScript時(shí)間庫，它方便了日常開發(fā)中對(duì)時(shí)間的操作，提高了開發(fā)效率下，本文給大家介紹moment.js使用超詳細(xì)教程，感興趣的朋友跟隨小編一起看看吧2023-10-10
基于jquery插件實(shí)現(xiàn)常見的幻燈片效果
使用幻燈片效果的網(wǎng)站目前很普遍，本以為很復(fù)雜，實(shí)現(xiàn)起來卻發(fā)現(xiàn)很簡(jiǎn)單，現(xiàn)成的jquery插件jquery.KinSlideshow.js便可實(shí)現(xiàn)幻燈片效果2013-11-11
mqtt.js?無法連接/錯(cuò)誤提示?WebSocket?connection?to?‘ws://xxxxx‘?
這篇文章主要介紹了mqtt.js?無法連接/錯(cuò)誤提示?WebSocket?connection?to?‘ws://xxxxx‘?failed:,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
在視頻前插入廣告...2006-11-11