图片轮播图js、css

原创 2015年11月20日 09:59:15

单张图片轮播图:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery左右箭头控制图片轮播代码</title>

<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
 body,ul,li,label,span{padding: 0; margin: 0;}
ul,li,label,span{list-style: none;}
body{font-size:12px;}

#demo1{
    position: relative;   
    margin: 50px auto;
    width: 700px;    
    border:1px solid #ccc;
}
#demo1 .img_list{overflow: hidden; position: relative; height: 260px;}
/* 根据图片的张数来设定ul的宽度 */
.img_list ul{ width: 3500px; position: absolute; height: 260px; left: 0px;}
.img_list li{ float: left; width: 700px; font-family : 微软雅黑,宋体; font-size : 1.3em; color : #ff0000;}
.img_list ul li img{ margin: 1px; width: 400px; height: 259px; float:left;}
.img_list ul li label{padding-top:30px; display:block; position:relative;}
.img_list ul li label a.images{display:block; width:15px; height:15px; position:absolute; top:0px; right:0px;}
.img_list ul li label a.images img{width:15px; height:15px;}

.img_list ul li label a.image{display:block; width:15px; height:15px; position:absolute; top:0px; right:30px;}
.img_list ul li label a.image img{width:15px; height:15px;}
/* 图片对应的按钮样式 */
.btn_list ul{ position: absolute; right: 10px; bottom: 15px; }
.btn_list li{ float: left; margin-right: 10px; color: #999; border: 1px solid #ccc; }
.btn_list li:hover,.btn_list li.on{ cursor: pointer; border: 1px solid #E204A4;}
.btn_list ul li img{ margin: 1px; width: 30px; height: 15px; display: block;}

/* 左右点击的按钮样式 */
#demo1 .toLeft,#demo1 .toRight{
    display: none;
    position: absolute;
    width: 20px;
    height: 30px;   
    top: 110px;   
    background: url(image/zbbg_24.png) no-repeat 0 -150px; /*替换成自己本地图片*/
}
#demo1 .toLeft{
    left: -40px;
}
#demo1 .toRight{
    right: -40px;
    background-position: -50px -150px;
}
</style>
</head> 
<body>  

<div id="demo1">
 <div class="img_list">
  <form>
   <ul>
    <li>
        <div>
      <span><img src="image/gsh_banner1.jpg"></span>
     </div>
     <label>
         <a href="javascript:void(0);" class="images"><img src="image/delete.png"></a>
       <span>姓名:</span>测试</br></br>
      <span>性别:</span>男</br></br>
      <span>描述:</span>测试测试测试测试测试
     </label>
    </li>
    <li>
     <div>
      <span><img src="image/gsh_banner3.jpg"></span>
     </div>
     <label>
      <a href="javascript:void(0);" class="images"><img src="image/delete.png"></a>     
      <span>姓名:</span>测试</br></br>
      <span>性别:</span>男1</br></br>
      <span>描述:</span>测试
     </label>
    </li>
    <li>
     <div>
      <span><img src="image/gsh_banner4.jpg"></span>
     </div>
     <label>
      <a href="javascript:void(0);" class="images"><img src="image/delete.png"></a>      
      <span>姓名:</span>测试</br></br>
      <span>性别:</span>男2</br></br>
      <span>描述:</span>测试
     </label>
    </li>
   </ul>
  </form>
 </div>
 <div class="btn_list">
   <ul></ul>
 </div>
 <a href="#" id="toLeft" class="link toLeft"></a>
 <a href="#" id="toRight" class="link toRight"></a>
</div>

 <script type="text/javascript">
var index = 0;
var timer = 0;
var ulist = $('.img_list ul ');
var blist = $('.btn_list ul ');
var list = ulist.find('li');
var llength = list.length;//li的个数,用来做边缘判断
var lwidth = $(list[0]).width();//每个li的长度,ul每次移动的距离
var uwidth = llength * lwidth;//ul的总宽度

function init(){
 //生成按钮(可以隐藏)
 addBtn(list);
 //显示隐藏左右点击开关
 $('.link').css('display', 'block');
 $('.link').bind('click', function(event) {
  var elm = $(event.target);
  doMove(elm.attr('id'));
  return false;
 });

 //初始化描述
 var text = ulist.find('li').eq(0).find('img').attr('alt');
 var link = ulist.find('li').eq(0).find('a').attr('href');
 $('.img_intro .text a').text(text);
 $('.img_intro .text a').attr('href',link);
 auto();
}

function auto(){
 //定时器
 timer = setInterval("doMove('toRight')",3000);

 $('.img_list li , .btn_list li ').hover(function() {
  clearInterval(timer);
 }, function() {
  timer = setInterval("doMove('toRight')",3000);
 });
}

function changeBtn(i){
 blist.find('li').eq(i).addClass('on').siblings().removeClass('on');
 var text = ulist.find('li').eq(i).find('img').attr('alt');
 var link = ulist.find('li').eq(i).find('a').attr('href');
 $('.img_intro .text a').text(text);
 $('.img_intro .text a').attr('href',link);
}

function addBtn (list){
 for (var i = 0; i < list.length; i++) {
  var imgsrc = $(list[i]).find('img').attr('src');           
  var listCon = '<li><img src="'+imgsrc+'""></li>';        
  $(listCon).appendTo(blist);
  //隐藏button中的数字
  //list.css('text-indent', '10000px');
 };
 blist.find('li').first().addClass('on');
 blist.find('li').click(function(event) {
  var _index = $(this).index();           
  doMove(_index);
 });
}

function doMove(direction){
 //向右按钮
 if (direction =="toRight") {
  index++;
  if ( index< llength) {
   uwidth = lwidth *index;
   ulist.css('left',-uwidth);
   //ulist.animate({left: -uwidth}, 1000);

  }else{
   ulist.css('left','0px');
   index = 0;
  };
 //向左按钮          
 }else if(direction =="toLeft"){
  index--;
  if ( index < 0) {
   index = llength - 1;               
  }
  uwidth = lwidth *index;
  ulist.css('left',-uwidth);
  //ulist.animate({left: -uwidth}, "slow");   
 //点击数字跳转 
 }else{
  index = direction;
  uwidth = lwidth *index;
  ulist.css('left',-uwidth);
 };
 changeBtn(index);
}
init();
</script>

</div>
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

带缩略图及描述的js+css图片轮播

  • 2009年07月24日 15:56
  • 230KB
  • 下载

原生js+css3实现图片自动切换,图片轮播

运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 ...
  • pspgbhu
  • pspgbhu
  • 2016年05月21日 03:01
  • 4639

myfocuns前端图片轮播JS插件

  • 2017年08月14日 17:34
  • 1.51MB
  • 下载

js图片轮播

  • 2017年10月12日 14:44
  • 1.06MB
  • 下载

jq + css 实现简单的图片轮播效果

jq + css 实现简单的图片轮播效果开发过程中需要用到图片轮播的插件,在网上找了几个插件之后还是决定自己码一个,比较简洁的功能,以后说不定还会有用。ps: 功能比较简单,整个框并不能根据图片的大...

js图片轮播

  • 2015年12月17日 10:53
  • 2.08MB
  • 下载

原生js图片轮播效果

  • 2017年08月22日 09:26
  • 336KB
  • 下载

使用原生javascript和css实现图片轮播效果

图片轮播 #box { width:506px; h...
  • sofeien
  • sofeien
  • 2017年02月07日 13:50
  • 194

js图片轮播

  • 2013年05月21日 19:22
  • 278KB
  • 下载

js图片轮播:VCD包装盒个性幻灯片

  • 2015年08月08日 11:35
  • 413KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片轮播图js、css
举报原因:
原因补充:

(最多只允许输入30个字)