您的位置：首页 > Web前端 > CSS

图片轮播图js、css

2015-11-20 09:59 441 查看

单张图片轮播图：

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 图片轮播图

相关文章推荐

新的分享

章节导航