js图片轮播手动切换特效

先瞄一眼js图片轮播手动切换特效图：

代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
* {padding:0px;margin:0px;}
#content {width:400px;height:400px;border:10px solid #ccc;position:absolute;top:50%;left:50%;margin-top:-200px;margin-left:-200px;}
#top,#bottom {width:400px;height:40px;background:#000;color:#fff;filter(opacity:80);opacity:0.8;text-align:center;line-height:40px;position:absolute;}
#top {top:0;}
#bottom {bottom:0;}
#prev,#next {position:absolute;top:50%;margin-top:-20px;width:40px;height:40px;text-align:center;line-height:40px;text-decoration:none;background:#000;color:#fff;font-size:30px;font-weight:bold;}
#prev {left:10px;}
#next {right:10px;}
#img1 {width:400px;height:400px;}
#tab {position:absolute;width:400px;height:100px;margin-top:-90px;text-align:center;}
#info {margin-top:10px;font-size:20px;}
#tab input {width:70px;height:30px;}
.active { background : yellow;}
</style>
</head>

<body>
<div id="content">
 <div id="tab">
  <input id="loopBtn" type="button" value="循环切换" />
  <input id="orderBtn" type="button" value="顺序切换" />
  <p id="info">图片顺序加载中......</p>
 </div>
 <p id="top">图片数量加载中......</p>
 <a id="prev" href="javascript:;"><</a>
 <a id="next" href="javascript:;">></a>
 <p id="bottom">图片信息加载中.....</p>
 <img id="img1" />
</div>
<script>
window.onload = function () {
 var top = $('top'), bottom = $('bottom'),
  prev = $('prev'), next = $('next'),
  img = $('img1'), loopBtn = $('loopBtn'),
  orderBtn = $('orderBtn'), info = $('info'), tab = $('tab');
 // 切换图片顺序的按钮
 var btns = tab.getElementsByTagName('input');
 // 第几张图片
 var num = 0;
 // 图片url
 var picSrc = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg'];
 // 图片的数量
 var picLen = picSrc.length;
 // 图片信息
 var picInfo = ['高冷美女','终结者','性感美女','妖娆美女'];
 // 循环方式
 var loopMethod = 1; // 1,循环切换；0，,顺序切换
 // 循环信息
 var loopInfo = ['图片可以从最后一张转到第一种切换','图片只能切换到最后一张或者第一张'];
 changePic();
 // 循环切换
 loopBtn.onclick = function () {
  loopMethod = 1;
  changeOrder();
 }
 // 顺序切换
 orderBtn.onclick = function () {
  loopMethod = 0;
  changeOrder();
 }
 // 上一张
 prev.onclick = function () {
  num--;
  // 1,循环切换；0，,顺序切换
  if(loopMethod) {
   if (num === -1) num = picLen - 1;
   changePic();
  } else {
   if (num === -1) {
    num = 0;
    alert('已经是第一张图片啦!');
   }
   changePic();
  }
 }
 // 下一张
 next.onclick = function () {
  num++;
  // 1,循环切换；0，,顺序切换
  if(loopMethod) {
   if (num === picLen) num = 0;
   changePic();
  } else {
   if (num === picLen) {
    num = picLen - 1;
    alert('已经是最后一张图片啦!');
   }
   changePic();
  }
 }
 // 切换顺序
 function changeOrder () {
  // 情况按钮的高亮
  for ( var i = 0, len = btns.length; i < len;i++) {
   btns[i].className = '';
  }
  // 循环切换 1，循环；0，顺序
  info.innerHTML = loopInfo[1 - loopMethod];
  loopMethod === 1 ?
   loopBtn.className = 'active' :
   orderBtn.className = 'active';
 }
 // 切换图片
 function changePic () {
  changeOrder();
  top.innerHTML = num + 1 + ' / ' + picLen;
  bottom.innerHTML = picInfo[num];
  img.src = picSrc[num];
 }
 // id选择器
 function $(id) { return document.getElementById(id);}
}
</script>
</body>
</html>

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

赞 (0)

相关推荐

  • js 图片轮播(5张图片)

    演示地址:http://img.jb51.net/online/picPlayer/picplay.htm 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199

  • 原生js轮播（仿慕课网）

    原生js轮播（仿慕课网）

    效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <style> *{margin:0;padding:0;border:0;} a{text-decoration:none;color:#fff;font-size:40px;lin

  • 基于JavaScript实现带缩略图的轮播效果

    基于JavaScript实现带缩略图的轮播效果

    先瞄一眼js轮播效果图 代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{padding:0;margin:0;} #content {width:400px;height:500px;margin:10px auto;position:relative;border:1px

  • 原生JS实现匀速图片轮播动画

    原生JS实现匀速图片轮播动画

    JS实现轮播图实现结果图: 需求: 1 根据图片动态添加小圆点 2 目标移动到小圆点轮播图片 3 鼠标离开图片,定时轮播图片:鼠标在图片上时暂停 4  左右两侧可点击轮播图片 一.布局部分 html部分 <div class="w main clearfix"><!--主内容部分开始--> <div class="slider"><!--轮播图部分开始--> <ul class="imgs"

  • 原生js实现无限循环轮播图效果

    知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张 也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值 //以偏移的距离来判断是否跳回第一张和最后一张 if(newLeft>-600){ list.style.left=-3000+"px

  • js 基础篇必看(点击事件轮播图的简单实现)

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首先,我们可以在body中添加一个div并且将宽度设置成百分比(自适应页面),比例具体是相对谁的百分比的话按需求来做,在这里不多说.将图片放入到div 中. 其次,样式部分将img标签全部设置成absolute:以方便定位 最后,js部分说说逻辑,定义两个空数组,第一个数组用来保存初始的显示在页面的图

  • 原生js实现无缝轮播图效果

    话不多说,请看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝轮播图-原生js封装</title> <link rel="shortcut icon" href="../public/image/favicon.ico" type="ima

  • JavaScript实现大图轮播效果

    本文实例为大家分享了js图片轮播效果的具体代码,供大家参考,具体内容如下 <head> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>大图轮播</title> <style type="text/css"> * { margin: 0px; padding

  • 很棒的一组js图片轮播特效

    很棒的一组js图片轮播特效

    大家经常在网页中使用轮播效果,本文为大家分享的是一组图片轮播特效,希望大家喜欢 先看一眼效果图: 代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{padding:0;margin:0;} #content{width:550px;height:300px;margin:50

  • 利用AngularJs实现京东首页轮播图效果

    利用AngularJs实现京东首页轮播图效果

    先来看看效果图 其实写一个轮播图还是蛮简单的,我想了两种种方法,来实现轮播图(实际上细分是5种,但是其中两种是操作dom原生,三种是利用AngularJs的动画,所有归为两大类),等我写出来,大家好好理解一下就好. 那我先写一种,第一种是不使用angularjs的动画模块,只使用指令来完成动画的切换.在这里面就是在指令里操作dom元素,超级easy. 示例代码 <!DOCTYPE html> <html lang="en" ng-app="lunbo&quo

随机推荐