js图片轮播手动切换

最新推荐文章于 2023-02-16 17:38:05 发布

Carry-Lee

最新推荐文章于 2023-02-16 17:38:05 发布

阅读量2.7k

点赞数

分类专栏： php 文章标签：图片 php

本文链接：https://blog.csdn.net/qq604598861/article/details/50343959

版权

php 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

</pre><pre name="code" class="html"><!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js图片轮播手动切换</title>
<script type="text/javascript" src="js/ScrollPicLeft.js"></script>
</head>

<body>
<div class="dd_main">  
  <div class="zl_left" id="Left_Photo"><a href="javascript:void(0)"><img src="images/zl_tb1.jpg" width="24" height="32" /></a></div>
  <div class="zl_content">
    <ul id="ISL_Photo">
      <li><img src="images/zl_tp3.jpg" width="130" height="153" /></li>
      <li><img src="images/zl_tp1.jpg" width="130" height="153" /></li>
      <li><img src="images/zl_tp.jpg" width="130" height="153" /></li>
      <li><img src="images/zl_tp1.jpg" width="130" height="153" /></li>
      <li><img src="images/zl_tp2.jpg" width="130" height="153" /></li>
      <li><img src="images/zl_tp3.jpg" width="130" height="153" /></li>
      <li><img src="images/zl_tp2.jpg" width="130" height="153" /></li>
    </ul>
  </div>
  <div class="zl_right" id="Right_Photo"><a href="javascript:void(0)"><img src="images/zl_tb2.jpg" width="24" height="32" /></a></div>
</div>
<script type="text/javascript">
	var scrollPhoto = new ScrollPicleft();
	scrollPhoto.scrollContId   = "ISL_Photo"; // 内容容器ID""
	scrollPhoto.arrLeftId      = "Left_Photo";//左箭头ID
	scrollPhoto.arrRightId     = "Right_Photo"; //右箭头ID
	scrollPhoto.frameWidth     = 450;//显示框宽度
	scrollPhoto.pageWidth      = 150; //翻页宽度
	scrollPhoto.speed          = 10; //移动速度(单位毫秒，越小越快)
	scrollPhoto.space          = 10; //每次移动像素(单位px，越大越快)
	scrollPhoto.autoPlay       = false; //自动播放
	scrollPhoto.autoPlayTime   = 3; //自动播放间隔时间(秒)
	scrollPhoto.initialize(); //初始化	
</script>
</body>
</html>
js插件地址 ：http://download.csdn.net/detail/qq604598861/9365071

js要跟在内容后面才可以运行的