当当网html图片轮播,JavaScript实现轮播图特效

本文实例为大家分享了JavaScript实现轮播图特效的具体代码，供大家参考，具体内容如下

功能：

1、图片会自动播放，鼠标放上面会暂停播放

2、点击左右出现的箭头可以切换到上一张/下一张图片

3、点击序号会跳转到对应图片

当当网首页轮播图-By小黑

*{

padding: 0;

margin: 0;

list-style: none;

}

#wrap{

margin: 50px auto;

width: 800px;

height: 330px;

overflow: hidden;

position: relative;

}

#list{

position: absolute;

bottom: 15px;

right: 250px;

}

#list li{

float: left;

margin-right: 15px;

cursor: pointer;

width: 23px;

height: 23px;

line-height: 23px;

text-align: center;

background: #ADA79D;

color: #FFF ;

border-radius: 50%;

}

#list .on{

background: red;

}

#bar_left,#bar_right{

width: 33px;

height: 80px;

line-height: 80px;

position: absolute;

top: 130px;

background: rgba(0, 0, 0, 0.3);

}

#bar_left{

left: -33px;

}

#bar_right{

right: -35px;

}

/*下面利用伪元素实现左侧和右侧的小箭头*/

#bar_left:after,#bar_left:before,#bar_right:before,#bar_right:after{

content: "";

border-top: 15px solid transparent;

border-bottom: 15px solid transparent;

position: absolute;

top: 25px;

}

/*左边箭头*/

#bar_left:before{

border-left: 15px solid transparent;

border-right: 15px solid #FFF;

right: 10px;

}

#bar_left:after{

border-left: 15px solid transparent;

border-right: 15px solid rgba(0, 0, 0, 0.3);

right: 7px;

}

/*右边箭头*/

#bar_right:before{

border-right: 15px solid transparent;

border-left: 15px solid #FFF;

left: 10px;

}

#bar_right:after{

border-right: 15px solid transparent;

border-left: 15px solid rgba(0, 0, 0, 0.3);

left: 7px;

}

#wrap:hover #bar_left{

left: 0;

cursor: pointer;

transition: left 0.5s;

}

#wrap:hover #bar_right{

/* display: block; */

right: 5px;

cursor: pointer;

transition: right 0.5s;

}

.tex{

margin: 20px auto;

width: 400px;

}

.tex ul li{

list-style-type:circle;

color: red;

font-weight: bold;

margin-bottom: 5px;

}

• 
• 
• 
• 
• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8

• 功能如下：
• 图片会自动播放，鼠标放上面会暂停播放
• 点击左右出现的箭头可以切换到上一张/下一张图片
• 点击序号会跳转到对应图片

var wrap=document.getElementById('wrap');

var pics=document.getElementById('pic');

var lists=document.getElementById('list').getElementsByTagName('li');

var point_l=document.getElementById('bar_left');

var point_r=document.getElementById('bar_right');

var index=0;

var counter=null;

function change(){//计时器

counter=setInterval(function(){

index++;

if(index===lists.length){

index=0;

}

img(index);

},2000)

}

change();

function img(curIndex){//切换图片

for (var i=0;i

if(curIndex===i){

lists[i].className='on';

}

else{

lists[i].className='';

}

}

index=curIndex;

pics.style.marginTop=-330*curIndex+'px';//图片上移

wrap.οnmοuseοver=function(){//鼠标放到图片上时图片停止播放

pics.style.cursor="pointer";

clearInterval(counter);//清除计时器

}

pics.οnmοuseοut=change;

}

//鼠标放到指定序号切换到指定图片

for (var i=0;i

lists[i].id=i;

lists[i].οnmοuseοver=function(){

img(this.id);

this.className='on';

}

}

//当鼠标放在箭头上时，点击箭头切换到下一张图片

point_l.οnmοusedοwn=function(){//点击左边箭头

if(index<=0){

index=lists.length;

}

img(index-1);

}

point_r.οnmοusedοwn=function(){//点击右边箭头

if (index>=lists.length-1){

index=-1;

}

img(index+1);

}

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。