Welcome, Old Sport!

推荐两款简单图片滚动效果 width CSS & jQuery

by ilikecss ON 2010/09/26 8744

在网上看到几个不错滚动效果,我把代码和js处理了下,合成了一下两款图片滚动效果:
*指定要显示的内容数量
*指定内容数量滚动
*自动滚动模式
*上一个/下一个 自由控制
下面就一起来学习一下如何制作,非常简单。

Step1. 创建HTML 第一款

<div class="bx_wrap"><a class="prev" href="">left</a><a class="next" href="">right</a>
    <div class="bx_container">
        <ul id="example1">
        <li><img height="107" width="107" alt="LUFFY" src="images/pic_one.jpg"></li>
        <li><img height="107" width="107" alt="ZORO" src="images/pic_two.jpg"></li>
        <li><img height="107" width="107" alt="NAMI" src="images/pic_three.jpg"></li>
        <li><img height="107" width="107" alt="SANJI" src="images/pic_four.jpg"></li>
        <li><img height="107" width="107" alt="USOPP" src="images/pic_five.jpg"></li>
        <li><img height="107" width="107" alt="Chopper" src="images/pic_six.jpg"></li>
        <li><img height="107" width="107" alt="ROBIN" src="images/pic_seven.jpg"></li>
        </ul>
    </div>
</div>

创建HTML 第二款

<div class="bx_wrap">
    <div class="bx_container">
        <ul id="example2">
        <li><img height="107" width="107" alt="LUFFY" src="images/pic_one.jpg"></li>
        <li><img height="107" width="107" alt="ZORO" src="images/pic_two.jpg"></li>
        <li><img height="107" width="107" alt="NAMI" src="images/pic_three.jpg"></li>
        <li><img height="107" width="107" alt="SANJI" src="images/pic_four.jpg"></li>
        <li><img height="107" width="107" alt="USOPP" src="images/pic_five.jpg"></li>
        <li><img height="107" width="107" alt="Chopper" src="images/pic_six.jpg"></li>
        <li><img height="107" width="107" alt="ROBIN" src="images/pic_seven.jpg"></li>
        </ul>
    </div>
</div>

Step2. 创建CSS

.examples_body {
clear: both;
position: relative;
}
.examples_body .bx_wrap {
margin-left: 70px;
margin-top: 30px;
}
.examples_body .bx_wrap ul img { border: 2px solid #DDD; }
.bx_wrap a.prev {
width: 27px;
height: 34px;
line-height: 17px;
outline-style: none;
outline-width: 0;
position: absolute;
top: 100px;
left: 75px;
text-indent: -9999px;
background: url(../images/icon_arrow_left.gif) no-repeat left;
}
.bx_wrap a.prev:hover {
background: url(../images/icon_arrow_left.gif) no-repeat right;
}
.bx_wrap a.next {
width: 27px;
height: 34px;
line-height: 17px;
left: 652px;
outline-style: none;
outline-width: 0;
position: absolute;
top: 100px;
text-indent: -9999px;
background: url(../images/icon_arrow_right.gif) no-repeat right;
}
.bx_wrap a.next:hover {
background: url(../images/icon_arrow_right.gif) no-repeat left;
}

Step3. 插入jQuery和脚本包

$(document).ready(function(){
	$('#example1').bxCarousel({
		display_num: 4, // 显示的内容数量
		move: 1, // 一次移动几个内容
		prev_image: 'images/icon_arrow_left.png',
		next_image: 'images/icon_arrow_right.png',
		margin: 10 // 每个li元素之间距离
	});
	$('#example2').bxCarousel({
		display_num: 3, // 显示的内容数量
		move: 1, // 一次移动几个内容
		auto: true, // 加载页面后是否自动滚动
		controls: false, // 是否添加控制元件
		margin: 10,
		auto_hover: true // 鼠标放上时是否暂停
	});
});

由于代码较长,下面这个jQuery请下载与上面一起使用,可以并在一起。

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Demo 下载

8条评论
  1. #1

    默默说道:

    感谢博主@-@

  2. #2

    vane说道:

    有没有可能在第二款中,加入类似第一款的方向控制呢?

  3. #3

    majw说道:

    希望博主将这个效果打包一下提供下载:)

  4. #4

    zhu说道:

    在一个页面加入同样的两个播放器,第二个播放器的每个图片会独占一行




TOP