利用jquery写的左右轮播图特效

最近不是很忙，练习写了一个轮播图效果，虽然效果跟功能上貌似是没问题，但是我认为在许多东西上面都有待改进，在前端这个职位上我还有很远的路要走，当然要学的东西还有很多，这里仅仅对自己最近研究js的一个记录，我相信以后能写出更好的

将jquery框架的链接跟图片替换就可以看到效果了

源代码如下：


代码如下:

<!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>轮播图</title>
<style>
*{margin:0; padding:0;}
body{min-width:320px; font-size:12px;}
h1{font-size:18px;}
h2{font-size:14px}
h4{font-size:12px;}
p{ word-break:break-all; line-height:24px;}
ul,ul li,ol,ol li{list-style:none;}
a{text-decoration:none;}
.clear{clear:both;}
.clearfix:after{ display:block; clear:both; content:"."; visibility:hidden; height:0px;}

#pic_carousel{position:relative;width:1000px;height:350px;overflow:hidden;margin: 0 auto;text-align:center;}
.lunbo_pic{ position:absolute; left:0; top:0; overflow:hidden; text-align:center;}
.lunbo_pic li{ float:left; overflow:hidden;}
.lunbo_pic li a img{ width:1000px; display:block;vertical-align:bottom; border:none;}
.lunbo_curso{ position:absolute; left:50%; width:125px; margin-left:-64px; bottom:0; }
.lunbo_curso a{ background:url(../images/will_yuan.png) no-repeat center; float:left; color:#00F; width:25px; cursor:pointer;height:25px; line-height:25px; display:block; text-align:center;}
.lunbo_curso .small_xz{ color:#F0F;}
.arr{ position:absolute; top:50%; margin-top:-25px; width:30px; height:50px;}
#arr_l{ left:0; background:#CCC;}
#arr_r{ right:0; background:#CCC;}
.tc_kuan{ position:absolute; top:50%; left:50%; margin-top:-25px; margin-left:-100px; width:200px; height:50px; line-height:50px; background:#CCC; color:#000;}
</style>
<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="pic_carousel">
<ul id="lunbo_pic" class="clearfix lunbo_pic">
<li><a href="#"><img src="images/insco_p1.jpg" /></a></li>
<li><a href="#"><img src="images/insco_p2.jpg" /></a></li>
<li><a href="#"><img src="images/insco_p3.jpg" /></a></li>
<li><a href="#"><img src="images/insco_p1.jpg" /></a></li>
<li><a href="#"><img src="images/insco_p2.jpg" /></a></li>
</ul>
<div id="lunbo_curso" class="lunbo_curso">
<a href="#" class="small_xz">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
<span id="arr_l" class="arr"></span>
<span id="arr_r" class="arr"></span>
</div>
<script>
var b_width = 1000; // 大图的宽度
var speed = 500; // 图片向左移动速度
var s_time = 3000 //图片自动滚动速度
var pic_li = $("#lunbo_pic").children("li");
$(document).ready(function(e) {
var $ul_width= pic_li.width() * pic_li.length; //轮播图的宽度
$("#lunbo_pic").width($ul_width);
var small_width = $(".lunbo_curso>a").width() * $(".lunbo_curso>a").length;
$(".lunbo_curso").width(small_width);
$(".lunbo_curso").css("margin-left",-small_width/2);
});

$(document).live("click",function(e){
$target = $(e.target);
var id = $target.attr('id');
if($target.is("a") && $target.parent($("#lunbo_curso")) ){
$target.addClass("small_xz").siblings().removeClass('small_xz');
var mar_lf = parseInt($target.index() * b_width);
$("#lunbo_pic").animate({
left : -mar_lf
},speed);
}
if(id == "arr_l"){
prePage();
}
if(id == "arr_r"){
nextPage();
}
});
//上一个
function prePage(){
if($(".small_xz").index() == 0){
$("#lunbo_pic").css("left",-4000);
$("#lunbo_pic").animate({
"left": -parseInt(pic_li.length *b_width - b_width)
},speed);
$("#lunbo_curso>a").eq(pic_li.length - 1).addClass("small_xz").siblings().removeClass("small_xz");
$(".small_xz").index() == pic_li.length - 1;
}else{
$("#lunbo_curso>a").eq($(".small_xz").index()-1).addClass("small_xz").siblings().removeClass("small_xz");
var mar_lf2 = parseInt($("#lunbo_pic").css("left")) + b_width;
$("#lunbo_pic").animate({
"left": mar_lf2
},speed);
}
}
//下一个
function nextPage(){
if($(".small_xz").index() == pic_li.length -1){
$("#lunbo_pic").css("left",0);
/*$("#lunbo_pic").animate({
"left": 0
},speed);*/
$("#lunbo_curso>a").eq(0).addClass("small_xz").siblings().removeClass("small_xz");
$(".small_xz").index() == 0;

}else{

$("#lunbo_curso>a").eq($(".small_xz").index() + 1).addClass("small_xz").siblings().removeClass("small_xz");
var mar_lf2 = parseInt($("#lunbo_pic").css("left")) - b_width;
$("#lunbo_pic").animate({
"left": mar_lf2
},speed);
}
}

function picRun(){
nextPage();
}
intervalTime = setInterval(picRun,s_time);

$("#pic_carousel").on("mouseover",function(){
clearInterval(intervalTime);
});
$("#pic_carousel").on("mouseout",function(){
intervalTime = setInterval(picRun,s_time);;
});

</script>
</body>
</html>

赞 (0)

相关推荐

  • jquery实现左右轮播图效果

    jquery实现左右轮播图效果

    我们经常看到购物网站上首页有轮播图,比如某东某京 如图我们打开网页就看到京东的轮播图 接下来,这个小案例就是要介绍如何实现这种效果,即这张轮播图上所有的事件. 首先 我们看到轮播图上的有1.左右的小按钮(图片会随着左右的点击移动) 2**重点内容.还有位于中间的小圆点(点击小圆点会跳转到那个图片) 3重点内容**轮播图会自己向左滑动(里面有一个定时器自动播放) 分析完之后就是我们写代码(这个是仿京东的轮播图) HTML的内容 代码片 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多

  • jQuery按需加载轮播图(web前端性能优化)

    jQuery按需加载轮播图(web前端性能优化)

    引言 关于幻灯轮播图,想必大家都不陌生,尤其是基于 jQuery 的,插件.代码网上一搜一大堆,但是真正符合自己需求的几乎没有,所以我要打造一个符合自身需求,经得起广大网民考验的 jQuery 轮播图! 思路 为什么说网上其他一些轮播图不符合我的要求?我的需求又是什么呢? 现在网上可以找到的多数幻灯轮播图的 jQuery 插件的作法是,先把图片和链接的 HTML 写好,然后控制隐藏和显示来轮流展示当前的幻灯图片.但是对用户而言,我们始终只是看到当前的一张图片,那其他几张隐藏的图片为什么要事先加载

  • jquery 实现轮播图详解及实例代码

    jquery 实现轮播图详解及实例代码

    轮播图: 接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较.轮播图的效果可以点击如下链接查看:http://sandbox.runjs.cn/show/t07kscph jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <hea

  • jquery实现左右滑动式轮播图

    本文实例为大家分享了jquery左右滑动轮播图的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.10.2.min.js"><

  • jQuery插件slides实现无缝轮播图特效

    初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 $(".slideInner").slide({ slideContainer: $('.slideInner a'), effect: 'easeOutCirc',//动画类型 autoRunTime: 5000,//自动轮播时间 slideSpeed: 1000,//速度 nav: true,//是否显示左右导航 autoRun: true,//是否自动滚动 prevBtn: $(

  • jQuery无缝轮播图代码

    本文实例为大家分享了jQuery无缝轮播图的具体代码,供大家参考,具体内容如下 html 代码 <div class="banner"> <ul class="img"> <li><a href="#"><img src="image/1.jpg"></a></li> <li><a href="#">

  • 原生Javascript和jQuery做轮播图简单例子

    原生Javascript和jQuery做轮播图简单例子

    接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较. jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮

  • jquery实现左右无缝轮播图

    本文实例为大家分享了jquery无缝轮播图的实现代码,供大家参考,具体内容如下 <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{p

  • 基于jQuery实现淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: <div id="container"> <ul class="pic"> <li><a href="javascript:;"><img src="DSC01627.jpg"

  • jQuery自适应轮播图插件Swiper用法示例

    jQuery自适应轮播图插件Swiper用法示例

    本文实例讲述了jQuery自适应轮播图插件Swiper用法.分享给大家供大家参考,具体如下: 运行效果截图如下: 示例代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca

随机推荐