教程集 > 脚本编程 > javascript > 正文 js 漂亮的图片幻灯切换效果

js 漂亮的图片幻灯切换效果

发布时间：2023-04-29 编辑：jiaochengji.com

教程集为您提供js 漂亮的图片幻灯切换效果等资源，欢迎您收藏本站，我们将为您提供最新的js 漂亮的图片幻灯切换效果资源

提示：您可以先修改部分代码再运行

<!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">  <head>  <title>精致漂亮的图片幻灯切换效果</title>  <meta http-equiv="content-type" content="text/html;charset=gb2312">    <style type="text/css">  /*  更新时间：2010-12-6  版本：ent_v1.0.0  作者：goldenchen#tencent.com  */  /*Reset css*/  body{font-family:"宋体";font-size:12px;background:#fff;color:#333;margin:0;padding:0;}  div,form,img,ul,ol,li,dl,dt,dd{margin:0;padding:0;border:0;}  li{list-style:none;}  table{border-collapse:collapse;}  h1,h2,h3,h4,h5,h6,p,select,td{margin:0;padding:0;font-size:12px;}  /*全局设置*/  a{color:#1D569C;text-decoration:none;}  a:hover{color:#ED3E22;text-decoration:underline;}  a:hover p{text-decoration:none;}  /*娱乐首屏*/  .focus_box{height:426px; width:310px; margin:0px auto;}  .focus{width:304px;height:396px;float:left;border:3px solid #d9d9d9;margin-top:15px;position:relative;}  .focus #pic{width:304px;height:396px;overflow:hidden;}  .focus #pic ul{width:1216px;height:396px;float:left;}  .focus #pic li{width:304px;height:396px;float:left;}  .focus #pic li img{width:304px;height:396px;float:left;}  .focus .tip-bg{width:304px;height:21px;background:url(/effect/images/201103182345/focus_tip_bg.png) no-repeat left top;position:absolute;left:0;bottom:0;z-index:12;}  .focus #tip{width:96px;height:14px;position:absolute;left:104px;bottom:3px;z-index:13;}  .focus #tip ul li{width:14px;height:14px;float:left;display:inline;margin:0 5px;cursor:pointer;background:url(/effect/images/201103182345/focus_tip.png) no-repeat;}  .focus #tip ul li.current{background:url(/effect/images/201103182345/focus_tip_current.png) no-repeat;}  .focus .btn{width:42px;height:9px;position:absolute;right:0;bottom:5px;z-index:14;overflow:hidden;}  .focus .btn ul{width:100%;float:left;}  .focus .btn li{width:7px;height:9px;float:left;display:inline;margin:0 7px;cursor:pointer;overflow:hidden;}  .focus .btn li.btn-left{background:url(/effect/images/201103182345/focus_btn_left.png) no-repeat left top;}  .focus .btn li.btn-right{background:url(/effect/images/201103182345/focus_btn_right.png) no-repeat left top;}  .focus .show{display:block!important;}  </style>  </head>  <body>    <div class="focus_box">  	<div class="focus">  		<div id="pic">  			<ul>  				<li><img id="bigimg_1" title="" alt="" src=""> </li>  				<li><img id="bigimg_1" title="" alt="" src=""> </li>  				<li><img id="bigimg_1" title="" alt="" src=""> </li>  				<li><img id="bigimg_1" title="" alt="" src=""> </li>  			</ul>  		</div>  		<div class="tip-bg"></div>  		<div id="tip">  			<ul>  				<li id="smallimg_1" onclick="change(1)" class="current"></li>  				<li id="smallimg_2" onclick="change(2)" class=""></li>  				<li id="smallimg_3" onclick="change(3)" class=""></li>  				<li id="smallimg_4" onclick="change(4)" class=""></li>  			</ul>  		</div>  		<div class="btn">  			<ul>  				<li class="btn-left" id="focus_btn_left" onclick="focus_prev();"></li>  				<li class="btn-right" id="focus_btn_right" onclick="focus_next();"></li>  			</ul>  		</div>  	</div>  </div>  <script language="javascript">  var isround = "";  var scrollmove = "";  var masktime = 10;  var focus_cur = 1;  var p = document.getElementById("pic").getElementsByTagName("li");  var h = document.getElementById("tip").getElementsByTagName("li");  function change(id){  	clearTimeout(isround);  	clearInterval(scrollmove);  	for (var i = 1; i <= h.length; i  ) {  		if(i == id){  			document.getElementById("smallimg_" i).className="current";  		}else{  			document.getElementById("smallimg_" i).className="";  		}  	}  	if ((next = id   1) > h.length){  		next = 1;  	}  	isround = setTimeout("change(" next ")",8000);  	scrollmove = setInterval("scrollMove(" id ")",masktime);  	focus_cur = id;  }  function scrollMove(m){  	var srl = document.getElementById("pic").scrollLeft;  	var dsrl = Math.floor((p[0].clientWidth*(m-1)-srl)/5);  	var xsrl = Math.ceil((p[0].clientWidth*(m-1)-srl)/5);  	if(srl > p[0].clientWidth*(m-1)){  		document.getElementById("pic").scrollLeft = srl   dsrl;  	}else if(srl < p[0].clientWidth*(m-1)){  		document.getElementById("pic").scrollLeft = srl   xsrl;  	}else{  		clearInterval(scrollmove);  	}  }  function focus_prev(){  	var prev = (focus_cur 3)%4;  	if(prev == "0"){  		prev = 4;  	}  	change(prev);  }  function focus_next(){  	var next = (focus_cur 1)%4;  	if(next == "0"){  		next = 4;  	}  	change(next);  }  isround = setTimeout("change(2)",8000);  </script>  </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
基于jquery的15款幻灯片插件
 jquery幻灯片特效banner切换实例
 jQuery图片幻灯手风琴效果插件 Slidorion
8款非常棒的响应式jQuery 幻灯片插件推荐
 分享十五个最佳jQuery 幻灯插件和教程
 jQuery相册幻灯片插件 Slider Kit
jQuery图片效果切换 Adipoli
jquery幻灯片效果的插件一例
 jQuery幻灯片插件 Skitter
基于jquery的网站幻灯片切换效果焦点图代码

上一篇：隐去浏览器中当鼠标移到图片上跳出的工具栏下一篇：js图片切换效果代码

[关闭]

js 漂亮的图片幻灯切换效果

最近更新

浏览排行