您的位置：首页 > 百科管理 > 详情

轮播海报箭头代码-求类似于淘宝产品详情页面大图下面多个小图然后点击左右箭头可以换图片的那种效果的CSS或JS代码

原创：找图网 2023-08-08 00:00:59

js如何实现轮播图播放效果（附代码）

本篇文章给大家带来的内容是关于js如何实现轮播图播放效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

早前做轮播图的时候,我们习惯在网上找一些现成的例子修改修改使用。现在做轮播图,像bootstrap和iview等前端框架中都有封装好的特效,直接拿过来使用就可以了。但是轮播图是怎么做的呢。下面我们用原生代码来手写一个轮播图的特效。

实现效果如下:(图片来自网络)

实现功能如下:

鼠标划在左半部分出现左箭头切换,鼠标划在右半部分出现右箭头切换。

点击数字播放,当前播放页数字背景透明度为1,非当前页透明度为0.6

点击缩略图播放,当前播放页缩略图透明度为1,非当前页缩略头透明度为0.3

间隔2000ms自动播放(包括图片、数字、缩略图)。

根据前面运动知识,实现代码如下:我们把前面总结的运动框架封装在中

<!DOCTYPE html>

<html>

<head>

<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>

function getByClass(oParent,sClass){

var aEle=("*");

var aResult=[];

for(var i=0; i<; i++){

if(aEle[i].className===sClass){

(aEle[i]);

}

return aResult;

}

=function(){

var op=("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];

// 左右按钮

==function(){

startMove(oBtnPrev,"opacity",100);

}

==function(){

startMove(oBtnPrev,"opacity",0);

}

==function(){

startMove(oBtnNext,"opacity",100);

}

==function(){

startMove(oBtnNext,"opacity",0);

}

// 大图切换

var opNumber=getByClass(op,"number")[0];

var aNumber=("li");

var oBigPic=getByClass(op,"bigpic")[0];

var aImg=("li");

var aSmallImg=getByClass(op,"smallimg")[0];

var aSmall=("li");

var nowZIndex=2;

var now=0;

=*aSmall[0].offsetWidth+"px";

for(var j=0; j<; j++){

aNumber[j].index=j;

aNumber[j].onclick=function(){

if(===now){

return;

}

now=;

tab();

}

aNumber[j].onmouseover=function(){

startMove(this,"opacity",100);

}

aNumber[j].onmouseout=function(){

if(!=now){

startMove(this,"opacity",60);

}

for(var m=0; m<; m++){

aSmall[m].index=m;

aSmall[m].onclick=function(){

if(===now){

return;

}

now=;

tab();

}

aSmall[m].onmouseover=function(){

startMove(this,"opacity",100);

}

aSmall[m].onmouseout=function(){

();

(now);

if(!=now){

startMove(this,"opacity",30);

}

function tab(){

aImg[now].=nowZIndex++;

for(var i=0; i<; i++){

startMove(aNumber[i],"opacity",60);

}

for(var i=0; i<; i++){

startMove(aSmall[i],"opacity",30);

}

startMove(aNumber[now],"opacity",100);

startMove(aSmall[now],"opacity",100);

aImg[now].=0;

startMove(aImg[now],"height",430);

// if(now===0){

// startMove(aSmallImg,"left",0);

// }else if(now===-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===-1){

startMove(aSmallImg,"left",-(now-4)*aSmall[0].offsetWidth);

}

=function(){

now--;

if(now===-1){

now=-1;

}

tab();

}

=function(){

now++;

if(now===){

now=0;

}

tab();

}

var timer=setInterval(,2000);

=function(){

clearInterval(timer);

}

=function(){

timer=setInterval(,2000);

}

</script>

</head>

<body>

</ul>

</ul>

</ul>

</p>

</body>

</html> getStyle(obj,name){

if(){

return [name];

}

else{

return getComputedStyle(obj,false)[name];

}

function startMove(obj, attr, iTarget) {

clearInterval();

= setInterval(function() {

var cur=0;

if(attr==="opacity"){

cur=(parseFloat(getStyle(obj,attr))*100);//有可能会出现误差0.07*100

}

else{

cur=parseInt(getStyle(obj,attr));

}

var speed = (iTarget - cur) / 6;

speed = speed > 0 ? (speed) : (speed);

if (cur === iTarget) {

clearInterval();

} else {

if(attr==="opacity"){

="alpha(opacity:"+cur+speed+")";

=(cur+speed)/100;

}else{

[attr]=cur+speed+"px";

}

}, 30)

}

求类似于淘宝产品详情页面大图下面多个小图然后点击左右箭头可以换图片的那种效果的CSS或JS代码

参考代码:

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

.btn{

display: block;

margin:135px auto;

width: 30px;

height: 30px;

font-size: 30px;

cursor: pointer;

}

.btn:hover

{

color: gray;

font-size: 35px;

font-weight: bold;

}

.img

{

width: 600px;

height: 400px;

float: left;

transition: all 1s;

}

.info-img

{

width: 100px;

height: 67px;

float: left;

margin-left: 20px;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

var data = [

{id:1,src:"image/",text:"风景图片1"},

{id:2,src:"image/",text:"风景图片2"},

{id:3,src:"image/",text:"风景图片3"},

{id:4,src:"image/",text:"风景图片4"},

];

var info = ("info");

onload = function () {

let doc=``;

for(d of data)

{

doc = doc + `<div><img src="${d.src}" value="${d.id}" title="${d.text} "> </div>`;

}

= doc;

};

var img = ("img")[0];

var text = ("text");

function change_img(e) {

var id = parseInt();

if(e == "next")

{

id += 1;

}else {

id -= 1;

}

if(id>4)

{

id=1;

}else if(id<1){

id=4;

}

try {

("src",data[id-1].src);

= data[id-1].text;

= id;

}catch(e) {

id = id - 1;

}

</script>

</body>

</html>

效果:

注意:

图片是本地的

样式这些都可以自己定义。

淘宝全屏的轮播代码是怎么做的？

<span><DIV class=J_TWidget data-widget-type="Tabs"

data-widget-config="{'effect': 'fade', 'circular': true ,'navCls':'toseise','activeTriggerCls':'odslos','contentCls':'piaofu'}">

<DIV

style="Z-INDEX: 0; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; TOP: 0px; PADDING-TOP: 0px; LEFT: -485px"

class=J_TWidget data-widget-type="Carousel"

data-widget-config="{

'contentCls': 'slide-kun1362899830209content',

'triggerCls': 'slide-kun1362899830209triggers',

'navCls': 'slide-kun1362899830209triggers',

'triggerType': 'mouse',

'effect': 'scrollx',

'prevBtnCls':'prev',

'nextBtnCls':'next',

'steps': 1,

'autoplay': true,

'viewSize':[1920],

'circular': true

}">

<DIV style="DISPLAY: none" class=J_TWidget data-widget-type="Popup"

data-widget-config="{'trigger':'.first-trigger2','align':{'node':'.first-trigger2','offset':[0,0],'points':['cc','cc']}}">

<DIV style="WIDTH: 90px; FLOAT: left; HEIGHT: 90px" class=prev><IMG

src="左点击"></DIV>

<DIV style="WIDTH: 90px; HEIGHT: 90px; MARGIN-LEFT: 950px" class=next><IMG

src="右点击"></DIV></DIV>

<DIV

style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; OVERFLOW: hidden; PADDING-TOP: 0px"

class=first-trigger2>

<UL

style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; PADDING-TOP: 0px"

class=slide-kun1362899830209content>

<LI

style="PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 1920px; PADDING-RIGHT: 0px; HEIGHT: 570px; PADDING-TOP: 0px"><A