zoukankan      html  css  js  c++  java
  • 带缩略图图片切换

    HTML

    <div class="box">
    	<img src=""/>
    	<a href="javascript:;"><</a>
    	<a href="javascript:;">></a>
    	<ul>
    	</ul>
    </div>
    

    CSS

    *{
    	margin: 0;
    	padding: 0;
    }
    .box{
    	 400px;
    	height: 500px;
    	position: relative;
    	margin: 20px auto 0;
    }
    img{
    	 100%;
    	height: 200px;
    }
    a{
    	position: absolute;
    	top:70px;
    	 40px;
    	height: 40px;
    	text-decoration: none;
    	background: #000;
    	opacity: .4;
    	color: #fff;
    	text-align: center;
    	line-height: 40px;
    	border-radius: 50%;
    	font-size: 26px;
    	font-weight: bold;
    }
    a:nth-of-type(2){
    	right: 0;
    }
    a:hover{
    	opacity: 0.8;
    }
    ul{
    	text-align: center;
    }
    li{
    	list-style: none;
    	display: inline-block;
    	 50px;
    	height: 10px;
    	background: #ccc;
    	margin: 0 5px;
    	position: relative;
    }
    li span{
    	 80px;
    	height: 50px;
    	position: absolute;
    	left: 50%;
    	margin-left: -40px;
    	top: -60px;
    	border: 2px solid #5C5C5C;
    	display: none;
    }
    li span:after{
    	position: absolute;
    	 0;
    	height: 0;
    	content: "";
    	border-top: 10px solid #5C5C5C;
    	border-left: 8px solid transparent;
    	border-right: 8px solid transparent;
    	left: 50%;
    	margin-left: -5px;
    	bottom: -10px;
    }
    li span img{
    	 100%;
    	height: 100%;
    }
    li:hover{
    	background: #5C5C5C;
    }
    li.act{
    	background: orangered;
    }
    

    JS

    var imgArry=["https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510739103582&di=0939369c1f3121bd67302a3b1c9f6f75&imgtype=0&src=http%3A%2F%2Fwww.czxnews.com%2Fczxnews%2Fd%2Ffile%2Fsheying%2Fyishusheying%2F2013-12-23%2Fe15396e02562a0bb6bde8e9984e5a9ad.jpg",
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511335272&di=b124fecf6508ca88fcf57dd515290a67&imgtype=jpg&er=1&src=http%3A%2F%2Fimage13-c.poco.cn%2Fmypoco%2Fmyphoto%2F20121003%2F08%2F6428479620121003083711096.jpg%3F850x566_120",
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510740570491&di=5864fb7421f48cf482ac36ff8dc20843&imgtype=0&src=http%3A%2F%2Fimage142-c.poco.cn%2Fmypoco%2Fmyphoto%2F20130704%2F15%2F6424550520130704151232085.jpg%3F1024x768_120",
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510740617529&di=551b393c9a11164bb971a09741ae399e&imgtype=0&src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1704%2F1047-1F42GHK2.jpg",
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510740642624&di=f12767f2a0c7c722117ece5feaa14a1a&imgtype=0&src=http%3A%2F%2Fimage16-c.poco.cn%2Fmypoco%2Fmyphoto%2F20140706%2F19%2F174239703201407061931272517175060562_004.jpg%3F1280x867_120"
        ];
    var aBtn=document.getElementsByTagName("a");
    var oImg=document.getElementsByTagName("img")[0];
    var oUl=document.getElementsByTagName("ul")[0];
    var aLi=oUl.getElementsByTagName("li");
    var aSpan=oUl.getElementsByTagName("span");
    var num=0;
    
    //页面初始化
    oImg.src=imgArry[0];
    for (var i=0;i<imgArry.length;i++) {
    	oUl.innerHTML+="<li><span><img src='"+imgArry[i]+"'/></span></li>";
    }
    aLi[0].className="act";
    
    for (var i=0;i<aBtn.length;i++) {
    	aBtn[i].index=i;
    	aBtn[i].onclick=function(){
    		if(this.index==1){
    			//点击下一张切换图片
    			num++;
    			if(num>=imgArry.length){
    				num=imgArry.length-1;
    			}
    		}else{
    			//点击上一张切换图片
    			num--;
    			if(num<0){
    				num=0;
    			}
    		}
    		num%=imgArry.length;
    		fn(num);
    	}
    }
    
    
    for (var i=0;i<aLi.length;i++) {
    	aLi[i].index=i;
    	//鼠标移入显示小图标
    	aLi[i].onmouseover=function(){
    		for (var i=0;i<aLi.length;i++) {
    			aSpan[i].style.display="none";
    		}
    		aSpan[this.index].style.display="block"; 
    	}
    	//鼠标移出小图标隐藏
    	aLi[i].onmouseout=function(){
    		aSpan[this.index].style.display="none";
    	}
    	//鼠标点击切换图片
    	aLi[i].onclick=function(){
    		num=this.index;
    		fn(this.index);
    	}
    }
    
    
    //函数封装
    function fn(num1){
    	for (var i=0;i<aLi.length;i++) {
    		aLi[i].className="";
    	}
    	aLi[num1].className="act";
    	oImg.src=imgArry[num1];
    }
    

      

  • 相关阅读:
    使用C#实现DHT磁力搜索的BT种子后端管理程序+数据库设计(开源)
    便携版WinSCP在命令行下同步文件夹
    ffmpeg (ffprobe)分析文件关键帧时间点
    sqlite删除数据或者表后,回收数据库文件大小
    ubuntu 20.04下 freeswitch 配合 fail2ban 防恶意访问
    ffmpeg使用nvenc编码的结论记录
    PC版跑跑卡丁车 故事模式 亚瑟传说章节 卡美洛庆典 2阶段 心灵之眼 攻略
    There was an error loading or playing the video
    Nvidia RTX Voice 启动报错修复方法
    火狐浏览器 关闭跨域限制
  • 原文地址:https://www.cnblogs.com/yangxue72/p/7843924.html
Copyright © 2011-2022 走看看