ホームページ >ウェブフロントエンド >jsチュートリアル >JSでカルーセル画像の再生効果を実現する方法（コード付き）
JSでカルーセル画像の再生効果を実現する方法（コード付き）
- 不言オリジナル
- 2018-09-01 11:07:203419ブラウズ
本篇文章给大家带来的内容是关于js如何实现轮播图播放效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
早前做轮播图的时候，我们习惯在网上找一些现成的例子修改修改使用。现在做轮播图，像bootstrap和iview等前端框架中都有封装好的特效，直接拿过来使用就可以了。但是轮播图是怎么做的呢。下面我们用原生代码来手写一个轮播图的特效。
实现效果如下：（图片来自网络）
实现功能如下：
鼠标划在左半部分出现左箭头切换，鼠标划在右半部分出现右箭头切换。
点击数字播放，当前播放页数字背景透明度为1，非当前页透明度为0.6
点击缩略图播放，当前播放页缩略图透明度为1，非当前页缩略头透明度为0.3
间隔2000ms自动播放（包括图片、数字、缩略图）。
根据前面运动知识，实现代码如下：
我们把前面总结的运动框架封装在move.js中
nbsp;html>
<title>轮播图</title>
<script></script>
<style>
*{
margin: 0;
padding: 0;
}
#switch{
width: 1400px;
height: 520px;
margin:auto;
position: relative;
overflow: hidden;
}
#switch .bigpic li{
position: absolute;
top: 0;
left: 0;
}
#switch .bigpic li:nth-child(1){
z-index: 2;
}
#switch .prev{
width: 46px;
height: 46px;
line-height: 46px;
color: #fff;
border-radius: 100%;
background: rgba(255,255,255,0.6);
position: absolute;
top:192px;
left: 20px;
border-width: 0;
filter:alpha(opacity:0);
opacity:0;
z-index: 999;
}
#switch .next{
width: 46px;
height: 46px;
line-height: 46px;
color: #fff;
border-radius: 100%;
background: rgba(255,255,255,0.6);
position: absolute;
top:192px;
right: 20px;
border-width: 0;
filter:alpha(opacity:0);
opacity:0;
z-index: 9999;
}
#switch .number{
position: absolute;
right: 30px;
top: 390px;
z-index: 9999;
list-style: none;
}
#switch .number li{
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
background: #fff;
border-radius: 100%;
color: #000;
text-align: center;
cursor: pointer;
filter:alpha(opacity:60);
opacity:0.6;
}
#switch .number li:nth-child(1){
filter:alpha(opacity:100);
opacity:1.0;
}
#switch .mark_left{
width: 700px;
height: 430px;
position: absolute;
left: 0;
top: 0;
z-index: 9998;
}
#switch .mark_right{
width: 700px;
height: 430px;
position: absolute;
right: 0;
top: 0;
z-index: 9998;
}
.smallimg{
list-style: none;
padding:0;
margin:0;
position: absolute;
top: 434px;
height: 86px;
}
.smallimg li{
width:280px;
height: 86px;
float: left;
filter:alpha(opacity:30);
opacity:0.3;
}
.smallimg li:nth-child(1){
filter:alpha(opacity:100);
opacity:1.0;
}
.smallimg li img{
width:280px;
height: 86px;
}
</style>
<script>
function getByClass(oParent,sClass){
var aEle=oParent.getElementsByTagName("*");
var aResult=[];
for(var i=0; i<aEle.length; i++){
if(aEle[i].className===sClass){
aResult.push(aEle[i]);
}
}
return aResult;
}
window.onload=function(){
var op=document.getElementById("switch");
var oBtnPrev=getByClass(op,"prev")[0];
var oBtnNext=getByClass(op,"next")[0];
var oMarkLeft=getByClass(op,"mark_left")[0];
var oMarkRight=getByClass(op,"mark_right")[0];
// 左右按钮
oBtnPrev.onmouseover=oMarkLeft.onmouseover=function(){
startMove(oBtnPrev,"opacity",100);
}
oBtnPrev.onmouseout=oMarkLeft.onmouseout=function(){
startMove(oBtnPrev,"opacity",0);
}
oBtnNext.onmouseover=oMarkRight.onmouseover=function(){
startMove(oBtnNext,"opacity",100);
}
oBtnNext.onmouseout=oMarkRight.onmouseout=function(){
startMove(oBtnNext,"opacity",0);
}
// 大图切换
var opNumber=getByClass(op,"number")[0];
var aNumber=opNumber.getElementsByTagName("li");
var oBigPic=getByClass(op,"bigpic")[0];
var aImg=oBigPic.getElementsByTagName("li");
var aSmallImg=getByClass(op,"smallimg")[0];
var aSmall=aSmallImg.getElementsByTagName("li");
var nowZIndex=2;
var now=0;
aSmallImg.style.width=aSmall.length*aSmall[0].offsetWidth+"px";
for(var j=0; j<aNumber.length; j++){
aNumber[j].index=j;
aNumber[j].onclick=function(){
if(this.index===now){
return;
}
now=this.index;
tab();
}
aNumber[j].onmouseover=function(){
startMove(this,"opacity",100);
}
aNumber[j].onmouseout=function(){
if(this.index!=now){
startMove(this,"opacity",60);
}
}
}
for(var m=0; m<aSmall.length; m++){
aSmall[m].index=m;
aSmall[m].onclick=function(){
if(this.index===now){
return;
}
now=this.index;
tab();
}
aSmall[m].onmouseover=function(){
startMove(this,"opacity",100);
}
aSmall[m].onmouseout=function(){
console.log(this.index);
console.log(now);
if(this.index!=now){
startMove(this,"opacity",30);
}
}
}
function tab(){
aImg[now].style.zIndex=nowZIndex++;
for(var i=0; i<aNumber.length; i++){
startMove(aNumber[i],"opacity",60);
}
for(var i=0; i<aSmall.length; i++){
startMove(aSmall[i],"opacity",30);
}
startMove(aNumber[now],"opacity",100);
startMove(aSmall[now],"opacity",100);
aImg[now].style.height=0;
startMove(aImg[now],"height",430);
// if(now===0){
// startMove(aSmallImg,"left",0);
// }else if(now===aSmall.length-1){
// startMove(aSmallImg,"left",-(now-2)*aSmall[0].offsetWidth);
// }else{
// startMove(aSmallImg,"left",-(now-1)*aSmall[0].offsetWidth);
// }
if(now===0){//根据不同的规则设置不同的if
startMove(aSmallImg,"left",0);
}else if(now===aSmall.length-1){
startMove(aSmallImg,"left",-(now-4)*aSmall[0].offsetWidth);
}
}
oBtnPrev.onclick=function(){
now--;
if(now===-1){
now=aImg.length-1;
}
tab();
}
oBtnNext.onclick=function(){
now++;
if(now===aImg.length){
now=0;
}
tab();
}
var timer=setInterval(oBtnNext.onclick,2000);
op.onmouseover=function(){
clearInterval(timer);
}
op.onmouseout=function(){
timer=setInterval(oBtnNext.onclick,2000);
}
}
</script>
<p>
</p>
- 1
- 2
- 3
- 4
- 5
- 6
move.js
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}
else{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj, attr, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var cur=0;
if(attr==="opacity"){
cur=Math.round(parseFloat(getStyle(obj,attr))*100);//有可能会出现误差0.07*100
}
else{
cur=parseInt(getStyle(obj,attr));
}
var speed = (iTarget - cur) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur === iTarget) {
clearInterval(obj.timer);
} else {
if(attr==="opacity"){
obj.style.filter="alpha(opacity:"+cur+speed+")";
obj.style.opacity=(cur+speed)/100;
}else{
obj.style[attr]=cur+speed+"px";
}
}
}, 30)
}
相关推荐：
以上がJSでカルーセル画像の再生効果を実現する方法（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。