JavaScript实现轮播图特效
本文实例为大家分享了JavaScript实现轮播图特效的具体代码，供大家参考，具体内容如下
功能：
1、图片会自动播放，鼠标放上面会暂停播放
2、点击左右出现的箭头可以切换到上一张/下一张图片
3、点击序号会跳转到对应图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>当当网首页轮播图-By小黑</title>
<style>
*{
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;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="pic">
<li><img src="images/dang1.jpg" alt=""></li>
<li><img src="images/dang2.jpg" alt=""></li>
<li><img src="images/dang3.jpg" alt=""></li>
<li><img src="images/dang4.jpg" alt=""></li>
<li><img src="images/dang5.jpg" alt=""></li>
<li><img src="images/dang6.jpg" alt=""></li>
<li><img src="images/dang7.jpg" alt=""></li>
<li><img src="images/dang8.jpg" alt=""></li>
</ul>
<div id="bar_left"></div>
<div id="bar_right"></div>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ol>
</div>
<div class="tex">
<ul>
<li>功能如下：</li>
<li>图片会自动播放，鼠标放上面会暂停播放</li>
<li>点击左右出现的箭头可以切换到上一张/下一张图片</li>
<li>点击序号会跳转到对应图片</li>
</ul>
</div>
<script>
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<lists.length;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.length;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);
}
</script>
</body>
</html>
效果图
精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS实现横向轮播图（中级版）
本文实例为大家分享了JS实现横向轮播图的具体代码,供大家参考,具体内容如下 描述: 轮播图,中级,横向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),解决了初级版本的点1再点5时多张图片滑动的问题,核心只有两张图在切换,加入了图片加载. 效果: 代码: js文件: /* * 工厂模式 * */ var Method=(function () { return { loadImage:function (arr,callback) { var img=new Im
-
JavaScript实现旋转木马轮播图
本文实例为大家分享了JavaScript实现旋转木马轮播图的具体代码,供大家参考,具体内容如下 html代码段 图片自己添加,或者使用本人的上传照片,拉到最下面即可看见 <div class="wrap" id="wrap"> <div class="slide" id="slide"> <ul> <li><a href="#" ><img
-
JavaScript实现PC端横向轮播图
本文实例为大家分享了JavaScript实现PC端横向轮播图的具体代码,供大家参考,具体内容如下 步骤: 第一步:先实现右侧按钮点击图片动起来: 1.每次点击图片走的距离: 2.起始位置已知,计算定时器每走一小步的距离: 第二步:判断点击按钮一次图片移动的距离,停止定时器: 第三步:左边按钮逻辑和右侧按钮几乎一致: 1.因此封装函数move(flag),函数传参是Boolean则是左右按钮方向 第四步:无缝轮播:html结构修改,在当前结构分别加第一张图和最后一张图: 1.判断图片位置,设置相应
-
js实现无缝轮播图
本文实例为大家分享了js实现轮播图的具体代码,供大家参考,具体内容如下 CSS样式: <style type="text/css"> #box{width: 1000px;height: 375px;border: 3px solid black; margin: 30px auto;position: relative;overflow: hidden;} #box .img{position: absolute;left: 0;top: 0;} #box .img im
-
JS+CSS实现3D切割轮播图
本文实例为大家分享了JS+CSS实现3D切割轮播图的具体代码,供大家参考,具体内容如下 第一步:我们首先要通过CSS来完成一个基本布局,利用 transform-style: preserve-3d设置成3D. 下面是CSS部分的代码 * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } /* 轮播图 */ .homePage { width: 800px; height: 200px; mar
-
js实现轮播图的完整代码
今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner"> <!-- 相框-->
-
原生js实现轮播图的示例代码
很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea
-
js实现自动播放匀速轮播图
本文实例为大家分享了js实现自动播放匀速轮播图的具体代码,供大家参考,具体内容如下 函数封装: ( 匀速运动函数) function animate(obj,target,step,speed){ clearInterval(obj.timer); var absStep = Math.abs(step); step = target > obj.offsetLeft ? absStep : -absStep; obj.timer = setInterval(function(){ var di
-
js实现无缝轮播图效果
本文实例为大家分享了js实现无缝轮播图的具体代码,供大家参考,具体内容如下 //Utils.js //封装 预加载图片 var Utils=(function () { return { //SSS loadImg:function (srcList,callBack) {//图片地址 回调函数 var img=new Image(); img.num=0;//初始化num为0 图片数 img.imgList=[];//存放图片 img.srcList=srcList; img.callBack
-
JavaScript实现轮播图片完整代码
本文实例为大家分享了JavaScript实现轮播图片的具体代码,供大家参考,具体内容如下 JS代码注释清晰明了,一看就懂! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播效果</title> <style> * { margin: 0; padding: 0 } .box { w