多张图片轮播和展示的几种常见效果写法

1、几张图片计时器简单轮播(jQuery)

<!DOCTYPE html>
<html>
 <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

<style type="text/css">

.banner{
    width: 100%;
    height: 350px;
    overflow: hidden;
}

.banner img{
    width:100%;
}
</style>

<div class="banner">
            <img src="images/1.jpg" alt="">
</div>
	
<script>
        var timer = null;
        clearInterval(timer)
        var n = 1;
        timer = setInterval(function () {
            $('.banner > img').attr('src', 'images/' + n++ + '.jpg')
            if (n > 3) {
                n = 1;
            }
        }, 3000)
</script>

</html>

2-1、图片向左/右滚动(jQuery)

在这里插入图片描述

<!DOCTYPE html>
<html>
 <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<style type="text/css">
#imgshow{
    position: relative;
    width:1000px;
    overflow: hidden;
}

#imgshow ul{
    display: flex;
    justify-content: flex-start;
}

#imgshow ul li {
    float: left;
    background: #ddd;
    margin:0 10px 0 0;
}

#imgshow li img{
    display: block;
    margin:0 auto;
    height:58px;
    padding:5px;
    border:1px solid #ddd
}
</style>

 <div id="imgshow">
            <ul>
                <li><img src="sky-1.jpg"></li>
		<li><img src="sky-2.jpg"></li>
		<li><img src="sky-3.jpg"></li>

            </ul>
</div>


<script type="text/javascript">
var oDiv = $('#imgshow')[0];
        var oUl = $('#imgshow>ul')[0];
        var aLi = oUl.getElementsByTagName('li')
        var closeTime = null;
        console.log(oDiv,oUl,aLi)
        console.log(aLi[0].offsetWidth);
        var index = -2;
        
        oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
        
        oUl.style.width = aLi[0].offsetWidth * aLi.length  + "px"
        if(oUl.offsetWidth < 3000){
            oUl.style.width = 3355 +'px';
        }
        
        function a() {
            if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
                oUl.style.marginLeft = 0;
            }
            if (oUl.offsetLeft > 0) {
                oUl.style.marginLeft = -oUl.offsetWidth / 2 + 'px';
            }
            oUl.style.marginLeft = oUl.offsetLeft + index + "px"
        }

        closeTime = setInterval(a, 30)

        $(oDiv).hover(function () {
            clearInterval(closeTime)
        }, function () {
            closeTime = setInterval(a, 30)
        })
</script>

</html>

2-2、箭头控制图片向左/右滚动

在这里插入图片描述

<!DOCTYPE html>
<html>
<style type="text/css">
*{margin: 0;padding: 0;}
	#div1{position: relative;border:1px solid #0ff;width:1100px; height: 180px;margin:50px auto 0;overflow: hidden;}
	#div1 ul{position: absolute;left: 0;}
	#div1 ul li{list-style: none;width:200px;float: left;padding: 10px;height: 160px;}
	#div1 ul li img{width:100%;}
</style>
<script type="text/javascript">
	window.onload=function(){
		var oDiv=document.getElementById('div1');
		var oUl=oDiv.getElementsByTagName('ul')[0];
		var aLi=oUl.getElementsByTagName('li');
		var aA=document.getElementsByTagName('a');//获取向右向左的箭头
		var timer=null;
		var iSpeed=10;
		oUl.innerHTML+=oUl.innerHTML;//定义图片可以循环播放
		oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';//定义外层ul的宽度,根据图片的个数和每个图片的宽度计算,保证总宽度是可调整的
		function fnMove(){
			if(oUl.offsetLeft<-oUl.offsetWidth/2){
				oUl.style.left=0;
			}else if(oUl.offsetLeft>0){
				oUl.style.left=-oUl.offsetWidth/2+'px';
			}//定义到边界的时候,实现无缝衔接
			oUl.style.left=oUl.offsetLeft+iSpeed+'px';
//定义图片的右边距随着速度不断不断增加,或减小,实现运动的效果
		}
		timer=setInterval(fnMove,30);
		aA[0].onclick=function(){
			iSpeed=-10;
//按下左箭头,定义向左运动
		}
		aA[1].onclick=function(){
			iSpeed=10;
//按下右箭头,定义向右运动
		}
		oDiv.onmouseover=function(){
			clearInterval(timer);
//鼠标移动到图片上,清除定时器,停止运动
		}
		oDiv.onmouseout=function(){
			timer=setInterval(fnMove,30);
//鼠标移出,重新开启定时器,重新运动
		}
	};
</script>
<body>
	<a href="javascript:;">←</a>
	<a href="javascript:;">→</a>
<div id="div1">
	<ul>
		<li><img src="sky-1.jpg"></li>
		<li><img src="sky-2.jpg"></li>
		<li><img src="sky-3.jpg"></li>
		<div style="clear: none;"></div>
	</ul>
</div>
</body>
</html>

3、图片点击箭头上/下滚动,松开即停止

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        *{margin:0;padding: 0;}
        div#miaovslide {text-align: center;}
        .wrap{width:500px;overflow: hidden; height: 700px;margin: 0 auto;position: relative;}
        .wrap img{width: 100%;}
        li{list-style: none;width: 700px;height: 344px;padding: 10px 0;}
        ul{position: absolute;top: 0;left: 0;}
    }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var oDiv=document.getElementById('miaovslide');
            var oUl=oDiv.getElementsByTagName('ul')[0];
            var aLi=oUl.getElementsByTagName('li');//获取所有的li
            var oUp=document.getElementById('up');//获取向上轮播的按钮
            var oDown=document.getElementById('down');//获取向下轮播的按钮
            var timer=null;//定义定时器
            var iSpeed=0;//定义初始速度
            oUl.innerHTML+oUl.innerHTML; //实现循环无间断的图片流
            oUp.onmousedown=function(){
                timer=setInterval(doMove,30);
                iSpeed=-5;
         //当按下向左的按钮时,设置速度为负,即向上滚动
            };
            oUp.onmouseup=function(){
                clearInterval(timer);
        //当抬起鼠标时,清除定时器
            };
            oDown.onmousedown=function(){
                iSpeed=5;
                timer=setInterval(doMove,30);
          //当鼠标按下向右的按钮时,设置速度为正,即向下滚动

            }
            oDown.onmouseup=function(){
                clearInterval(timer);
          //当鼠标抬起时,清除定时器

            }
            function doMove(){
                oUl.style.top=oUl.offsetTop+iSpeed+'px';
                if(oUl.offsetTop<-oUl.offsetHeight/2){
                    oUl.style.top='0px';
                }else if(oUl.offsetTop>0){
                    oUl.style.top=-oUl.offsetHeight/2+'px';
                }
            };
        };
        
    </script>
</head>
<body>
<div class="slide_module" id="miaovslide">
    <div id="up"><img src="images/prevup.png"></div>
    <div class="wrap">
        <ul>
            <li><img src="sky-1.jpg"></li>
		<li><img src="sky-2.jpg"></li>
		<li><img src="sky-3.jpg"></li>
		<li><img src="sky-1.jpg"></li>
        </ul>
    </div>
    <div id="down"><img src="images/nextdown.png"></div>
</div>
</body>
</html>

4-1、图片自动滚动+手动轮播(jQuery)

在这里插入图片描述

<!DOCTYPE html>
<html>
 <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<style type="text/css">
        .wrap{
    width: 100%;
    display: flex;
    margin: 15px auto;
    justify-content: space-between;
    flex-flow: row;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.wrap ul{
    width: 50%;
    overflow: hidden;
}

.wrap ul#img img{
    width: calc(100% - 10px);
    border: 1px solid #ddd;
    padding: 5px;
}
.box {
    height: 100%;
}
.inner{
    width: 500px;
    height: 300px;
    position: relative;
    overflow: hidden;
    margin:0 auto;
}
.inner img{
    width: 500px;
    height: 300px;
    vertical-align: top
}
.inner ul {
    width: 1000%;
    position: absolute;
    list-style: none;
    left:0;
    top: 0;
}
.inner li{
    float: left;

}

.inner ol {
    position: absolute;
    height: 20px;
    right: 20px;
    bottom: 20px;
    text-align: center;
    padding: 5px;
}
.inner ol li{
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    background-color: #fff;
    margin: 5px;
    cursor: pointer;

}
.inner ol .current{
    background-color: red;
}
#arr{
    display: none;
}
#arr span{
    width: 40px;
    height: 40px;
    position: absolute;
    left: 5px;
    top: 50%;
    margin-top: -20px;
    background: #fff;
    cursor: pointer;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    font-family: '黑体';
    font-size: 30px;
    color: #000;
    opacity: 0.5;
    border: 1px solid #fff;
}
#arr #right {
    right: 5px;
    left: auto;
}

</style>
	
<div class="wrap">
            <div class="box" id="box">
                <div class="inner">
                    <ul>
                        <li><a href="#" target="_blank" title=""><img src="images/hend1.jpg" alt="hend1"/></a></li>
                        <li><a href="#" target="_blank" title=''><img src="images/hend2.jpg" alt="hend2" /></a></li>
                        <li><a href="#" target="_blank" title=""><img src="images/hend3.jpg" alt="hend3"/></a></li>
                    </ul>

                    <ol class="bar"></ol>
                    
                    <div id="arr">
                        <span id="left">  < </span> 
                        <span id="right"> ></span>
                    </div>
                    
                </div>
          </div>
</div>
	
<script type="text/javascript">
        /**
        *
        * @param id  传入元素的id
        * @returns {HTMLElement | null}  返回标签对象,方便获取元素
        */
        function my$(id) {
            return document.getElementById(id);
        }

        //获取各元素,方便操作
        var box = my$("box");
        var inner = box.children[0];
        var ulObj = inner.children[0];
        var list = ulObj.children;
        var olObj = inner.children[1];
        var arr = my$("arr");
        var imgWidth = inner.offsetWidth;
        var right = my$("right");
        var pic = 0;
        //根据li个数,创建小按钮
        for (var i = 0; i < list.length; i++) {
            var liObj = document.createElement("li");

            olObj.appendChild(liObj);
            liObj.innerText = (i + 1);
            liObj.setAttribute("index", i);

            //为按钮注册mouseover事件
            liObj.onmouseover = function () {
                //先清除所有按钮的样式

                for (var j = 0; j < olObj.children.length; j++) {
                    olObj.children[j].removeAttribute("class");
                }
                this.className = "current";
                pic = this.getAttribute("index");
                animate(ulObj, -pic * imgWidth);
            }

        }


        //设置ol中第一个li有背景颜色
        olObj.children[0].className = "current";
        //克隆一个ul中第一个li,加入到ul中的最后=====克隆
        ulObj.appendChild(ulObj.children[0].cloneNode(true));

        var timeId = setInterval(onmouseclickHandle, 2000);
        //左右焦点实现点击切换图片功能
        box.onmouseover = function () {
            arr.style.display = "block";
            clearInterval(timeId);
        };
        box.onmouseout = function () {
            arr.style.display = "none";
            timeId = setInterval(onmouseclickHandle, 2000);
        };

        right.onclick = onmouseclickHandle;
        function onmouseclickHandle() {
            //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
            //所以,如果用户再次点击按钮,用户应该看到第二个图片
            if (pic == list.length - 1) {
                //如何从第6个图,跳转到第一个图
                pic = 0;//先设置pic=0
                ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
            }
            pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
            animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
            //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
            if (pic == list.length - 1) {
                //第五个按钮颜色干掉
                olObj.children[olObj.children.length - 1].className = "";
                //第一个按钮颜色设置上
                olObj.children[0].className = "current";
            } else {
                //干掉所有的小按钮的背景颜色
                for (var i = 0; i < olObj.children.length; i++) {
                    olObj.children[i].removeAttribute("class");
                }
                olObj.children[pic].className = "current";
            }
        }
        left.onclick = function () {
            if (pic == 0) {
                pic = list.length - 1;
                ulObj.style.left = -pic * imgWidth + "px";
            }
            pic--;
            animate(ulObj, -pic * imgWidth);
            for (var i = 0; i < olObj.children.length; i++) {
                olObj.children[i].removeAttribute("class");
            }
            //当前的pic索引对应的按钮设置颜色
            olObj.children[pic].className = "current";
        };

        //设置任意的一个元素,移动到指定的目标位置
        function animate(element, target) {
            clearInterval(element.timeId);
            //定时器的id值存储到对象的一个属性中
            element.timeId = setInterval(function () {
                //获取元素的当前的位置,数字类型
                var current = element.offsetLeft;
                //每次移动的距离
                var step = 10;
                step = current < target ? step : -step;
                //当前移动到位置
                current += step;
                if (Math.abs(current - target) > Math.abs(step)) {
                    element.style.left = current + "px";
                } else {
                    //清理定时器
                    clearInterval(element.timeId);
                    //直接到达目标
                    element.style.left = target + "px";
                }
            }, 10);
        }
</script>

</html>

4-2、图片自动轮播+手动轮播(需要jQuery包)

在这里插入图片描述

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"><style>  
* {  
    padding:0;  
    margin:0;  
}  
ul {  
    list-style:none;  
}  
.out {  
    width:350px;  
    height:245px;  
    margin:50px auto;  
    position:relative;  
}  
.img li {  
    position:absolute;  
    top:0px;  
    left:0px;  
    display:none  
}  
.out .num {  
    position:absolute;  
    bottom:0px;  
    left:0px;  
    font-size:0px;  
    text-align:center;  
    width:100%;  
}  
.num li {  
    width:20px;  
    height:20px;  
    background:#666666;  
    color:#FFFFFF;  
    text-align:center;  
    line-height:20px;  
    display:inline-block;  
    font-size:16px;  
    border-radius:50%;  
    margin-right:10px;  
    cursor:pointer;  
}  
.out .btn {  
    position:absolute;  
    top:50%;  
    margin-top:-30px;  
    width:30px;  
    height:60px;  
    background:rgba(0,0,0,0.5);  
    color:#FFFFFF;  
    text-align:center;  
    line-height:60px;  
    font-size:40px;  
    display:none;  
    cursor:pointer;  
}  
.out .num li.active-1 {  
    background:#AA0000;  
}  
.out:hover .btn {  
    display:block  
}  
.out .left {  
    left:0px;  
}  
.out .right {  
    right:0px;  
}  
</style>  
</head>  
<body>  
<div class="out">   
  <!--上面-->  
  <ul class="img">  
    <li><a href=""><img src="sky-1.jpg" width="350" height="245" alt=""></a></li>  
    <li><a href=""><img src="sky-2.jpg" width="350" height="245" alt=""></a></li>  
    <li><a href=""><img src="sky-3.jpg" width="350" height="245" alt=""></a></li>	
	</ul>  
  <!--下面-->  
  <ul class="num">  
  </ul>  
  <div class="left btn"><</div>  
  <div class="right btn">></div>  
</div>   
<script>  
$(function(){  
//下方for循环  
    var size=$(".img li").size()  
    for(var i=1; i<=size; i++){  
        var li="<li>"+i+"</li>";  
        $(".num").append(li)  
        }  
/*size  获取当前元素个数*/  
     var speed = 1000;
//手动控制轮播  
$(".img li").eq(0).show()  
$(".num li").eq(0).addClass('active-1')  
/*mouseover  可以改成点击事件  click*/  
$(".num li").mouseover(function(){  
$(this).addClass('active-1').siblings('li').removeClass('active-1')  
var index=$(this).index()  /*index  当前元素的意思索引值*/  
i=index; //i值和自动轮播值是相同的  
$(".img li").eq(index).stop(true).show().siblings().stop(true).hide()      /*eq 0开始*/  
    });  
      
//自动控制轮播  
 var i=0;  
 var t=setInterval(move,1500)   //定时器  
    //右  
    function move(){  
     i++;  
     if(i==size){i=0;}  
     $(".num li").eq(i).addClass('active-1').siblings('li').removeClass('active-1');  
     $(".img li").eq(i).stop(true).show().siblings().stop(true).hide();  
     };  
     //左  
    function moveL(){  
     i--;  
     if(i==-1){i=size-1;}  
     $(".num li").eq(i).addClass('active-1').siblings('li').removeClass('active-1');  
     $(".img li").eq(i).stop(true).show().siblings().stop(true).hide();  
     };   
//自动轮播鼠标经过移入和移除  
    $(".out").hover(function(){  
        clearInterval(t)  
        },function(){  
            t=setInterval(move,1500)  
            });  
              
//左右按钮  
    $(".out .left").click(function(){  
        moveL()  
        })  
    $(".out .right").click(function(){  
        move()  
        })  
});    
</script>  
</body>  
</html>  

5、照片墙(transform)


鼠标滑到图片上时图片呈摆正略放大状态
在这里插入图片描述

<!DOCTYPE html>
<html>
<style type="text/css">
.images{
    width: 960px;
    margin: 60px 60px 10px 40px;
    position: absolute;
}

.pic{
    width: 160px;
}

.images img:hover{
    box-shadow: 15px 15px 20px rgba(50,50,50,0.4);
    transform:rotate(0deg) scale(2.20);
    -webkit-transform:rotate(0deg) scale(1.20);
    z-index: 1000;
}

.images img{
    padding: 10px 10px 15px;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 3px rgba(50,50,50,0.4);
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
    position: absolute;
    z-index: 1;
}

.pic1{
    left: 400px;
    top: 0;
    transform:rotate(-5deg);
    -webkit-transform:rotate(-5deg);
}

.pic2{
    left: 200px;
    top: 10px;
    transform:rotate(-20deg);
    -webkit-transform:rotate(-20deg);
}
.pic3{
    top: 66px;
    right: 240px;
    transform:rotate(20deg);
    -webkit-transform:rotate(20deg);
}

.pic4{
    top: 100px;
    left: 300px;
    transform:rotate(-10deg);
    -webkit-transform:rotate(-10deg);
}
</style>
<div class="images">
    <img class="pic pic1" src="sky-1.jpg">
    <img class="pic pic2" src="sky-2.jpg">
    <img class="pic pic3" src="sky-3.jpg">
    <img class="pic pic4" src="sky-1.jpg">
</div>
</html>

6、六边形图片(transform)

在这里插入图片描述

<!DOCTYPE html>
<html>
<style type="text/css">
*{margin: 0;padding: 0;}
.clear{clear: both;}
body{background: #fff;}
.container{margin: 100px auto;}
<!--show01的旋转角度设a,sin(a)=height/width -->
.con-show01{width: 250px;height: 250px;float: left;margin-left: 120px;overflow: hidden;transform:rotate(45deg);}
<!--show02的旋转角度:-(90+a) -->
.con-show02{width: 100%;height: 100%;overflow: hidden;transform:rotate(-135deg);}
<!--show03的旋转角度图片使摆正即可 -->
.con-show03{width: 100%;height: 100%;overflow: hidden;transform:rotate(90deg);position: relative;background: pink;}
.con-show03 > div{width: 100%;height: 100%;position: absolute;top: 0;left: 0;opacity: 0;line-height: 250px;text-align: center;color: #fff;cursor: pointer;background: url(../images/a.png);transition: opacity 0.3s;}
.con-show03:hover > div{opacity: 1;}
.margin-left{margin-left: 305px;}
.margin-top{margin-top: -70px;}

.con-show03>img{width:100%;height:100%;}
</style>
<section class="container">   
      <div class="con-show01">
        <div class="con-show02">
          <div class="con-show03 bg01">
            <img src="sky-1.jpg">
            <div>123</div>
          </div>
        </div>
      </div>
      <div class="con-show01">
        <div class="con-show02">
          <div class="con-show03 bg02">
            <img src="sky-2.jpg">
            <div>123</div>
          </div>
        </div>
      </div>
 
      
 
      <div class="clear"></div>
 
      <div class="con-show01 margin-left margin-top" >
        <div class="con-show02">
          <div class="con-show03 bg04">
            <img src="sky-3.jpg">
            <div>123</div>
          </div>
        </div>
      </div>
 
      <div class="con-show01 margin-top">
        <div class="con-show02">
          <div class="con-show03">
            <img src="sky-1.jpg">
            <div>123</div>
          </div>
        </div>
      </div>           
    </section>
</html>

7、点击左右图片手动轮播(需要jQuery包)

点击左边的图,三张图往右移;点击右边的图,三张图往左移;(写了两个这样的轮播)
在这里插入图片描述

<!DOCTYPE html>
<html>
 <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

<style type="text/css">

div[class^="gsdtimg"]{
	float:left;
    width: 25%;
    height: 150px;
    overflow: hidden;
	margin-right:2%;
}

div[class="gsdtimgtwo"]{
	height:250px;
}

div[class^="gsdtimg"] img{
    width:100%;
}
</style>

<div class = "1" >

<div class="gsdtimgone" id="gsdtimgone" onclick = "gsdtimgoneEvent(this,myimgs)">
            <img id="oneimg" src="images_dl/gsdt1-2.JPG" alt="">
</div>

<div class="gsdtimgtwo"  id="gsdtimgtwo" width="40%">
            <img id="twoimg" src="images_dl/gsdt1-3.jpg" alt="">
</div>

<div class="gsdtimgthree" id="gsdtimgthree" onclick = "gsdtimgthreeEvent(this,myimgs)">
            <img id="threeimg" src="images_dl/gsdt1-4.JPG" alt="">
</div>

</div>
<div class="clear" style="clear:both;"></div>
<div class = "1" >

<div class="gsdtimgone" id="gsdtimgone" onclick = "gsdtimgoneEvent(this,myimgs2)">
            <img id="oneimg" src="images_dl/gsdt2-2.JPG" alt="">
</div>

<div class="gsdtimgtwo"  id="gsdtimgtwo" width="40%">
            <img id="twoimg" src="images_dl/gsdt2-3.JPG" alt="">
</div>

<div class="gsdtimgthree" id="gsdtimgthree" onclick = "gsdtimgthreeEvent(this,myimgs2)">
            <img id="threeimg" src="images_dl/gsdt2-4.jpg" alt="">
</div>

</div>

<script>
		//要求图片命名按照一定的格式
        var myimgs=new Array("this is nothing","gsdt1-1.JPG","gsdt1-2.jpg","gsdt1-3.JPG","gsdt1-4.JPG")
		var myimgs2=new Array("this is nothing","gsdt2-1.JPG","gsdt2-2.JPG","gsdt2-3.JPG","gsdt2-4.jpg")
		//实现数字的循环
		function realn(n){
			if (n < 1 ){
				n = 4;
			}
			if (n > 4 ){
				n = 1;
			}
			else{
				n = n;
			}
			return n;
		}
		//点击左边div,实现整体往右轮播
		function gsdtimgoneEvent(oDivv,myimgs){ 
			var oDiv = oDivv;
			var selfimg1 = oDiv.children[0];
			var selfimg2 = oDiv.parentNode.children[1].children[0];
			var selfimg3 = oDiv.parentNode.children[2].children[0];
			var src = selfimg1.getAttribute("src");
			//获取被点击的时候是第几张图片
			var m = src.charAt(16);
			//字符转数字,下面需加减运算
			n = parseInt(m);
			n = realn(n);
            selfimg1.setAttribute('src', 'images_dl/' + myimgs[realn(n - 1)] );
			
			selfimg2.setAttribute('src', 'images_dl/' + myimgs[realn(n)] );
			
			selfimg3.setAttribute('src', 'images_dl/' + myimgs[realn(n + 1)] );
        };
		//点击右边div,实现整体往左轮播
		function gsdtimgthreeEvent(oDivv,myimgs){
			var oDiv = oDivv;
			var selfimg1 = oDiv.children[0];
			var selfimg2 = oDiv.parentNode.children[1].children[0];
			var selfimg3 = oDiv.parentNode.children[0].children[0];
			var src = selfimg1.getAttribute("src");
			var m = src.charAt(16);
			n = parseInt(m);
			n = realn(n);
            selfimg1.setAttribute('src', 'images_dl/' + myimgs[realn(n + 1)] );
			
			selfimg2.setAttribute('src', 'images_dl/' + myimgs[realn(n)] );
			
			selfimg3.setAttribute('src', 'images_dl/' + myimgs[realn(n - 1)] );
        };	
</script>


</html>


  • 12
    点赞
  • 95
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值