基于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 solid #000;color:red;font-size:20px;}
#title, #bottom{position:absolute;width:400px;height:30px;line-height:30px;text-align:center;font-size:20px;background:#f1f1f1;}
#bottom{bottom:0;cursor:pointer;}
#bottom span{display:inline-block;width:15px;height:15px;border-radius:15px;background:#000;text-align:center;line-height:15px;position:relative;}
#bottom span.active{background: #FFFF33;}
#bottom span div {position:absolute;width:110px;height:110px;top:-125px;left:-46px;display:none;}
#bottom span div:after{content:'';position:absolute;left:49px;bottom:-12px;border-top:7px solid #fff;border-right:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid transparent;}
#bottom span img {width:100px;height:100px;border:5px solid #fff;}
#left, #right{position:absolute;width:60px;height:60px;border-radius:60px;line-height:60px;font-size:60px;background:#FFFF66;font-weight:bold;text-align:center;top:50%;margin-top:-25px;color:#fff;cursor:pointer;filter(opacity:70);opacity:0.7;}
#left:hover,#right:hover{filter(opacity:100);opacity:1;}
#left{left:0px;}
#right{right:0px;}
#img{width:400px;height:500px;}
</style>
<script>
window.onload = function () {
 var bottom = $('bottom'),title = $('title'),
  img = $('img'),left = $('left'),right = $('right');
 var aSpan = bottom.getElementsByTagName('span');
 var aDiv = bottom.getElementsByTagName('div');
 var arr = ['图片一','图片二','图片三', '图片四'];
 var num = 0;
 // 初始化
 picTab();

 // 点击下一张
 right.onclick = function () {
  if (num === aDiv.length - 1) num = -1;
  num++;
  picTab();
 }

 // 点击上一张
 left.onclick = function () {
  if (num === 0) num = aDiv.length;
  num--;
  picTab();
 }

 function picTab() {
  title.innerHTML = arr[num];
  img.src = 'img/' + (num + 1) + '.png';
  for ( var i = 0; i < aSpan.length; i++ ) {
   aSpan[i].className = '';
  }
  aSpan[num].className = 'active';
 }
 // 鼠标移入移出显示缩略图
 for ( var i = 0; i < aSpan.length; i++ ) {
  aSpan[i].index = i;
  aSpan[i].onmouseover = function () {
   aDiv[this.index].style.display = 'block';
  }
  aSpan[i].onmouseout = function () {
   aDiv[this.index].style.display = 'none';
  }
  aSpan[i].onclick = function () {
   num = this.index;
   picTab();
  }
 }
 function $(id) { return document.getElementById(id);}
}
</script>
</head>
<body>
<div id="content">
 <div id="title">带缩略图的轮播</div>
 <div id="left"><</div>
 <div id="right">></div>
 <div id="bottom">
  <span><div><img src="img/1.png"/></div></span>
  <span><div><img src="img/2.png"/></div></span>
  <span><div><img src="img/3.png"/></div></span>
  <span><div><img src="img/4.png"/></div></span>
 </div>
 <img src="" id="img"/>
</div>
</body>
</html>

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

赞 (0)

相关推荐

  • js带缩略图的图片轮播效果代码分享

    js带缩略图的图片轮播效果代码分享

    本文实例讲述了js带缩略图的图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于javaScript实现带缩略图的图片轮播特效代码,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/jb51.net.css" rel="stylesheet" type=&q

  • js仿土豆网带缩略图的焦点图片切换效果实现方法

    本文实例讲述了js仿土豆网带缩略图的焦点图片切换效果实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/1999/

  • js生成缩略图后上传并利用canvas重绘

    一般在处理图片上传时,通常的逻辑都是将源图片上传到服务器端,再由服务器端的语言进行缩放大小的操作. 此种模式一般可以满足大部分的需求,但当我们所需要的图片仅仅是一个符合规定大小的源图片的缩略图,再使用此种模式,将是一种浪费服务端资源以及带宽的方式,故我们考虑在浏览器端生成小图后再进行上传操作. //以下为源代码 复制代码 代码如下: function drawCanvasImage(obj,width, callback){ var $canvas = $('<canvas></canv

  • 通过AngularJS实现图片上传及缩略图展示示例

    通过AngularJS实现图片上传及缩略图展示示例

    通过AngularJS实现图片上传及缩略图展示示例,废话不多说了,具体如下: 从项目中截出的代码 HTML部分: <section> <img src="image/user-tuijian/tuijian_banner.png" /> <div> <form ng-submit="submit_form()"> <input type="text" name="aaa"

  • 图片上传即时显示缩略图的js代码

    <script language="javascript" type="text/javascript"> var allowExt = ['jpg', 'gif', 'bmp', 'png', 'jpeg']; var preivew = function(file, container){ try{ var pic = new Picture(file, container); }catch(e){ alert(e); } } //缩略图类定义 va

  • JS实现鼠标移动到缩略图显示大图的图片放大效果

    JS实现鼠标移动到缩略图显示大图的图片放大效果

    一个网页上用的图片提示效果,当把鼠标移动到图片缩略图的时候,会显示图片大图,似乎在网上这是个很常见的效果,实现方法也比较多,有人用CSS,有人用JavaScript,有人用jQuery,总之,选择自己习惯的方式去实现,就是最棒的. 图片提示效果 body{margin:0 ;padding:40px;line-height:180%;} img{border:none;} ul,li{margin:0 ;padding:0;} li{list-style:none;display:inline;

  • js实现产品缩略图效果

    js实现产品缩略图效果

    效果图: 代码如下: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href=&qu

  • JS图片切换的具体方法(带缩略图版)

    复制代码 代码如下: <!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/1999/xhtml"> <head> <meta http-equiv=&qu

  • 基于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

  • 基于JavaScript实现仿京东图片轮播效果

    js实现仿京东图片轮播效果,当鼠标划在窗口上面停止计时器,鼠标离开窗口,开启计时器,鼠标划在页签上面,停止计时器,手动切换,通过定义计时器封装函数run,封装函数changeOption,实现此效果,代码简单易懂,需要的小伙伴直接复制拷贝转走吧. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document<

  • JavaScript实现六种网页图片轮播效果详解

    JavaScript实现六种网页图片轮播效果详解

    目录 1.当鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2.动态生成小圆圈 3.点击小圆圈,小圆圈变色 4.点击小圆圈滚动图片 5.点击右侧按钮一次,就让图片滚动一张. 6.点击右侧按钮, 小圆圈跟随变化 7.左侧按钮功能制作 8.自动播放功能 在网页中,我们经常会看到各种轮播图的效果,它们到底是怎样实现的呢?今天,我们就一起来看一下!首先,我们需要准备若干张图片,在这里我准备了五张图片. 功能需求: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 点击右侧按钮一次,图片往左播放

  • JavaScript模拟实现网易云轮播效果

    JavaScript模拟实现网易云轮播效果

    1.div宽度直接与浏览器界面宽度一致:width:100% 2.怎么让图片在一个绝对定位的盒子中垂直居中显示? 继续加绝对定位.然后改变top,和left的值 3.采用外置的js文件,需要等到页面加载完毕:window.οnlοad=function(){} 4.添加和移除元素的类名:先获取DOM对象,然后通过classList.add('current')(里面不需要加.)和classList.remove()即可添加类型和删除类名. 5.事件委托: 比如有100个li,每个li都有相同的c

  • 基于javascript实现样式清新图片轮播特效

    基于javascript实现样式清新图片轮播特效

    本文实例为大家分享了javascript实现图片轮播特效,供大家参考,具体内容如下 一.实现效果 如上图: 1.图片自动依次轮换,每轮换到一张图片,下面对应的小图标出现红色边框,并显示对应的图片名称 2.鼠标放到大图片上面的时,图片停止轮换,一直显示当前图片:鼠标移开后图片继续轮换 3.鼠标移到小图标上时,大图片区域会显示对应的大图:鼠标移开则从当前图片开始继续轮换 二.代码 <!DOCTYPE html> <html> <head lang="en"&g

  • jQuery左右滚动支持图片放大缩略图图片轮播代码分享

    jQuery左右滚动支持图片放大缩略图图片轮播代码分享

    本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果,常用的jQuery图片左右轮播效果,同时支持底部缩略图左右滚动展示,点击大图片后支持放大效果. 运行效果图:                                     -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大

  • jQuery幻灯片带缩略图轮播效果代码分享

    jQuery幻灯片带缩略图轮播效果代码分享

    这是一款基于jquery实现的底部带缩略图的幻灯片切换特效代码,幻灯片可以点击下方的缩略图切换,用户还可以自定义对应幻灯片的标题与文字说明,是一款非常实用的幻灯片特效源码. 为大家分享的jQuery幻灯片带缩略图轮播代码如下 <html> <head> <title>带缩略图的jQuery幻灯片轮播效果</title> <link href="css/css.css" rel="stylesheet" type=

  • Android实现基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView控件

    Android实现基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView控件

    最近用到需要无限轮播自动播放的轮播轮播图,网上感觉都有这样那样的问题,于是自己写了一个通用的控件CarouselFigureView. 特点: 1.可以轮播view可以自己定义,不一定是要是ImageView2.指示器默认显示,但是可以隐藏3.可以设置指示器的颜色.间距.大小 4.有基础的可以自己修改代码改变指示器位置,这个应该不难5.可以自己开启和关闭自动轮播,开启轮播的时候可以设置轮播时间间隔,默认3000毫秒 我们先来看看效果图: 然后来看看使用代码 xml代码 <?xml version

  • JavaScript实现移动端带transition动画的轮播效果

    JavaScript实现轮播的方式多种多样,桌面的移动端的实现方式都是大同小异的,具体的核心实现原理不外乎下面几个要点.即: 1. 确定播放方向.一般都是横向轮播,当然不排除纵向的需求可能.当然还有反向播放情况,这个自定义. 2. 对第一张图片的处理.如果当前是第一张了,那么如果继续往前面(就是你播放方向的反向)滑动,那么就会出现留白(如果你允许继续滑动的话,不过不允许滑动也没有啥意思了,除非你想来回轮播,这个我在另一篇用jQuery也说明过),此时应该让你的左边显示应该轮播图片的最后一张,实现

随机推荐