js和jquery实现图片轮播

桃扇骨 2022-06-07 03:57 264阅读 0赞

给大家分享的是使用JS和JQ两种方法分别实现相同的图片轮播特效

示例图

![Center][]

实现思路

1.首先是个外围部分（其实也就是最外边的整体wrapper)

2.接着就是你设置图片轮播的地方（也就是一个banner吧）

3.然后是一个图片组（可以用新的div 也可以直接使用 ul-->li形式）

4.然后是图片两端的左箭头和右箭头  
5.然后是一个透明背景层，放在图片底部

6.然后是一个图片描述info层，放在透明背景层的左下角（div 或 ul-->li)

7.然后是一个按钮层，用来定位图片组的index吧,放在透明背景层的右下角(div 或 ul-->li)

**html结构源码**

<div id="wrapper"> <div id="banner"> <ul class="imgList"> <li><a href="#"><img src="图片1_11.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
                <li><a href="#"><img src="图片1_13.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
                <li><a href="#"><img src="图片1_15.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
                <li><a href="#"><img src="图片1_17.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
                <li><a href="#"><img src="图片1_19.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
            </ul>
            <img src="./img/prev.png" width="20px" height="40px" id="prev">
            <img src="./img/next.png" width="20px" height="40px" id="next">
            <div class="bg"></div>  <ul class="infoList"> <li class="infoOn">puss in boots1</li>
                <li>puss in boots2</li>
                <li>puss in boots3</li>
                <li>puss in boots4</li>
                <li>puss in boots5</li>
            </ul>
            <ul class="indexList"> <li class="indexOn">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </div>

CSS思路

CSS样式部分（图片组的处理）跟淡入淡出式就不一样了 淡入淡出只需要显示或者隐藏对应序号的图片就行了，直接通过display来设定 左右切换式则是采用图片li 浮动，父层元素ul 总宽为总图片宽，并设定为有限banner宽度下隐藏超出宽度的部分 然后当想切换到某序号的图片时，则采用其ul 定位 left样式设定相应属性值实现 比如显示第一张图片初始定位left为0px, 要想显示第二张图片则需要left:-400px 处理

**CSS源码**

<style type="text/css">
        body,div,ul,li,a,img{
      margin: 0;padding: 0;}
        ul,li{
      list-style: none;}
        a{
      text-decoration: none;}
    
        #wrapper{
      position: relative;margin: 30px auto;width: 400px;height: 200px;}
        #banner{
      position:relative;width: 400px;height: 200px;overflow: hidden;}
        .imgList{
      position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
        .imgList li{
      float:left;display: inline;}
        #prev,
        #next{
      position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
        #prev{
      left: 10px;}
        #next{
      right: 10px;}
        #prev:hover,
        #next:hover{
      opacity: 0.5;filter:alpha(opacity=50);}
        .bg{
      position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
        .infoList{
      position: absolute;left: 10px;bottom: 10px;z-index: 30;}
        .infoList li{
      display: none;}
        .infoList .infoOn{
      display: inline;color: white;}
        .indexList{
      position: absolute;right: 10px;bottom: 5px;z-index: 30;}
        .indexList li{
      float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
        .indexList .indexOn{
      background: red;font-weight: bold;color: white;}
    </style>

js方式

<script type="text/javascript">
        var curIndex = 0, //当前index imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //获取图片组 imgLen = imgArr.length,
            infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //获取图片info组 indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //获取控制index组 // 定时器自动变换2.5秒每次 var autoChange = setInterval(function(){
            if(curIndex < imgLen -1){
                curIndex ++;
            }else{
                curIndex = 0;
            }
            //调用变换处理函数 changeTo(curIndex);
        },2500);
    
        //清除定时器时候的重置定时器--封装 function autoChangeAgain(){
            autoChange = setInterval(function(){
                if(curIndex < imgLen -1){
                    curIndex ++;
                }else{
                    curIndex = 0;
                }
                //调用变换处理函数 changeTo(curIndex);
            },2500);
        }
    
        //调用添加事件处理 addEvent();
    
        //给左右箭头和右下角的图片index添加事件处理 function addEvent(){
            for(var i=0;i<imgLen;i++){
                //闭包防止作用域内活动对象item的影响 (function(_i){
                    //鼠标滑过则清除定时器，并作变换处理 indexArr[_i].onmouseover = function(){
                        clearTimeout(autoChange);
                        changeTo(_i);
                        curIndex = _i;
                    };
                    //鼠标滑出则重置定时器处理 indexArr[_i].onmouseout = function(){
                        autoChangeAgain();
                    };
                })(i);
            }
    
            //给左箭头prev添加上一个事件 var prev = document.getElementById("prev");
            prev.onmouseover = function(){
                //滑入清除定时器 clearInterval(autoChange);
            };
            prev.onclick = function(){
                //根据curIndex进行上一个图片处理 curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
                changeTo(curIndex);
            };
            prev.onmouseout = function(){
                //滑出则重置定时器 autoChangeAgain();
            };
    
            //给右箭头next添加下一个事件 var next = document.getElementById("next");
            next.onmouseover = function(){
                clearInterval(autoChange);
            };
            next.onclick = function(){
                curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
                changeTo(curIndex);
            };
            next.onmouseout = function(){
                autoChangeAgain();
            };
        }
    
        //左右切换处理函数 function changeTo(num){
            //设置image var imgList = getElementsByClassName("imgList")[0];
            goLeft(imgList,num*400); //左移一定距离 //设置image 的 info var curInfo = getElementsByClassName("infoOn")[0];
            removeClass(curInfo,"infoOn");
            addClass(infoArr[num],"infoOn");
            //设置image的控制下标 index var _curIndex = getElementsByClassName("indexOn")[0];
            removeClass(_curIndex,"indexOn");
            addClass(indexArr[num],"indexOn");
        }
    
    
        //图片组相对原始左移dist px距离 function goLeft(elem,dist){
            if(dist == 400){ //第一次时设置left为0px 或者直接使用内嵌法 style="left:0;" elem.style.left = "0px";
            }
            var toLeft; //判断图片移动方向是否为左 dist = dist + parseInt(elem.style.left); //图片组相对当前移动距离 if(dist<0){
                toLeft = false;
                dist = Math.abs(dist);
            }else{
                toLeft = true;
            }
            for(var i=0;i<= dist/20;i++){ //这里设定缓慢移动，10阶每阶40px (function(_i){
                    var pos = parseInt(elem.style.left); //获取当前left setTimeout(function(){
                        pos += (toLeft)? -(_i * 20) : (_i * 20); //根据toLeft值指定图片组位置改变 //console.log(pos); elem.style.left = pos + "px";
                    },_i * 25); //每阶间隔50毫秒 })(i);
            }
        }
    
        //通过class获取节点 function getElementsByClassName(className){
            var classArr = [];
            var tags = document.getElementsByTagName('*');
            for(var item in tags){
                if(tags[item].nodeType == 1){
                    if(tags[item].getAttribute('class') == className){
                        classArr.push(tags[item]);
                    }
                }
            }
            return classArr; //返回 }
    
        // 判断obj是否有此class function hasClass(obj,cls){  //class位于单词边界 return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
        }
        //给 obj添加class function addClass(obj,cls){
            if(!this.hasClass(obj,cls)){
                obj.className += cls;
            }
        }
        //移除obj对应的class function removeClass(obj,cls){
            if(hasClass(obj,cls)){
                var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
                obj.className = obj.className.replace(reg,'');
            }
        }
    
    </script>

jQuery方式

<script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript">
        var curIndex = 0, //当前index imgLen = $(".imgList li").length; //图片总数 // 定时器自动变换2.5秒每次 var autoChange = setInterval(function(){
            if(curIndex < imgLen-1){
                curIndex ++;
            }else{
                curIndex = 0;
            }
            //调用变换处理函数 changeTo(curIndex);
        },2500);
        //左箭头滑入滑出事件处理 $("#prev").hover(function(){
            //滑入清除定时器 clearInterval(autoChange);
        },function(){
            //滑出则重置定时器 autoChangeAgain();
        });
        //左箭头点击处理 $("#prev").click(function(){
            //根据curIndex进行上一个图片处理 curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
            changeTo(curIndex);
        });
        //右箭头滑入滑出事件处理 $("#next").hover(function(){
            //滑入清除定时器 clearInterval(autoChange);
        },function(){
            //滑出则重置定时器 autoChangeAgain();
        });
        //右箭头点击处理 $("#next").click(function(){
            curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
            changeTo(curIndex);
        });
        //对右下角按钮index进行事件绑定处理等 $(".indexList").find("li").each(function(item){
            $(this).hover(function(){
                clearInterval(autoChange);
                changeTo(item);
                curIndex = item;
            },function(){
                autoChangeAgain();
            });
        });
        //清除定时器时候的重置定时器--封装 function autoChangeAgain(){
            autoChange = setInterval(function(){
                if(curIndex < imgLen-1){
                    curIndex ++;
                }else{
                    curIndex = 0;
                }
                //调用变换处理函数 changeTo(curIndex);
            },2500);
        }
        function changeTo(num){
            var goLeft = num * 400;
            $(".imgList").animate({
      left: "-" + goLeft + "px"},500);
            $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
            $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
        }
    </script>

以上两种方式都可以实现图片无限轮播，相比较而言用jQuery实现更简单一点。

[Center]: /images/20220607/74573d6aa98d48d48b6f40e02cdec1f1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，264人围观）

还没有评论，来说两句吧...

相关阅读

相关用jquery实现图片轮播

用jquery简单实现图片轮播效果，代码如下： <!DOCTYPE html> <html lang="en"> <head> <me

╰+攻爆jí腚メ/ 2023年10月09日 11:01/ 0 赞/ 68 阅读

相关 jquery实现图片自动轮播

这是自己以前实现的功能，在此和大家一起分享，以后多写博客咯，方便与大家共享知识，也为了自己可以更好的记忆。源代码： <!DOCTYPE html PUB

你的名字/ 2022年08月21日 03:15/ 0 赞/ 268 阅读

相关 jQuery 实现图片轮播

自从学习jQuery之后，简直怀疑人生了。因为，用JavaScript原生代码实现一个效果可能得用几十行代码甚至更多，而用jQuery简单的几行就轻松搞

忘是亡心i/ 2022年07月13日 11:07/ 0 赞/ 353 阅读

相关 js和jquery实现图片轮播

给大家分享的是使用JS和JQ两种方法分别实现相同的图片轮播特效示例图 ![Center][] 实现思路 1.首先是个外围部分（其实也就是最外边的整体wrappe

桃扇骨/ 2022年06月07日 03:57/ 0 赞/ 265 阅读

相关用jquery实现图片轮播

{ margin: 0; padding: 0; } ul{ list-style:

谁践踏了优雅/ 2022年06月02日 12:21/ 0 赞/ 258 阅读

相关 jQuery实现图片定时轮播

参考出处：http://www.jb51.net/article/76153.htm <!DOCTYPE html> <html> <head>

骑猪看日落/ 2022年05月29日 07:47/ 0 赞/ 272 阅读

相关 JQuery实现简单图片轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

系统管理员/ 2022年05月23日 05:13/ 0 赞/ 289 阅读

相关 jquery图片轮播

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery轮播</title> <

布满荆棘的人生/ 2022年04月22日 05:32/ 0 赞/ 359 阅读

相关 js实现图片轮播图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

偏执的太偏执、/ 2022年01月07日 10:21/ 0 赞/ 351 阅读

相关 jquery 实现图片轮播

html源码： <div class="middle_right"> <div id="lunbobox"> <div id=

水深无声/ 2021年11月23日 11:26/ 0 赞/ 434 阅读