Js图片点击切换轮播实现代码

2024-12-02 13:31:16

图片点击切换

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
      window.onload=function(){
        var btn1=document.getElementById("pre");
        var btn2=document.getElementById("next");
        var img=document.getElementById("img1");
        var imgarr=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg","images/6.jpg"];
        var index=0;
        var info=document.getElementById("pd");
          info.innerHTML="一共"+imgarr.length+"张 图片 ，当前 第"+(index+1)+"张";
        btn1.onclick=function(){
          index--;
          if(index<0){
            index=imgarr.length-1;
          }
          img.src=imgarr[index];
            info.innerHTML="一共"+imgarr.length+"张 图片 ，当前 第"+(index+1)+"张";
        };
        btn2.onclick=function(){
          index++;
          if(index>imgarr.length-1){
            index=0;
          }
          img.src=imgarr[in000dex];
          info.innerHTML="一共"+imgarr.length+"张 图片 ，当前 第"+(index+1)+"张";
        };
      };
    </script>
    <style type="text/css">
      *{
        padding: 0;
        margin:0;
      }
      .outer{
        width:640px;
        height:453px;
        margin:100px auto;

        text-align: center;
      }

    </style>
  </head>
  <body>
    <div class="outer">
      <p id="pd"></p>
      <img src="images/1.jpg" id="img1" />
      <button id="pre">上一张</button>
      <button id="next">下一张</button>

    </div>
  </body>
</html>

实现效果

轮播

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      *{
        padding:0px;
        margin: 0px;
      }

      #outer{
        position: relative;
        width:660px;
        height:425px;
        margin:50px auto ;
        background:yellow;
        padding:10px 0;
        overflow: hidden;
      }
      #imglist{
        position: absolute;
        list-style: none;
        /*
         * 设置偏移量
         *
         *
         */
        left:0px;

      }
      #imglist li{
        margin: 0 10px;
        float:left;
      }

      #navDiv{
        position: absolute;
        bottom: 15px;
        /*
         * 设置left值
         * outer宽度 640
         * navDiv宽度 30*5=125
         * 640-125=515
         * 515/2=257.5
         * left:257.5px;
         */
        left:0;

      }
      #navDiv a{
        float:left;
        width:20px;
        height:20px;
        background:#ff1;
        opacity: 0.5;
        /*兼容IE8的透明*/
        filter:alpha(opacity=50);
        margin: 0 5px;
      }
      #navDiv a:hover{
        background:red;
      }
    </style>
    <script type="text/javascript" src="tools.js"></script>
    <script type="text/javascript">

      window.onload=function(){
        var imglist=document.getElementById("imglist");
        var navDiv=document.getElementById("navDiv");
        var outer=document.getElementById("outer");
        //获取页面所有的img标签
        var imgarr=document.getElementsByTagName("img");
        //获取页面所有的A标签
        var allA=document.getElementsByTagName("a");
        //默认显示图片的索引
        var index=0;
        //设置
        allA[index].style.background="black";
        //设置ul的长度
        imglist.style.width=660*imgarr.length+"px";
        //设置navDiv的left值
        navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+"px";

        //定义一个定时器标识
        var timer;

        //点击超链接切换到指定的图片
        //为所有的超链接绑定单击响应函数
        for(var i=0;i<allA.length;i++){
          //为每一个超链接都添加一个NUM属性
          allA[i].num=i;
          //为超链接绑定单击响应函数
          allA[i].onclick=function(){
            //关闭自动切换
            clearInterval(timer);
          //获取点击超链接的索引，并将其设置为index
          index=this.num;
          //切换图片

          //imglist.style.left=index*-660+"px";

          setA();
          move(imglist,20,-660*index,"left",function(){
            //动画执行完后，再执行自动切换
             autoChange();
          }); 

          };
        }
        //自动切换图片
        autoChange();

        //创建一个方法来设置选中的A
        function setA(){

          //判断是不是最后一张照片
          if(index>=imgarr.length-1){
            index=0;

          //如果是最后一张，就把imglist移到0
          imglist.style.left=0+"px";
          }
          for(var j=0;j<allA.length;j++){
            //去掉内联样式，只剩下样式表的样式
            allA[j].style.background="";
          }

          allA[index].style.background="black";

        }; 

        function autoChange(){
          timer=setInterval(function(){
            index++;
            index%=imgarr.length;
            move(imglist,20,-660*index,"left",function(){
            setA();
            });
          },3000);
        };

      };

    </script>
  </head>
  <body>
   <!--创建一个外部的div，来作为大的容器-->
    <div id="outer">
      <!--创建一个ul，用来放置图片-->
      <ul id="imglist">
        <li>
          <img src="images/1.jpg" />
        </li>
        <li>
          <img src="images/2.jpg" />
        </li>
        <li>
          <img src="images/3.jpg" />
        </li>
        <li>
          <img src="images/4.jpg" />
        </li>
        <li>
          <img src="images/5.jpg" />
        </li>
        <li>
          <img src="images/1.jpg" />
        </li>
      </ul>
      <div id="navDiv">
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>

      </div>
    </div>
  </body>
</html>

tools.js

//动画函数
        /*参数
         * -1.obj 对象
         * -2.speed 速度
         * -3.target 执行动画的目标
         * -4.arrt 要变化的样式
         * -5.callback:回调函数 将会在动画执行完后执行
         */

        function move(obj,speed,target,arrt,callback){
          //关闭上一次定时器
            clearTimeout(obj.timer);
            //判断速度的正负值
            //如果从0向800移动则为正
            //如果从800向0移动则为负
            var current=parseInt(getStyle(obj,arrt));
            if(current>target){
              speed=-speed;
            }
            //开启一个定时器
            //为obj添加一个timer属性，用来保存它1自己的定时器的标识
            obj.timer=setInterval(function(){

            //获取原来的left值
            var oldvalue=parseInt(getStyle(obj,arrt));
            //在旧值的基础上增加
            var newvalue=oldvalue+speed;
            if(speed<0&&newvalue<target||speed>0&&newvalue>target)
            {
              newvalue=target;
            }
            obj.style[arrt]=newvalue+"px";
            //当元素到达target关闭定时器
            if(newvalue===target||newvalue===target){
            clearTimeout(obj.timer);
            //动画执行完 执行函数
            callback&&callback();
          }

        },30);
        };

实现效果

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

js图片轮播手动切换效果

利用ScrollPicLeft.js这个库实现图片的前后切换,适用于网页中的证书展示.推荐商品之类的栏目.它不像传统的marquee滚动那样,而是可以手动的去点击前后切换箭头按钮,进行图片的翻页,从而达到浏览上一张,下一张的效果. 不需要调用jquery,初始化简单,使用非常的简单,便利. 实例效果: js代码: <script type="text/javascript"> var scrollPhoto = new ScrollPicleft(); scrollPhot
原生JS实现图片轮播切换效果

首先来分析一下轮播图效果的实现原理: 1.父元素作为显示窗口,大小固定超出部分隐藏,即设置overflow:hidden; 2.子元素存放图片列表用ul,ul固定定位,参照为父元素,即父元素position:relative;ul元素position:absolute; 3.一个li即一张图片的宽度为父元素的显示宽度 4.初始时,ul的left为0,这时第一张图片即第一个li显示 5.点击下一张按钮,将整个ul左移,使第二个li对齐父元素的左边框,此时ul的left为负的一个li的宽度 6.点击
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
Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等）

在Bootstrap下载与安装后,可以在D:\Program Files\nodejs\node_modules\bootstrap\js中找到12个JS文件,这些JS文件是Bootstrap自带的12个jQuery插件,也可以在D:\Program Files\nodejs\node_modules\bootstrap\dist\js中找到bootstrap.js和bootstrap.min.js,这两个文件都包含12个jQuery插件. 在这12个jQuery插件中,最常用的有图片轮播car
javascript实现图片自动和可控的轮播切换特效

演示图: 需要引入的文件复制代码代码如下: <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/js/1/css/style.css"> <script type="text/javascript" src="http://hovertree.com/texiao/js/1/js/koala.min.1
原生js实现图片层叠轮播切换效果

本文实例介绍了js焦点图片层叠轮播切换滚动效果,分享给大家供大家参考,具体内容如下效果图: 功能描述: 自定义图片尺寸: 每隔一段时间自动滚动图片: 每次动画执行的时候改变图片的位置,宽高以及其它属性也要跟随着变化: 鼠标移上图片,显示当前图片的详细信息: 点击按钮向前向后滚动: 详细代码: html代码: <!DOCTYPE html> <!-- saved from url=(0062)http://x1.xiuimg.com/style/xiu/woxiu/v1/tpl/topi
js实现支持手机滑动切换的轮播图片效果实例

本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu
js支持键盘控制的左右切换立体式图片轮播效果代码分享

本文实例讲述了js支持键盘控制的左右切换立体式图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于javascript实现支持键盘控制的左右切换立体式图片轮播效果,特别有立体感,最重要的一点是可以利用键盘进行控制. 特性介绍: 1.轻松的改变幻灯变的宽度. 2.轻易改变下一张展示图片的数量. 3.最后一张图片会循环回到第一张图片里. 4.嵌入了Fancy查看插件,在每张图片上都能查看详细图片信息. 运行效果图:
Js图片点击切换轮播实现代码

图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload=function(){ var btn1=document.getElementById("pre"); var btn2
JS实现点击拉拽轮播图pc端移动端适配

<div class="content"> <button class="left">left</button> <button class="right">right</button> <div class="index"></div> <div class="lists"> <!--<!–widt
js实现图片点击左右轮播

这个相当于一个小框架,拿来就可以用: 1. 功能: 如上图显示: 点击左右两个button,可以实现图片向左右滚动,也可以设置在多少秒自己滚动. 2. 首先建立一个js文件,文件名为play.js(只要和HTML中的引入相同就可以了): var sina = { $: function(objName) { if (document.getElementById) { return eval('document.getElementById("' + objName + '")')
JS实现多重选项卡切换轮播图

轮播动画来提升页面的颜值和交互性能,下面我们将一起学习利用html , css和Javascript等前端开发基础知识来制作一个简单的轮播图. 轮播图简介:在一个网站的某一特定模块,通过电脑上鼠标点击或鼠标移入.手机上手指滑动后,可以分别展示不同的图片,这个模块就叫做轮播模块. (做的不好的地方欢迎各位大佬批评指正,感觉有帮助的同学麻烦给颗星星哦~) html布局部分: <div id="box"> <div class="scenery pic"
js实现点击切换和自动播放的轮播图

本文实例为大家分享了js实现点击切换和自动播放的轮播图,供大家参考,具体内容如下轮播图案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
js带缩略图的图片轮播效果代码分享

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

本文实例为大家分享了js实现点击按钮切换轮播图的具体代码,供大家参考,具体内容如下菜单区域实现划过主菜单显示子菜单轮播区域实现 1.点击图片中左右箭头,分别跳转上一张与下一张 (1)点击上一张图其实就是让一个变量进行递减,点击下一张图就是让变量递增:(控制索引最大最小值) 2.点击右下角小圆也可以进行图片的跳转 (1)通过索引让变量进行随意的修改 3.每间隔3s进行轮播图的自动切换,鼠标放在图片上清除自动切换 (1)定时器 4.鼠标放在主菜单上显示子菜单,离开子菜单消失. 放在子菜单上显示
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)

本文实例讲述了jQuery实现图片轮播效果代码.分享给大家供大家参考,具体如下: <!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"> <he
js图片轮播特效代码分享

本文实例讲述了js图片轮播特效,分享给大家供大家参考.具体如下: 这是一款基于javascript实现的图片轮播特效代码,有缩略图和标题,可以自定义标题. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js图片轮播特效代码如下 <head> <meta http-equiv="Content-Type" co

Js图片点击切换轮播实现代码

相关推荐

随机推荐