网页特效

手机网站移动端左右自动滚动jQuery焦点图切换特效

位置:首页 > 网页特效 > 广告特效,2013-12-16
手机网站图片切换特效广告图片轮播特效代码移动端左右+自动滚动jQuery插件是一款响应式的图片轮播特效,非常实用。<!DOCTYPEhtml><

手机网站图片切换特效 广告图片轮播特效代码 移动端左右+自动滚动jQuery插件是一款响应式的图片轮播特效,非常实用。

手机网站移动端左右自动滚动jQuery焦点图切换特效

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,initial-scale=1.0,minimum-scale=0.1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>移动端左右+自动滚动jQuery插件 -ab蓝学网 http://www.ablanxue.com</title>
<link href="css/layout.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div>
	<article>
	  <!--scroll-->
	  <div class="scroll relative">
	    <div class="scroll_box" id="scroll_img">
        <ul class="scroll_wrap">
          <li><a href="http://www.ablanxue.com"><img src="images/1.jpg" width="100%" /></a></li>
          <li><a href="http://www.ablanxue.com"><img src="images/2.jpg" width="100%" /></a></li>
          <li><a href="http://www.ablanxue.com"><img src="images/3.jpg" width="100%" /></a></li>
        </ul>
	    </div>
      <span class="scroll_position_bg opacity6"></span>
      <ul class="scroll_position" id='scroll_position'>
          <li class="on"><a href="javascript:void(0);">1</a></li>
          <li><a href="javascript:void(0);">2</a></li>
          <li><a href="javascript:void(0);">3</a></li>
      </ul>
	  </div>
	  <!--scroll-->
  </article>
</div>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src='js/hhSwipe.js'></script>
<script>
var slider = Swipe(document.getElementById('scroll_img'), {
	auto: 3000,
	continuous: true,
	callback: function(pos) {
		var i = bullets.length;
		while (i--) {
			bullets[i].className = ' ';
		}
		bullets[pos].className = 'on';
	}
});
var bullets = document.getElementById('scroll_position').getElementsByTagName('li');
$(function(){
	$('.scroll_position_bg').css({
		width:$('#scroll_position').width()
	});
});
</script>
<div style="text-align:center;clear:both">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>

TAGS:移动端jQuery焦点图手机网站图片切换

猜你喜欢

NewHot