原生JS多图轮播代码:移植仿站实现多图显示,多端自适应

图片[1]-原生JS多图轮播代码:移植仿站实现多图显示,多端自适应 - 李烨博客-李烨博客

昨天李烨博客仿了一个PPT资源下载站模板,用到了一个多图轮播功能,从网上找了很多案例,还是不太理想,自己找了一个比较喜欢的的风格,之后改了改,今天给大家分享出来,看演示的话请点击:https://www.9hxz.com/ktbg/1372.html

话不多说,下面贴css和js代码:

<style type="text/css">
* {padding: 0;margin: 0;font-family: "微软雅黑";font-size: 14px;}
ul,li {list-style: none;}
a {text-decoration: none;color: black;}
.box{width: 100%;height: auto;margin: 20px auto;overflow: hidden;position: relative;}
.box-1 ul{}
.box-1 ul li{width: 100%;height: auto;position: relative;overflow: hidden;}
.box-1 ul li img{display:block;width: 100%; height: auto;}
.box-1 ul li h2{position: absolute;left: 0;bottom: 0;height: 40px;width:300px;background: rgba(125,125,120,.4);text-indent: 2em;
				padding-right:500px ;font-size: 15px;line-height: 40px;text-overflow: ellipsis;overflow: hidden;
				white-space: nowrap;font-weight: normal;color: ghostwhite}
.box-2{position: absolute;right: 10px;bottom: 14px;}
.box-2 ul li{float:left;width: 12px;height: 12px;overflow: hidden; margin: 0 5px; border-radius: 50%;
				background: rgba(0,0,0,0.5);text-indent: 100px;cursor: pointer;}
.box-2 ul .on{background: rgba(255,255,255,0.6);}
.box-3 span{position: absolute;color: white;background: rgba(125,125,120,.3);width: 50px;height: 80px;
				top:50%; font-family: "宋体";line-height: 80px;font-size:60px;margin-top: -40px;
				text-align: center;cursor: pointer;}
.box-3 .prev{left: 10px;}
.box-3 .next{right: 10px;}
.box-3 span::selection{background: transparent;}
.box-3 span:hover{background: rgba(125,125,120,.8);}
</style>

<script type="text/javascript">
window.onload = function(){
	function $(param){
		if(arguments[1] == true){
			return document.querySelectorAll(param);
		}else{
			return document.querySelector(param);
		}
	}
	var $box = $(".box");
	var $box1 = $(".box-1 ul li",true);
	var $box2 = $(".box-2 ul");
	var $box3 = $(".box-3");
	var $length = $box1.length;
	
	var str = "";
	for(var i =0;i<$length;i++){
		if(i==0){
			str +="<li class='on'>"+(i+1)+"</li>";
		}else{
			str += "<li>"+(i+1)+"</li>";
		}
	}
	$box2.innerHTML = str;
	
	var current = 0;
	
	var timer;
	timer = setInterval(go,1000);
	function go(){
		for(var j =0;j<$length;j++){
			$box1[j].style.display = "none";
			$box2.children[j].className = "";
		}
		if($length == current){
			current = 0;
		}
		$box1[current].style.display = "block";
		$box2.children[current].className = "on";
		current++;
	}
	
	for(var k=0;k<$length;k++){
		$box1[k].onmouseover = function(){
			clearInterval(timer);
		}
		$box1[k].onmouseout = function(){
			timer = setInterval(go,1000);
		}
	}
	for(var p=0;p<$box3.children.length;p++){
		$box3.children[p].onmouseover = function(){
			clearInterval(timer);
		};
		$box3.children[p].onmouseout = function(){
			timer = setInterval(go,1000);
		}
	}
	
	for(var u =0;u<$length;u++){
		$box2.children[u].index  = u;
		$box2.children[u].onmouseover = function(){
			clearInterval(timer);
			for(var j=0;j<$length;j++){
				$box1[j].style.display = "none";
				$box2.children[j].className = "";
			}
			this.className = "on";
			$box1[this.index].style.display = "block";
			current = this.index +1;
		}
		$box2.children[u].onmouseout = function(){
			timer = setInterval(go,1000);
		}
	}
	
	$box3.children[0].onclick = function(){
		back();
	}
	$box3.children[1].onclick = function(){
		go();
	}
	function back(){
		for(var j =0;j<$length;j++){
			$box1[j].style.display = "none";
			$box2.children[j].className = "";
		}
		if(current == 0){
			current = $length;
		}
		$box1[current-1].style.display = "block";
		$box2.children[current-1].className = "on";
		current--;
	}
}
</script>

下面贴一下html代码

<div class="box">	<div class="box-1">		<ul>

<li><img src="http://www.pptbz.com/d/file/p/201708/de27695db95a4cfbe8f4d7203fef2899.jpg"  alt="浅蓝微生物学开题报告PPT模板幻灯片1.JPG(1)" /></li><li><img src="http://www.pptbz.com/d/file/p/201708/f56edc74eb2851d7d2e88e072c12d6cd.jpg"  alt="浅蓝微生物学开题报告PPT模板幻灯片2.JPG(2)" /></li><li><img src="http://www.pptbz.com/d/file/p/201708/fd50dc40e31cb608d8c8d27b24e23d86.jpg"  alt="浅蓝微生物学开题报告PPT模板幻灯片3.JPG(3)" /></li><li><img src="http://www.pptbz.com/d/file/p/201708/a82028059e3f235123faa473efba66df.jpg"  alt="浅蓝微生物学开题报告PPT模板幻灯片4.JPG(4)" /></li><li><img src="http://www.pptbz.com/d/file/p/201708/ccab070031e95e56acadc104f96eee4a.jpg"  alt="浅蓝微生物学开题报告PPT模板幻灯片5.JPG(5)" /></li><li><img src="http://www.pptbz.com/d/file/p/201708/35ee35fafa3f84204cc927010dca71b2.jpg"  alt="浅蓝微生物学开题报告PPT模板幻灯片6.JPG(6)" /></li><li><img src="http://www.pptbz.com/d/file/p/201708/b04006da6b65a610f1668bebdf66675a.jpg"  alt="浅蓝微生物学开题报告PPT模板幻灯片7.JPG(7)" /></li><li><img src="http://www.pptbz.com/d/file/p/201708/7824323fa333073bf4d9f7eaa325da59.jpg"  alt="浅蓝微生物学开题报告PPT模板幻灯片8.JPG(8)" /></li><li><img src="http://www.pptbz.com/d/file/p/201708/800d2d5846e4d0a0043baee996b38ead.jpg"  alt="浅蓝微生物学开题报告PPT模板幻灯片9.JPG(9)" /></li><li><img src="http://www.pptbz.com/d/file/p/201708/a80e09bf5af4569a55105e08dd5281b4.jpg"  alt="浅蓝微生物学开题报告PPT模板幻灯片10.JPG(10)" /></li><li><img src="http://www.pptbz.com/d/file/p/201708/1923ae88fbbf762af089b5e290057693.jpg"  alt="浅蓝微生物学开题报告PPT模板幻灯片11.JPG(11)" /></li><li><img src="http://www.pptbz.com/d/file/p/201708/7269d61b9cf16c3ad1b823f84d3c75cc.jpg"  alt="浅蓝微生物学开题报告PPT模板幻灯片12.JPG(12)" /></li><li><img src="http://www.pptbz.com/d/file/p/201708/004262ece7c8cdfb0ef6ea6a011ff052.jpg"  alt="浅蓝微生物学开题报告PPT模板幻灯片13.JPG(13)" /></li>  </ul>	</div>	<div class="box-2">		<ul>					</ul></body>	</div>	<div class="box-3">		<span class="prev"> < </span>		<span class="next"> > </span>	</div></div>

© 版权声明
THE END
喜欢就支持一下吧
分享
评论 抢沙发
叶子的头像-李烨博客

昵称

取消
昵称表情图片