本文目录
JS如何实现左右滚动轮播代码详细点
var datas = ;var banner = document.getElementById("banner");var list = document.getElementById("list");for(var i = 0,len = datas.length;i《len;i++){var div = document.createElement("div");var li = document.createElement("li");if(i==0){ //默认第一项轮播项显示 对应的控制按钮被选中div.className = "item active";li.className = "active";}else{ //其他项隐藏 其他的控制按钮样式不改变div.className = "item";li.className = "";}div.innerHTML = ’《a href="’ + datas.targetSrc + ’"》’ +’《img src="’ + datas.imgSrc + ’" /》’ +’《/a》’;li.innerHTML = i + 1;banner.appendChild(div);list.appendChild(li);}var lunBo = document.getElementById("lunBo");var items = document.querySelectorAll("#lunBo #banner .item");var lis = document.querySelectorAll("#lunBo #list li"); var currentIndex = 0;//(控制按钮和轮播项共同的索引)for(var i = 0,len = lis.length;i《len;i++){lis.index = i;lis.onmouseenter = function(){currentIndex = this.index;for(var j = 0;j《len;j++){lis.className = "";items.className = "item";}this.className = "active";items.className = "item active";}}var termId; //全局变量function autoPlay(){termId = setInterval(function(){currentIndex++;if(currentIndex==lis.length){currentIndex = 0;}lis.onmouseenter();},3000);}autoPlay();//打开页面自动轮播//鼠标进入停止轮播lunBo.onmouseenter = function(){clearInterval(termId);}//鼠标离开继续轮播lunBo.onmouseleave = function(){autoPlay();}我这还有其他的，先采纳一下加我，我给你发
如何jQuery实现图片轮播的同时左右按钮可以实现切换
建议，在当前轮播图的div添加类active，设置.active {display：block；}，.ban{display:none;};这样可以通过添加或移除active就可以了；这样以下就比较方便很多，要不然又要做循环，麻烦（swiper插件做轮播效果不错）$(".left").click(function(){var $index = $(".ban").hasClass("active").index();//获取当前轮播图的下标if($index === 0 ) {//当前为第一张轮播图$(".ban").eq($(".ban").length-1).addClass("active).siblings(".ban").removeClass("active");//这里写成你自动切换的代码，我这里只是一个无动态切换效果的方法}else {$(".ban").eq($index-1).addClass("active).siblings(".ban").removeClass("active");})$(".right").click(function(){var $index = $(".ban").hasClass("active").index();//获取当前轮播图的下标if($index === ($(".ban").length-1) ) {//当前为最后一张轮播图$(".ban").eq($(".ban").length-1).addClass("active).siblings(".ban").removeClass("active");//这里写成你自动切换的代码，我这里只是一个无动态切换效果的方法}else {$(".ban").eq($index+1).addClass("active).siblings(".ban").removeClass("active");})//大体思路是这样了，代码可能有个别字母写得不对，毕竟是手敲的，但是大概思路是这样了
js图片左右滚动 怎么弄 有没案例代码 求帮忙
1.jquery.imgScroll.js
;(function($){$.fn.extend({"imgScroll":function(object){object=$.extend({firstDiv:null,scrollBox:null,scrollImgBox:null,tabDiv:null,tabDivList:null,botPrev:null,botNext:null,changeType:"slide",thumbNowClass:’on’,thumbOverEvent:true,changeTime:5000,ImgBoxMar:0,flag:true},object||{});var imgLen=$(object.scrollImgBox).length;var imgNum=0;var tabNum=0;var nowIndex=0;var index;var scrollWid=$(object.scrollImgBox).width()+object.ImgBoxMar;$(object.scrollImgBox).clone().appendTo($(this));function changeEffectNext(){if(object.changeType==’slide’){if(imgNum《imgLen){imgNum++}else{if(imgNum==imgLen){$(object.scrollBox).css({’margin-left’:0});imgNum=1}}$(object.scrollBox).animate({’margin-left’:-scrollWid*imgNum});if(tabNum《imgLen-1){tabNum++}else{if(tabNum==imgLen-1){tabNum=0}}$(object.tabDivList).eq(tabNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(tabNum).siblings().removeClass(object.thumbNowClass)}if(object.changeType==’fadein’){if(imgNum《imgLen-1){imgNum++}else{if(imgNum==imgLen-1){imgNum=0}}$(object.scrollImgBox).eq(imgNum).fadeIn(’slow’);$(object.scrollImgBox).eq(imgNum).siblings().fadeOut(’slow’);$(object.tabDivList).eq(imgNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(imgNum).siblings().removeClass(object.thumbNowClass)}};function changeEffectPrev(){if(object.changeType==’slide’){if(imgNum》0){imgNum--}else{if(imgNum==0){$(object.scrollBox).css({’margin-left’:-scrollWid*imgLen});imgNum=imgLen-1}}$(object.scrollBox).animate({’margin-left’:-scrollWid*imgNum});if(tabNum》0){tabNum--}else{if(tabNum==0){tabNum=imgLen-1}}$(object.tabDivList).eq(tabNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(tabNum).siblings().removeClass(object.thumbNowClass)}if(object.changeType==’fadein’){if(imgNum》0){imgNum--}else{if(imgNum==0){imgNum=imgLen-1}}$(object.scrollImgBox).eq(imgNum).fadeIn(’slow’);$(object.scrollImgBox).eq(imgNum).siblings().fadeOut(’slow’);$(object.tabDivList).eq(imgNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(imgNum).siblings().removeClass(object.thumbNowClass)}}if(object.flag==true){var s=setInterval(changeEffectNext,object.changeTime);$(object.firstDiv).hover(function(){clearInterval(s)},function(){s=setInterval(changeEffectNext,object.changeTime);});$(object.tabDiv).hover(function(){clearInterval(s)},function(){s=setInterval(changeEffectNext,object.changeTime)});$(object.botPrev).bind("click",function(){clearInterval(s)}).bind("mouseover",function(){clearInterval(s)});$(object.botNext).bind("click",function(){clearInterval(s)}).bind("mouseover",function(){clearInterval(s)})};$(object.botNext).click(function(){changeEffectNext()});$(object.botPrev).click(function(){changeEffectPrev()});function changesmallImg(index){$(object.tabDivList).eq(index).addClass(object.thumbNowClass);$(object.tabDivList).eq(index).siblings().removeClass(object.thumbNowClass);if(object.changeType==’slide’){$(object.scrollBox).animate({’margin-left’:-scrollWid*index})}if(object.changeType==’fadein’){$(object.scrollImgBox).eq(index).fadeIn(’slow’);$(object.scrollImgBox).eq(index).siblings().fadeOut(’slow’)}imgNum=index;tabNum=index}if(object.thumbOverEvent==true){$(object.tabDivList).click(function(){var index=$(this).index();changesmallImg(index)})}if(object.thumbOverEvent==false){$(object.tabDivList).hover(function(){var index=$(this).index();changesmallImg(index)})}}})})(jQuery);
2.html结构
a,.lbPeo{-webkit-transition:all .2s ease-in-out 0s;-o-transition:all .2s ease-in-out 0s;-moz-transition:all .2s ease-in-out 0s;-ms-transition:all .2s ease-in-out 0s;transition:all .2s ease-in-out 0s;}.lbCon{margin-top:33px;margin-bottom:37px;position: relative;}.lbBtn{display:block;position: absolute;top:0;width:40px;height:143px;border:1px solid #D7D2CA;background:url(’../../../images/special/140801/ctr_prev.png’) no-repeat center center;}.lbPrev{left:0}.lbNext{right:0;background-image:url(’../../../images/special/140801/ctr_next.png’)}.lbBtn:hover{background-color: #ddd;}.lbBox{width:900px;height:145px;margin-left: 50px;overflow: hidden;position: relative;}.lbList{width:1000%;}.lbBox ul{float:left}.lbBox li{float:left;width:150px;height:145px;overflow: hidden;}.lbPeo{text-align:center;line-height:18px;font-family:"微软雅黑";color:#333}.lbPeo img{display:block;border: 1px solid #ddd;width:84px;height:103px;margin-left:32px;*margin-left:5px;}.lbPeo h5{font-weight: bold;font-size:12px;padding-top: 5px;*padding-top: 0}.lbPeo h6{font-size:12px;}.lbBox li a:hover{text-decoration: none}.lbBox li a:hover .lbPeo{color:#ff9600}
《!-- 人物--》《div class="lbCon comWith clearfix"》 《div class="lbBox"》 《div class="lbList"》 《ul》 《li》《a href="" target="_blank"》 《div class="lbPeo clearfix"》***隐藏网址*** 《h5》李大红《/h5》 《h6》大公报副社长兼执行总《/h6》 《/div》 《/a》《/li》 《li》《a href="" target="_blank"》 《div class="lbPeo clearfix"》***隐藏网址*** 《h5》李大红《/h5》 《h6》大公报副社长兼执行总《/h6》 《/div》 《/a》《/li》 《li》《a href="" target="_blank"》 《div class="lbPeo clearfix"》***隐藏网址*** 《h5》李大红《/h5》 《h6》大公报副社长兼执行总《/h6》 《/div》 《/a》《/li》 《li》《a href="" target="_blank"》 《div class="lbPeo clearfix"》***隐藏网址*** 《h5》李大红《/h5》 《h6》大公报副社长兼执行总《/h6》 《/div》 《/a》《/li》 《li》《a href="" target="_blank"》 《div class="lbPeo clearfix"》***隐藏网址*** 《h5》李大红《/h5》 《h6》大公报副社长兼执行总《/h6》 《/div》 《/a》《/li》 《li》《a href="" target="_blank"》 《div class="lbPeo clearfix"》***隐藏网址*** 《h5》李大红《/h5》 《h6》大公报副社长兼执行总《/h6》 《/div》 《/a》《/li》 《/ul》 《ul》 《li》《a href="" target="_blank"》 《div class="lbPeo clearfix"》***隐藏网址*** 《h5》李大2红《/h5》 《h6》大公报副社长兼执行总《/h6》 《/div》 《/a》《/li》 《li》《a href="" target="_blank"》 《div class="lbPeo clearfix"》***隐藏网址*** 《h5》李2大红《/h5》 《h6》大公报副社长兼执行总《/h6》 《/div》 《/a》《/li》 《li》《a href="" target="_blank"》 《div class="lbPeo clearfix"》***隐藏网址*** 《h5》李大红《/h5》 《h6》大公报副社长兼执行总《/h6》 《/div》 《/a》《/li》 《li》《a href="" target="_blank"》 《div class="lbPeo clearfix"》***隐藏网址*** 《h5》李大红《/h5》 《h6》大公报副社长兼执行总《/h6》 《/div》 《/a》《/li》 《li》《a href="" target="_blank"》 《div class="lbPeo clearfix"》***隐藏网址*** 《h5》李大红《/h5》 《h6》大公报副社长兼执行总《/h6》 《/div》 《/a》《/li》 《li》《a href="" target="_blank"》 《div class="lbPeo clearfix"》***隐藏网址*** 《h5》李大红《/h5》 《h6》大公报副社长兼执行总《/h6》 《/div》 《/a》《/li》 《/ul》 《/div》 《/div》 《a href="javascript:;" class="lbBtn lbPrev"》《/a》 《a href="javascript:;" class="lbBtn lbNext"》《/a》《/div》
3.页面调用：
《script type="text/javascript" src="js/jquery-1.9.1.js"》《/script》
《script type="text/javascript" src="js/jquery.imgScroll.js"》《/script》(上面那个js)
$(’.lbCon .lbBox .lbList’).imgScroll({ firstDiv: ’.lbCon .lbBox’, scrollBox: ’.lbCon .lbBox .lbList’, scrollImgBox: ’.lbCon .lbBox ul’, botPrev: ’.lbCon .lbPrev’, botNext: ’.lbCon .lbNext’, changeType: "slide", thumbNowClass: ’on’, thumbOverEvent: true, changeTime: 5000, ImgBoxMar: 0, flag: false });
4.至于鼠标滑过 显示左右按钮,可以这么写（思路:css默认隐藏左右按钮，鼠标滑过显示左右按钮，划出隐藏，需要引入jquery.js）
$(function(){ $(".wj_jdt_1").bind("onmouseover",function(){ $(".ctr_btn").show(); }).bind("onmouseout",function(){ $(".ctr_btn").hide(); })})
大体是这么个意思，至于怎么延伸在你
